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

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,17 +19,18 @@ 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)
@@ -37,6 +38,10 @@ function ConsumeCredits({ copy, onClose }: Props) {
   const [redeemAndBuyError, setRedeemAndBuyError] = useState('')
   const [loadingId, setLoadingId] = useState<string | number | null>(null)
 
+  useEffect(() => {
+    if (profile?.user_id) fetchCreditInfo(profile.user_id)
+  }, [])
+
   const isLogin = !!profile
   const { redeemableList, listLoading } = useRedeemableList(alpcConfig)
   const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)
@@ -51,30 +56,50 @@ 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.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
-        }
+        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
+        }
+        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]) {
-    return item.soldOut || item.insufficient
+    if (!isLogin || !isActivate) {
+      return false
+    }
+    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]) {
@@ -82,7 +107,27 @@ function ConsumeCredits({ copy, onClose }: Props) {
       openSignUpPopup()
       return
     }
+    if (!isActivate) {
+      pushView({
+        type: MemberPopupPanelType.Activate,
+      })
+      return
+    }
+    if (item.type === ConsumeCreditsItemType.GiftCard || item.type === ConsumeCreditsItemType.Product) {
+      if (copy.creditsPage?.url) {
+        const sectionId = copy.creditsPage.redeemListSectionId ?? 'creditsRedeemList'
+        const targetUrl = new URL(copy.creditsPage.url, window.location.href)
+        targetUrl.searchParams.set('section', 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: {
@@ -92,7 +137,7 @@ 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,
           alpcConfig,
@@ -101,12 +146,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 {
@@ -117,97 +172,154 @@ 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) => (
-            <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
-                    ? (item.variant?.image?.url ?? item.product?.images?.[0]?.url ?? item.image?.url)
-                    : (mappedImgUrl ?? item.image?.url)
-                  const imgAlt = isRedeemAndBuy
-                    ? (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={isRedeemAndBuy ? 'object-cover' : 'h-full w-auto object-contain'}
-                      />
-                      {!isRedeemAndBuy && item.value && (
-                        <div className="absolute bottom-[20px] left-[4px] text-[14px] font-[800] leading-none text-white">
-                          {item.value} {copy.off}
+          <div className="flex mt-[16px] 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>
+                          )}
+                        </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.creditUnit ?? ''} + $${Number(item.price).toFixed(2)}`
+                          : `${numberFormat(item.alpcData.consume_credits)} ${copy.creditUnit ?? ''}`}
+                      </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 && 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">
-                    {item.type === ConsumeCreditsItemType.RedeemAndBuy && item.product?.title
-                      ? item.product.title
-                      : item.title}
                   </div>
-                  <div className="mt-[4px] text-[14px] text-[#666]">
-                    {item.type === ConsumeCreditsItemType.RedeemAndBuy && 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 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]">
-                        <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>
-                    </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) fetchCreditInfo(profile.user_id)
+              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) fetchCreditInfo(profile.user_id)
+                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 (

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

@@ -40,6 +40,12 @@ export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopify
     }
   }, [profile])
 
+  useEffect(() => {
+    if (countries.length > 0 && !country) {
+      setCountry(countries[0].id)
+    }
+  }, [countries])
+
   const validate = useCallback(() => {
     let hasError = false
     if (!firstName.trim()) {
@@ -153,7 +159,6 @@ export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopify
             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>
             ))}