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

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

@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { Picture, Button } from '@anker-in/headless-ui'
-import { classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
+import { gaTrack, classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
 import { useMemberPopupContext } from '../../context/provider'
 import { useViewStack } from '../../context/viewStack'
 import { useRedeemableList } from './hooks/useRedeemableList'
@@ -19,24 +19,28 @@ type EnrichedItem = ConsumeCreditsItem & {
   alpcData: ConsumeCreditRuleResponse
   insufficient: boolean
   soldOut: boolean
+  disabled: boolean
   product?: any
   variant?: any
 }
 
 type Props = {
   copy: ConsumeCreditsopy
-  onClose: () => void
 }
 
-function ConsumeCredits({ copy, onClose }: Props) {
-  const { profile, creditInfo, openSignUpPopup, alpcConfig } = useMemberPopupContext()
+function ConsumeCredits({ copy }: Props) {
+  const { profile, creditInfo, openSignUpPopup, alpcConfig, isActivateSuccess, fetchCreditInfo, pageHandle } =
+    useMemberPopupContext()
   const { pushView } = useViewStack()
   const { brand } = useHeadlessContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
   const [redeemAndBuyError, setRedeemAndBuyError] = useState('')
   const [loadingId, setLoadingId] = useState<string | number | null>(null)
-  const [isActivateSuccess, setIsActivateSuccess] = useState(false)
+
+  useEffect(() => {
+    if (profile?.user_id) fetchCreditInfo(profile.user_id)
+  }, [])
 
   const isLogin = !!profile
   const { redeemableList, listLoading } = useRedeemableList(alpcConfig)
@@ -52,40 +56,53 @@ function ConsumeCredits({ copy, onClose }: Props) {
         if (!alpcData) return null
 
         const availableCredit = Number(creditInfo?.available_credit ?? 0)
-        const insufficient = isLogin && !!profile?.activated && alpcData.consume_credits > availableCredit
-        const soldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)
-
-        let product
-        let variant
-        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 (item.type === ConsumeCreditsItemType.RedeemAndBuy && (!product || !variant)) return null
-        }
+        const insufficient = alpcData.consume_credits > availableCredit
+        const alpcSoldOut = alpcData.is_limited && (!alpcData.remaining_inventory || alpcData.remaining_inventory <= 0)
 
-        return { ...item, alpcData, insufficient, soldOut, product, variant }
+        const isPhysicalProduct =
+          item.type === ConsumeCreditsItemType.RedeemAndBuy || item.type === ConsumeCreditsItemType.Product
+        const product = products?.find((p: any) => p.handle === item.product?.handle)
+        const variant = product?.variants?.find((v: any) => v.sku === item.product?.sku) ?? product?.variants?.[0]
+        if (isPhysicalProduct && (!product || !variant || !variant?.availableForSale || alpcSoldOut)) {
+          return null
+        }
+        if (item.type === ConsumeCreditsItemType.RedeemAndBuy && item.price == null) {
+          return null
+        }
+        return { ...item, alpcData, insufficient, product, variant }
       })
       .filter(Boolean) as EnrichedItem[]
   }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])
 
+  const isActivate = profile?.activated || isActivateSuccess
+
   function getButtonLabel(item: (typeof list)[number]) {
-    if (!isLogin) return copy.unlockRewards
-    if (item.soldOut) return copy.soldOut
+    if (!isLogin || !isActivate) {
+      return copy.unlockRewards
+    }
+    if (item.soldOut) {
+      return copy.soldOut
+    }
     return copy.btnRedeem
   }
 
   function isDisabled(item: (typeof list)[number]) {
-    if (
-      item.type === ConsumeCreditsItemType.GiftCard ||
-      item.type === ConsumeCreditsItemType.Product
-    ) {
-      return item.insufficient
+    if (!isLogin || !isActivate) {
+      return false
     }
-    return item.soldOut || item.insufficient
+    return item.insufficient
+  }
+
+  function trackRedeemButton(itemTitle: string) {
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        position: 'consume_credits',
+        button_name: 'redeem',
+        info: 'Member Floating Window',
+      },
+    })
   }
 
   async function handleRedeem(item: (typeof list)[number]) {
@@ -93,23 +110,28 @@ function ConsumeCredits({ copy, onClose }: Props) {
       openSignUpPopup()
       return
     }
-    if (!profile?.activated && !isActivateSuccess) {
+    if (!isActivate) {
       pushView({
         type: MemberPopupPanelType.Activate,
-        props: { onSuccess: () => setIsActivateSuccess(true) },
       })
       return
     }
-    if (
-      item.type === ConsumeCreditsItemType.GiftCard ||
-      item.type === ConsumeCreditsItemType.Product
-    ) {
+    if (item.type === ConsumeCreditsItemType.GiftCard || item.type === ConsumeCreditsItemType.Product) {
       if (copy.creditsPage?.url) {
-        window.open(copy.creditsPage.url, '_blank', 'noopener,noreferrer')
+        const sectionId = copy.creditsPage.redeemListSectionId ?? 'creditsRedeemList'
+        const targetUrl = new URL(copy.creditsPage.url, window.location.href)
+        targetUrl.searchParams.set('section', sectionId)
+        targetUrl.hash = sectionId
+        if (pageHandle) {
+          targetUrl.searchParams.set('ref', `${pageHandle}_consume_credits`)
+        }
+        trackRedeemButton(item.title)
+        window.open(targetUrl.toString(), '_blank', 'noopener,noreferrer')
       }
       return
     }
     if (item.type === ConsumeCreditsItemType.Coupon) {
+      trackRedeemButton(item.title)
       pushView({
         type: MemberPopupPanelType.RedeemCoupon,
         props: {
@@ -119,7 +141,6 @@ function ConsumeCredits({ copy, onClose }: Props) {
             ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }
             : item.image,
           itemValue: item.value,
-          itemOff: copy.off,
           itemRules: item.rules,
           redeemId: Number(item.redeemId),
           userId: profile?.user_id,
@@ -129,12 +150,22 @@ function ConsumeCredits({ copy, onClose }: Props) {
     } else {
       setRedeemAndBuyError('')
       setLoadingId(item.redeemId)
+      trackRedeemButton(item.title)
       try {
         await redeemAndBuy({
           productVariant: item.variant,
           redeemId: Number(item.redeemId),
           userId: profile?.user_id,
         })
+        gaTrack({
+          event: 'ga4Event',
+          event_name: 'lp_button',
+          event_parameters: {
+            position: 'consume_credits',
+            button_name: 'redeem_success',
+            info: 'Member Floating Window',
+          },
+        })
       } catch (e: any) {
         setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)
       } finally {
@@ -145,99 +176,169 @@ function ConsumeCredits({ copy, onClose }: Props) {
 
   return (
     <>
-      <div className="flex flex-1 flex-col gap-[12px]">
+      <div className="flex flex-1 flex-col">
         <div className="flex flex-col gap-[8px]">
           {copy.title && <h2 className="text-[24px] font-[700] leading-[1.2] text-[#080a0f]">{copy.title}</h2>}
-          {copy.subtitle && <p className="text-[16px] font-[700] leading-snug text-[#4a4c56]">{copy.subtitle}</p>}
+          {copy.subtitle && (
+            <p className="text-[16px] mt-[8px] font-[700] leading-snug text-[#4a4c56]">{copy.subtitle}</p>
+          )}
         </div>
 
-        {copy.insufficientCredits && creditInfo && (
-          <div className="text-[14px] font-[700] text-[#1d1d1f]">
-            {copy.insufficientCredits}: {numberFormat(creditInfo.available_credit)} {copy.pointUnit}
+        {isLogin && (
+          <div
+            className={cn(
+              'flex items-center mt-[16px] 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 || 0)}
+                </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>
         )}
-        {redeemAndBuyError && <div className="text-[14px] font-[700] text-[#f84d4f]">{redeemAndBuyError}</div>}
+        {redeemAndBuyError && <div className="text-[14px] mt-[8px] font-[700] text-[#f84d4f]">{redeemAndBuyError}</div>}
 
         {listLoading ? (
           <div className="flex flex-1 items-center justify-center py-[32px]">
             <div className="size-[32px] animate-spin rounded-full border-[3px] border-[#080a0f] border-t-transparent" />
           </div>
         ) : (
-          <div className="flex flex-col">
-          {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 mappedImgUrl = copy.imageMapping?.[item.type]?.url
-                  const imgUrl = hasProduct
-                    ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)
-                    : (mappedImgUrl ?? item.image?.url)
-                  const imgAlt = hasProduct
-                    ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')
-                    : (item.image?.alt ?? '')
-                  if (!imgUrl) return null
-                  return (
-                    <div className={cn('relative size-[64px] shrink-0 overflow-hidden', rounded ? 'rounded-[4px]' : 'rounded-none')}>
-                      <Picture
-                        source={imgUrl}
-                        alt={imgAlt}
-                        className="flex size-full items-center justify-center"
-                        imgClassName={hasProduct ? 'object-cover' : 'h-full w-auto object-contain'}
-                      />
-                      {!hasProduct && item.value && (
-                        <div className="absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white">
-                          {item.value} {copy.off}
+          <div className="flex mt-[16px] flex-col">
+            {list.map((item, idx) => {
+              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 phsicalProduct =
+                        item.type === ConsumeCreditsItemType.Product ||
+                        item.type === ConsumeCreditsItemType.RedeemAndBuy
+                      const imgUrl = phsicalProduct
+                        ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)
+                        : item.image?.url || copy.imageMapping?.[item.type]?.url
+                      const imgAlt = phsicalProduct
+                        ? (item.variant?.image?.altText ?? item.product?.images?.[0]?.alt ?? item.image?.alt ?? '')
+                        : (item.image?.alt ?? '')
+                      if (!imgUrl) return null
+                      return (
+                        <div
+                          className={cn(
+                            'relative size-[64px] shrink-0 overflow-hidden',
+                            rounded ? 'rounded-[4px]' : 'rounded-none'
+                          )}
+                        >
+                          <Picture
+                            source={imgUrl}
+                            alt={imgAlt}
+                            className="flex size-full items-center justify-center"
+                            imgClassName={phsicalProduct ? 'object-cover' : 'h-full w-auto object-contain'}
+                          />
+                          {item.type === ConsumeCreditsItemType.Coupon && item.value && (
+                            <div className="absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white">
+                              {item.value && `${item.value} ${copy.off}`}
+                            </div>
+                          )}
+                          {item.type === ConsumeCreditsItemType.GiftCard && item.value && (
+                            <div className="absolute bottom-[16px] left-[4px] text-[12px] font-[800] leading-none text-white">
+                              {item.value && `${item.value} ${copy.giftCard || 'Gift Card'}`}
+                            </div>
+                          )}
+                        </div>
+                      )
+                    })()}
+                    <div className="min-w-0 flex-1">
+                      <div className="text-[16px] font-[700] text-[#1e2024] line-clamp-2">
+                        {item.product?.title ?? item.title ?? item.alpcData?.name}
+                      </div>
+                      <div className="mt-[4px] text-[14px] text-[#666]">
+                        {item.type === ConsumeCreditsItemType.RedeemAndBuy ? (
+                          <div>
+                            <span>
+                              {numberFormat(item.alpcData.consume_credits)} {copy.creditUnit ?? ''} + $
+                              {Number(item.price).toFixed(2)}
+                            </span>
+                            {item.variant?.price?.amount && (
+                              <span className="text-[12px] ml-1 text-[#999] line-through">
+                                ${Number(item.variant.price.amount).toFixed(2)}
+                              </span>
+                            )}
+                          </div>
+                        ) : (
+                          `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`
+                        )}
+                      </div>
+                    </div>
+                    <div className="relative group">
+                      <Button
+                        size="base"
+                        disabled={isDisabled(item)}
+                        loading={loadingId === item.redeemId}
+                        onClick={() => handleRedeem(item)}
+                      >
+                        {getButtonLabel(item)}
+                      </Button>
+                      {item.insufficient && isLogin && isActivate && (
+                        <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] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]" />
+                          </div>
                         </div>
                       )}
                     </div>
-                  )
-                })()}
-                <div className="min-w-0 flex-1">
-                  <div className="text-[16px] font-[700] text-[#1e2024] line-clamp-2">
-                    {hasProduct && item.product?.title
-                      ? item.product.title
-                      : item.title}
-                  </div>
-                  <div className="mt-[4px] text-[14px] text-[#666]">
-                    {hasProduct && item.price != null
-                      ? `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''} + $${Number(item.price).toFixed(2)}`
-                      : `${numberFormat(item.alpcData.consume_credits)} ${copy.pointUnit ?? ''}`}
                   </div>
                 </div>
-                <div className="relative group">
-                  <Button
-                    className={cn('bg-[#080a0f] px-[20px] pb-[10px] pt-[11px] text-[14px] font-[700] leading-[1.2] text-white', rounded ? 'rounded-[4px]' : 'rounded-none')}
-                    disabled={isDisabled(item)}
-                    loading={loadingId === item.redeemId}
-                    onClick={() => handleRedeem(item)}
-                  >
-                    {getButtonLabel(item)}
-                  </Button>
-                  {item.insufficient && (
-                    <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] right-[20px] size-[16px] origin-top-left rotate-45 rounded-[2px] bg-[#6D6D6F]" />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-            )
-          })}
-        </div>
+              )
+            })}
+          </div>
         )}
 
         {copy.creditsPage?.url && (
           <a
-            href={copy.creditsPage.url}
+            href={(() => {
+              if (!pageHandle) return copy.creditsPage!.url
+              try {
+                const url = new URL(copy.creditsPage!.url, window.location.href)
+                url.searchParams.set('ref', `${pageHandle}_consume_credits`)
+                return url.toString()
+              } catch {
+                return copy.creditsPage!.url
+              }
+            })()}
             target="_blank"
             rel="noopener noreferrer"
             className="mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline"
+            onClick={() =>
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                event_parameters: {
+                  position: 'consume_credits',
+                  button_name: 'credits_page_link',
+                  info: 'Member Floating Window',
+                },
+              })
+            }
           >
             {copy.creditsPage.label ?? 'Go to Credits Page'}
           </a>

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

@@ -11,15 +11,16 @@ import {
 import { Message } from '../../../registration/authCodeActivate/Message'
 import type { AuthCodeActivateCopy } from '../../type'
 import { useRegistration } from '../../../registration'
+import { useMemberPopupContext } from '../../context/provider'
 import { ROUNDED_BRANDS } from '../../../../constants'
 
 type Props = {
   copy: AuthCodeActivateCopy
   onClose: () => void
-  onSuccess?: () => void
 }
 
-export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
+export default function ActivatePanel({ copy, onClose }: Props) {
+  const { setIsActivateSuccess, fetchCreditInfo, profile } = useMemberPopupContext()
   const { locale, brand } = useHeadlessContext()
   const { email } = useRegistration()
   const rounded = ROUNDED_BRANDS.includes(brand)
@@ -165,14 +166,36 @@ export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
             if (data.status >= 200 && data.status < 300) {
               setMessageStatus('success')
               setMessageText(copy?.authSuccessMessage || '')
-              onSuccess?.()
+              setIsActivateSuccess(true)
+              if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)
+              gaTrack({
+                event: 'ga4Event',
+                event_name: 'lp_button',
+                event_parameters: {
+                  page_group: 'reg_sub_pop',
+                  position: 'auth_code',
+                  button_name: 'check_and_active',
+                  info: 'Member Floating Window',
+                },
+              })
               setTimeout(() => {
                 onClose()
               }, 3000)
             } else {
               const errorCode = data?.data?.error_code ?? data?.error_code
               if (errorCode === '104') {
-                onSuccess?.()
+                setIsActivateSuccess(true)
+                if (profile?.user_id) setTimeout(() => fetchCreditInfo(profile.user_id), 3000)
+                gaTrack({
+                  event: 'ga4Event',
+                  event_name: 'lp_button',
+                  event_parameters: {
+                    page_group: 'reg_sub_pop',
+                    position: 'auth_code',
+                    button_name: 'check_and_active',
+                    info: 'Member Floating Window',
+                  },
+                })
                 setTimeout(() => {
                   onClose()
                 }, 3000)
@@ -194,16 +217,6 @@ export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
       setMessageText('')
       clearTimeout(timer)
     }, 5000)
-
-    gaTrack({
-      event: 'ga4Event',
-      event_name: 'lp_button',
-      event_parameters: {
-        page_group: 'reg_sub_pop',
-        position: 'auth_code',
-        button_name: 'check_and_active',
-      },
-    })
   }, [
     code,
     copy?.codeEmptyError,
@@ -215,7 +228,9 @@ export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
     sendEmailData,
     triggerEmailValidation,
     onClose,
-    onSuccess,
+    setIsActivateSuccess,
+    fetchCreditInfo,
+    profile,
   ])
 
   return (
@@ -311,7 +326,8 @@ export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
         <Button
           type="submit"
           loading={emailValidationLoading}
-          className="mt-6 flex h-[54px] w-full cursor-pointer items-center justify-center px-8 py-[15px] text-center text-base font-bold leading-[100%] text-white min-l:mt-8"
+          className="mt-6 w-full min-l:mt-8"
+          size="base"
           onClick={handleAuthCodeSubmit}
         >
           {copy.buttonText}