@anker-in/campaign-ui 0.2.0 → 0.2.1

package/src/components/credits/modal/subscribeModal.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import { Button, Checkbox, Picture, Text } from '@anker-in/headless-ui'
+import { classNames, fetcher, gaTrack, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import Cookies from 'js-cookie'
+import { parse } from 'query-string'
+import sha256 from 'crypto-js/sha256'
+import { useCreditsContext } from '../context/provider'
+import { emailValidate } from '../context/utils'
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+
+export type CreditsSubscribeModalCopy = {
+  title: string
+  desc?: string
+  placeholder: string
+  policy?: string
+  successTips?: string
+  dealsType?: string
+}
+
+interface CreditsSubscribeModalProps extends ModalContainerProps {
+  copy: CreditsSubscribeModalCopy
+  onSuccess?: () => void
+}
+
+const 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'),
+    affiliate: Cookies.get('affiliate'),
+    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,
+    deals_type: Cookies.get('deal'),
+    transfer_id: Cookies.get('transfer_id'),
+  }
+}
+
+export function CreditsSubscribeModal({ copy, onSuccess, ...props }: CreditsSubscribeModalProps) {
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+  const { locale } = useRouter()
+  const [policy, setPolicy] = useState(false)
+  const [email, setEmail] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+  const [successMessage, setSuccessMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+  const { profile } = useCreditsContext()
+
+  const handleEmailChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setErrorMessage('')
+    setEmail(event.target?.value?.trim())
+  }, [])
+
+  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 result = await fetcher({
+      locale,
+      action: 'subscribe',
+      url: '/api/multipass/subscribe/subscribe_emails',
+      method: 'POST',
+      body: {
+        email,
+        register_source,
+        brand,
+        deals_type: copy.dealsType || 'vip_subscribe',
+      },
+      headers: {},
+      type: '',
+    })
+    setLoading(false)
+
+    if (!result.errors) {
+      setSuccessMessage(copy.successTips || 'Subscribed successfully!')
+      if (onSuccess) {
+        onSuccess()
+      }
+      setTimeout(() => {
+        setSuccessMessage('')
+      }, 3000)
+      gaTrack({
+        subscribe_hashed_email: email ? sha256(email) : '',
+      })
+      gaTrack({
+        event: 'ga4Event',
+        event_name: 'subscribe',
+        event_parameters: {
+          page_group: copy.dealsType || 'vip_subscribe',
+          position: 'pop_up',
+        },
+      })
+      gaTrack({
+        event: 'uaEvent',
+        eventCategory: 'subscribe',
+        eventAction: copy.dealsType || 'vip_subscribe',
+        eventLabel: 'pop_up',
+        nonInteraction: false,
+      })
+    } else {
+      setErrorMessage(result.errors || result.statusText)
+    }
+  }, [email, policy, locale, brand, copy.dealsType, copy.successTips, onSuccess])
+
+  useEffect(() => {
+    if (profile && profile?.email) {
+      setEmail(profile?.email)
+    }
+  }, [profile])
+
+  return (
+    <CreditsModalContainer
+      className="w-[540px] md:h-auto"
+      scrollClassName="mb-[40px] min-l:px-[48px] md:mb-[24px]"
+      titleClassName="h-[56px]"
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      {...props}
+    >
+      <div className="flex flex-col gap-[16px] text-center min-l:px-[16px]">
+        <div>
+          <Text className={classNames('mb-[24px] text-[22px] font-bold')} html={copy.title}></Text>
+        </div>
+        {copy.desc && (
+          <Text
+            className="mb-[8px] text-left text-[16px] font-semibold leading-[1.4] text-[#1F2021]"
+            html={copy.desc}
+          ></Text>
+        )}
+        <div
+          className={classNames(
+            'relative flex h-[52px] w-full overflow-hidden rounded-[2px] md:grid md:h-auto md:grid-rows-1 md:gap-[16px]',
+            !rounded && 'rounded-none'
+          )}
+        >
+          <input
+            className={classNames(
+              'h-full flex-1 rounded-l-[2px] border-[1px] border-[#d8d8d8] px-[14px] py-[17px] text-[16px] font-semibold leading-[1] outline-none placeholder:text-[#999] md:h-[52px] md:rounded-[2px]',
+              !rounded && 'rounded-none'
+            )}
+            placeholder={copy.placeholder}
+            value={email}
+            onChange={handleEmailChange}
+          />
+          <Button
+            variant="primary"
+            onClick={handleSubmit}
+            loading={loading}
+            className={classNames(
+              'legacy-headless-ui-primary-button !h-full !min-w-0 !rounded-l-none !rounded-r-[2px] !px-[40px] !py-[13px]',
+              !rounded && 'rounded-none'
+            )}
+          >
+            <Picture
+              source="https://cdn.shopify.com/s/files/1/0512/8568/8505/files/icon_email.png?v=1697527383"
+              className="h-[24px] w-[24px]"
+              alt="email"
+            />
+          </Button>
+        </div>
+        <div className="flex w-full">
+          <Checkbox checked={policy} onCheckedChange={() => setPolicy(!policy)} required className="border-[#1d1d1f]" />
+          <label
+            className="text-left ml-2 text-[14px] font-semibold text-[#777] [&_a]:underline"
+            dangerouslySetInnerHTML={{
+              __html: copy?.policy || '',
+            }}
+          />
+        </div>
+        <div
+          className={classNames(
+            'w-full text-left text-[16px] font-semibold',
+            errorMessage && 'text-[#F84D4F]',
+            successMessage && 'text-[#52C41A]'
+          )}
+        >
+          <Text html={successMessage || errorMessage || ''} />
+        </div>
+      </div>
+    </CreditsModalContainer>
+  )
+}

package/src/components/credits/modal/tip.tsx

@@ -1,9 +1,13 @@
+import { useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
 import classNames from 'classnames'
 import { useState } from 'react'
 
 function Tip({ info, index }: { info: string; index: number }) {
   const [show, setShow] = useState(false)
 
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
   return (
     <div
       className="relative ml-[6px] cursor-pointer"
@@ -81,7 +85,12 @@ function Tip({ info, index }: { info: string; index: number }) {
                 }
           }
         ></i>
-        <p className="relative block rounded-[4px] bg-white px-[14px] py-[12px]">
+        <p
+          className={classNames(
+            'relative block rounded-[4px] bg-white px-[14px] py-[12px]',
+            !rounded && 'rounded-none'
+          )}
+        >
           <span className="block text-left text-[14px] font-semibold leading-[1.4] text-[#333]">{info}</span>
         </p>
       </div>

package/src/components/credits/type.ts

@@ -1,5 +1,7 @@
 import type { Product, ProductVariant } from '@anker-in/lib'
 import type { AlpcConsumeType, ConsumeType } from './context/const'
+import { MyActivitiesMetafields } from './modal/activitiesModal'
+import { MyRewardsMetafields } from './modal/MyRewardsModal'
 
 export interface Subscription {
   preference: {
@@ -49,12 +51,29 @@ export interface ShippingZone {
 }
 
 export type CreditsPageCommon = {
-  pointUnit: string
-  ruleLabel: string
-  soldOut: string
-  imageMapping: {
+  pointUnit?: string
+  infoIcon?: string
+  ruleLabel?: string
+  soldOut?: string
+  copied?: string
+  off?: string
+  copy?: string
+  giftCardLabel?: string
+  imageMapping?: {
     [key in ConsumeType]: {
       url: string
     }
   }
+  activitiesModal?: MyActivitiesMetafields
+  rewardsModal?: MyRewardsMetafields
+  insufficientCredits?: string
+  validatorInfo?: {
+    addressInfo: {
+      name: string
+      country: string
+      province: string
+      city: string
+      address: string
+    }
+  }
 }

package/src/components/index.ts

@@ -1,5 +1,3 @@
-// eslint-disable-next-line import/extensions
-
 export { default as Chat } from './chat/index'
 
 export {
@@ -12,3 +10,5 @@ export {
 } from './chat/utils'
 
 export * from './credits/index'
+
+export * from './registration/index'

package/src/components/registration/authCodeActivate/Message.tsx

@@ -0,0 +1,43 @@
+export const Message = ({ status, message }: { status: string; message: string }) => {
+  return (
+    status && (
+      <div className="absolute left-5 right-5 top-2 flex items-center gap-2 rounded-sm bg-white px-4 py-3 shadow-lg min-md:left-12 min-md:right-12">
+        <div className="flex-shrink-0">
+          {status === 'success' && (
+            <span className="inline-block h-5 w-5">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16388)">
+                  <circle cx="10" cy="10" r="10" fill="#1677FF" />
+                  <path d="M10 16L10 10" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="6.5" r="1.5" transform="rotate(-180 10 6.5)" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16388">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+          {status === 'error' && (
+            <span className="inline-block h-5 w-5">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip0_205_16236)">
+                  <circle cx="10" cy="10" r="10" fill="#F84D4F" />
+                  <path d="M10 5L10 11" stroke="white" strokeWidth="2" strokeLinecap="round" />
+                  <circle cx="10" cy="14.5" r="1.5" fill="white" />
+                </g>
+                <defs>
+                  <clipPath id="clip0_205_16236">
+                    <rect width="20" height="20" fill="white" />
+                  </clipPath>
+                </defs>
+              </svg>
+            </span>
+          )}
+        </div>
+        <p className="text-sm font-semibold leading-[120%] text-[#333]">{message}</p>
+      </div>
+    )
+  )
+}

package/src/components/registration/authCodeActivate/index.tsx

@@ -0,0 +1,338 @@
+import { Button, Text } from '@anker-in/headless-ui'
+import {
+  useSendEmailValidation,
+  gaTrack,
+  classNames as cn,
+  useHeadlessContext,
+  useEmailValidation,
+  useCountDown,
+  ROUNDED_BRANDS,
+} from '@anker-in/lib'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { Message } from './Message'
+import { AuthCodeActivateProps } from './type'
+import { useRegistration } from '../context'
+import { RegistrationModalContainer } from '../modalContainer'
+
+export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
+  const { locale, brand } = useHeadlessContext()
+  const { email, authCodeActivate } = useRegistration()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const { activeToken, setActiveToken, setIsSendingActivateEmail, setIsActivateSuccess, onAuthSuccess, autoSendEmail } =
+    authCodeActivate
+
+  const { isMutating: emailValidationLoading, trigger: triggerEmailValidation } = useEmailValidation()
+
+  const {
+    isMutating: isSendingEmail,
+    trigger: triggerSendValidationEmail,
+    data: sendEmailData,
+  } = useSendEmailValidation()
+
+  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 (sendEmailData?.data?.data?.active_token) {
+      setActiveToken(sendEmailData.data.data.active_token)
+    }
+  }, [sendEmailData?.data?.data?.active_token])
+
+  useEffect(() => {
+    setIsSendingActivateEmail(isSendingEmail)
+  }, [isSendingEmail, setIsSendingActivateEmail])
+
+  // 自动发送邮箱验证码
+  useEffect(() => {
+    if (autoSendEmail && email) {
+      triggerSendValidationEmail(
+        {
+          email: email,
+          data: {
+            redirect_url: `${window?.location?.origin}${window?.location?.pathname}`,
+          },
+        },
+        {
+          onSuccess: () => {
+            setMessageStatus('success')
+            setMessageText(copy?.sendEmailSuccessMessage || '')
+            startCountDown()
+            setTimeout(() => {
+              setMessageStatus('')
+              setMessageText('')
+            }, 5000)
+          },
+        }
+      )
+    }
+  }, [autoSendEmail, email, triggerSendValidationEmail])
+
+  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
+    }
+
+    if (activeToken) {
+      await triggerEmailValidation(
+        {
+          token: activeToken,
+          code: code,
+        },
+        {
+          onSuccess: data => {
+            if (data.status >= 200 && data.status < 300) {
+              setMessageStatus('success')
+              setMessageText(copy?.authSuccessMessage || '')
+              setIsActivateSuccess(true)
+              if (onAuthSuccess) {
+                onAuthSuccess()
+              } else {
+                setTimeout(() => {
+                  authCodeActivate.close()
+                }, 3000)
+              }
+            } else {
+              if (data?.data?.error_code === '104') {
+                if (onAuthSuccess) {
+                  onAuthSuccess()
+                } else {
+                  setTimeout(() => {
+                    authCodeActivate.close()
+                  }, 3000)
+                }
+              } else if (data?.data?.error_code === '142') {
+                setError(copy?.incorrectCodeError || 'Invalid verification code.')
+              } else if (data?.data?.error_code === '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,
+    activeToken,
+  ])
+
+  return (
+    <RegistrationModalContainer isOpen={authCodeActivate.isOpen} onClose={authCodeActivate.close}>
+      <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>
+    </RegistrationModalContainer>
+  )
+}

package/src/components/registration/authCodeActivate/type.ts

@@ -0,0 +1,23 @@
+export type AuthCodeActivateCopy = {
+  authCodeTitle?: string
+  authCodeDesc?: string
+  enterActiveCodeText?: string
+  authCodeContent?: string
+  authCodeReceiveText?: string
+  sendAgainText?: string
+  buttonText?: string
+  note?: string
+  codeEmptyError?: string
+  incorrectCodeError?: string
+  retrieveText?: string
+  authSuccessMessage?: string
+  sendEmailSuccessMessage?: string
+  sendEmailErrorMessage?: string
+  beenActivatedMessage?: string
+  invalidCodeMessage?: string
+  expiredCodeMessage?: string
+}
+
+export type AuthCodeActivateProps = {
+  copy: AuthCodeActivateCopy
+}

package/src/components/registration/context/index.tsx

@@ -0,0 +1 @@
+export * from './provider'