@anker-in/campaign-ui 0.4.6 → 0.5.0-beta.1

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

@@ -0,0 +1,220 @@
+import { useMemo, useState } from 'react'
+import { Picture, Button } from '@anker-in/headless-ui'
+import { classNames as cn, useProductsByHandles, useHeadlessContext } from '@anker-in/lib'
+import { useMemberPopupContext } from '../../context/provider'
+import { useViewStack } from '../../context/viewStack'
+import { useRedeemableList } from './hooks/useRedeemableList'
+import { useRedeemAndBuy } from './hooks/useRedeemAndBuy'
+import {
+  ConsumeCreditsItemType,
+  MemberPopupPanelType,
+  type ConsumeCreditsopy,
+  type ConsumeCreditsItem,
+} from '../../type'
+import { numberFormat } from '../../../credits/context/utils'
+import type { ConsumeCreditRuleResponse } from '../../../credits/context/response'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type EnrichedItem = ConsumeCreditsItem & {
+  alpcData: ConsumeCreditRuleResponse
+  insufficient: boolean
+  soldOut: boolean
+  product?: any
+  variant?: any
+}
+
+type Props = {
+  copy: ConsumeCreditsopy
+  onClose: () => void
+}
+
+function ConsumeCredits({ copy, onClose }: Props) {
+  const { profile, creditInfo, openSignUpPopup, alpcConfig } = 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 isLogin = !!profile
+  const { redeemableList, listLoading } = useRedeemableList(alpcConfig)
+  const { trigger: redeemAndBuy } = useRedeemAndBuy(alpcConfig)
+
+  const handles = copy.list.map(item => item.product?.handle).filter(Boolean) as string[]
+  const { data: products } = useProductsByHandles({ handles })
+
+  const list = useMemo(() => {
+    return copy.list
+      .map(item => {
+        const alpcData = redeemableList.find(r => String(r.id) === String(item.redeemId))
+        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
+        }
+
+        return { ...item, alpcData, insufficient, soldOut, product, variant }
+      })
+      .filter(Boolean) as EnrichedItem[]
+  }, [copy.list, redeemableList, creditInfo, profile, isLogin, products])
+
+  function getButtonLabel(item: (typeof list)[number]) {
+    if (!isLogin) return copy.unlockRewards
+    if (item.soldOut) return copy.soldOut
+    return copy.btnRedeem
+  }
+
+  function isDisabled(item: (typeof list)[number]) {
+    return item.soldOut || item.insufficient
+  }
+
+  async function handleRedeem(item: (typeof list)[number]) {
+    if (!isLogin) {
+      openSignUpPopup()
+      return
+    }
+    if (item.type === ConsumeCreditsItemType.Coupon) {
+      pushView({
+        type: MemberPopupPanelType.RedeemCoupon,
+        props: {
+          itemTitle: item.title,
+          itemCredits: item.alpcData.consume_credits,
+          itemImage: copy.imageMapping?.[item.type]
+            ? { url: copy.imageMapping[item.type]!.url, alt: item.image?.alt }
+            : item.image,
+          itemValue: item.value,
+          itemOff: copy.off,
+          redeemId: Number(item.redeemId),
+          userId: profile?.user_id,
+          alpcConfig,
+        },
+      })
+    } else {
+      setRedeemAndBuyError('')
+      setLoadingId(item.redeemId)
+      try {
+        await redeemAndBuy({
+          productVariant: item.variant,
+          redeemId: Number(item.redeemId),
+          userId: profile?.user_id,
+        })
+      } catch (e: any) {
+        setRedeemAndBuyError(e?.message ?? copy.redeemModal.commonError)
+      } finally {
+        setLoadingId(null)
+      }
+    }
+  }
+
+  return (
+    <>
+      <div className="flex flex-1 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.subtitle && <p className="text-[16px] 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}
+          </div>
+        )}
+        {redeemAndBuyError && <div className="text-[14px] 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>
+                      )}
+                    </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>
+        )}
+
+        {copy.creditsPage?.url && (
+          <a
+            href={copy.creditsPage.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-auto self-start text-[14px] font-[700] text-[#080a0f] underline"
+          >
+            {copy.creditsPage.label ?? 'Go to Credits Page'}
+          </a>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default ConsumeCredits

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

@@ -0,0 +1,323 @@
+import { useState, useCallback, useRef, useEffect } from 'react'
+import { Button, Text } from '@anker-in/headless-ui'
+import {
+  useSendEmailValidation,
+  gaTrack,
+  classNames as cn,
+  useHeadlessContext,
+  useEmailValidation,
+  useCountDown,
+} from '@anker-in/lib'
+import { Message } from '../../../registration/authCodeActivate/Message'
+import type { AuthCodeActivateCopy } from '../../type'
+import { useRegistration } from '../../../registration'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type Props = {
+  copy: AuthCodeActivateCopy
+  onClose: () => void
+  onSuccess?: () => void
+}
+
+export default function ActivatePanel({ copy, onClose, onSuccess }: Props) {
+  const { locale, brand } = useHeadlessContext()
+  const { email } = useRegistration()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const {
+    isMutating: isSendingEmail,
+    trigger: triggerSendValidationEmail,
+    data: sendEmailData,
+  } = useSendEmailValidation()
+
+  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
+
+  const [messageText, setMessageText] = useState('')
+  const [messageStatus, setMessageStatus] = useState('')
+  const { startCountDown: isStartCountDown, startAction: startCountDown, countDown } = useCountDown(60)
+
+  const [error, setError] = useState('')
+  const [focusIndex, setFocusIndex] = useState(0)
+  const [codeArray, setCodeArray] = useState(new Array(6).fill(''))
+
+  const inputRefs = useRef<HTMLInputElement[]>([])
+  const code = codeArray.join('')
+
+  useEffect(() => {
+    if (inputRefs.current[focusIndex]) {
+      inputRefs.current[focusIndex].focus()
+    }
+  }, [focusIndex])
+
+  useEffect(() => {
+    if (email) {
+      triggerSendValidationEmail(
+        {
+          email: email,
+          data: {
+            redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
+          },
+        },
+        {
+          onSuccess: () => {
+            setMessageStatus('success')
+            setMessageText(copy?.sendEmailSuccessMessage || '')
+            startCountDown()
+            setTimeout(() => {
+              setMessageStatus('')
+              setMessageText('')
+            }, 5000)
+          },
+        }
+      )
+    }
+  }, [email])
+
+  const handleSendAgain = useCallback(async () => {
+    if (!email) return
+    await triggerSendValidationEmail(
+      {
+        email: email,
+        data: {
+          redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
+        },
+      },
+      {
+        onSuccess: () => {
+          setMessageStatus('success')
+          setMessageText(copy?.sendEmailSuccessMessage || '')
+          startCountDown()
+          setTimeout(() => {
+            setMessageStatus('')
+            setMessageText('')
+          }, 5000)
+        },
+      }
+    )
+    gaTrack({
+      event: 'ga4Event',
+      event_name: 'lp_button',
+      event_parameters: {
+        page_group: 'reg_sub_pop',
+        position: 'auth_code',
+        button_name: 'sent_again',
+      },
+    })
+  }, [email, triggerSendValidationEmail])
+
+  const handleInputCodeChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const { value } = event.target
+
+    setError('')
+
+    if (Number.isNaN(Number(value))) {
+      return
+    }
+
+    if (value.length > 1) {
+      if (index < codeArray.length - 1) {
+        if (!codeArray[index + 1]) {
+          setFocusIndex(index + 1)
+          setCodeArray(old => {
+            const newCode = [...old]
+            newCode[index] = value[0]
+            if (value.length > 1) {
+              newCode[index + 1] = value[1]
+            }
+            return newCode
+          })
+        }
+      }
+      return
+    }
+    const newCode = [...codeArray]
+    newCode[index] = value
+    setCodeArray(newCode)
+    if (value) {
+      if (index < codeArray.length - 1 && !codeArray[index + 1]) {
+        setFocusIndex(index + 1)
+      }
+    } else if (index > 0) {
+      setFocusIndex(index - 1)
+    }
+  }
+
+  const handleAuthCodeSubmit = useCallback(async () => {
+    if (!code?.length) {
+      setError(copy?.codeEmptyError || '')
+      return
+    }
+
+    if (code.length < 6) {
+      setError(copy?.incorrectCodeError || '')
+      return
+    }
+
+    const token = sendEmailData?.data?.data?.active_token ?? sendEmailData?.data?.active_token
+    if (token) {
+      await triggerEmailValidation(
+        {
+          token: token,
+          code: code,
+        },
+        {
+          onSuccess: data => {
+            if (data.status >= 200 && data.status < 300) {
+              setMessageStatus('success')
+              setMessageText(copy?.authSuccessMessage || '')
+              onSuccess?.()
+              setTimeout(() => {
+                onClose()
+              }, 3000)
+            } else {
+              const errorCode = data?.data?.error_code ?? data?.error_code
+              if (errorCode === '104') {
+                onSuccess?.()
+                setTimeout(() => {
+                  onClose()
+                }, 3000)
+              } else if (errorCode === '142') {
+                setError(copy?.incorrectCodeError || 'Invalid verification code.')
+              } else if (errorCode === '154') {
+                setError(copy?.expiredCodeMessage || '')
+              } else {
+                setError(copy?.sendEmailErrorMessage || '')
+              }
+            }
+          },
+        }
+      )
+    }
+
+    let timer = setTimeout(() => {
+      setMessageStatus('')
+      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,
+    copy?.authSuccessMessage,
+    copy?.incorrectCodeError,
+    copy?.expiredCodeMessage,
+    copy?.sendEmailErrorMessage,
+    locale,
+    sendEmailData,
+    triggerEmailValidation,
+    onClose,
+    onSuccess,
+  ])
+
+  return (
+    <div className="relative">
+      <div>
+        <Text
+          className="text-[22px] font-extrabold leading-[120%] text-[#333] min-l:text-[24px] [&_abbr]:text-[#005d8e]"
+          html={copy?.authCodeTitle}
+        />
+        <Text
+          as="p"
+          className="mt-3 text-[14px] font-semibold leading-[140%] text-[rgba(51,51,51,0.75)] min-l:text-base [&_abbr]:text-[#333]"
+          html={copy?.authCodeDesc?.replace('%email%', email || '')}
+        />
+      </div>
+      <div className="mt-6">
+        <Text
+          className="mt-4 text-[14px] !font-bold font-semibold leading-[140%] text-[#333] min-l:mt-6"
+          html={copy?.enterActiveCodeText}
+        />
+        <div className="my-3 grid grid-cols-6 gap-2">
+          {codeArray.map((item, index) => (
+            <div key={index} className="col-span-1 aspect-1 text-[#555]">
+              <input
+                ref={inputRef => {
+                  if (inputRef) {
+                    inputRefs.current[index] = inputRef
+                  }
+                }}
+                key={index}
+                type="tel"
+                className={cn(
+                  'flex size-full items-center justify-center border border-[#333333]/20 bg-[#EEEEEE] text-center text-[24px] font-medium focus:border-[#333]/50 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none [&:focus-visible]:outline-none',
+                  rounded && 'rounded-[12px]'
+                )}
+                value={item}
+                autoComplete="false"
+                autoCorrect="false"
+                spellCheck="false"
+                autoCapitalize="false"
+                onChange={event => handleInputCodeChange(event, index)}
+                onFocus={() => {
+                  setFocusIndex(index)
+                }}
+                onPaste={event => {
+                  const paste = event.clipboardData.getData('text')
+                  if (!Number.isNaN(Number(paste))) {
+                    const pastedCode = paste.split('').slice(0, 6)
+                    setCodeArray(pastedCode.concat(Array(6 - pastedCode.length).fill('')))
+                    if (pastedCode.length <= codeArray.length) {
+                      setFocusIndex(pastedCode.length - 1)
+                    }
+                  }
+                }}
+                onKeyDown={event => {
+                  const { value } = event.target as HTMLInputElement
+                  if (event.key === 'Backspace' && !value && index > 0) {
+                    setFocusIndex(index - 1)
+                  }
+                }}
+              />
+            </div>
+          ))}
+        </div>
+
+        {error && <Text className="mb-3 text-[14px] font-semibold leading-[120%] text-[#f84d4f]" html={error} />}
+        {copy?.authCodeContent && (
+          <ul
+            className='flex flex-col gap-1 [&_li]:flex [&_li]:gap-2 [&_li]:text-[14px] [&_li]:font-semibold [&_li]:leading-[120%] [&_li]:text-[rgba(51,51,51,0.55)] [&_li]:before:content-["•"]'
+            dangerouslySetInnerHTML={{ __html: copy?.authCodeContent }}
+          />
+        )}
+      </div>
+      <div className="mt-4 min-l:mt-6">
+        <Text className="text-base font-semibold leading-[100%] text-[#333]" html={copy?.authCodeReceiveText} />{' '}
+        {isStartCountDown ? (
+          <Text
+            html={copy?.retrieveText?.replace('%countdownTime%', countDown.toString())}
+            className="cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline"
+          />
+        ) : (
+          <Text
+            onClick={handleSendAgain}
+            className={cn(
+              'cursor-pointer text-base font-semibold leading-[100%] !text-brand text-[#005d8e] text-[#333] underline',
+              {
+                'pointer-events-none': isStartCountDown || isSendingEmail,
+              }
+            )}
+            html={copy?.sendAgainText}
+          />
+        )}
+        <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"
+          onClick={handleAuthCodeSubmit}
+        >
+          {copy.buttonText}
+        </Button>
+      </div>
+      <Message status={messageStatus} message={messageText} />
+    </div>
+  )
+}