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

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

@@ -1,130 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Checkbox, 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 = {
-  copy: SubscribeModalCopy
-  email?: string
-  onClose: () => void
-  onSuccess?: () => 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,
-  }
-}
-
-export default function SubscribeEmailPanel({ copy, email: initialEmail, onClose, onSuccess }: Props) {
-  const { alpcConfig } = useMemberPopupContext()
-  const { brand, locale } = alpcConfig
-  const { brand: headlessBrand } = 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()
-    try {
-      const response = await fetch('/api/multipass/subscribe/subscribe_emails', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'current-language': locale },
-        body: JSON.stringify({
-          email,
-          register_source,
-          brand,
-          deals_type: copy.dealsType ?? 'vip_subscribe',
-        }),
-      })
-      const result = await response.json()
-      if (!result.errors) {
-        setSuccessMessage(copy.successTips ?? 'Subscribed successfully!')
-        onSuccess?.()
-        setTimeout(() => {
-          setSuccessMessage('')
-          onClose()
-        }, 3000)
-      } else {
-        setErrorMessage(result.errors ?? 'Error occurred')
-      }
-    } catch {
-      setErrorMessage('Network error')
-    } finally {
-      setLoading(false)
-    }
-  }, [email, policy, locale, brand, copy, onClose, onSuccess])
-
-  return (
-    <div className="flex 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.desc && (
-          <Text className="text-[16px] text-[#1e2024]" html={copy.desc} />
-        )}
-      </div>
-
-      <div className="flex flex-col gap-[16px]">
-        <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="mt-[2px] border-[#1d1d1f]" />
-          <label
-            className="cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline"
-            onClick={() => setPolicy(v => !v)}
-            dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
-          />
-        </div>
-
-        {(errorMessage || successMessage) && (
-          <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
-            <Text html={successMessage || errorMessage} />
-          </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>
-      </div>
-    </div>
-  )
-}

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

@@ -1,144 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Button, Checkbox, 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 { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
-import { emailValidate } from '../../../credits/context/utils'
-import { useMemberPopupContext } from '../../context/provider'
-import type { SubscribeModalCopy } from '../../type'
-import { ROUNDED_BRANDS } from '../../../../constants'
-
-type Props = {
-  isOpen: boolean
-  onClose: () => void
-  onSuccess?: () => void
-  copy: SubscribeModalCopy
-  email?: string
-}
-
-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 function EarnCreditsSubscribeModal({ isOpen, onClose, onSuccess, copy, email: initialEmail }: 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(() => {
-          setSuccessMessage('')
-          onClose()
-        }, 3000)
-      } else {
-        setErrorMessage(result.errors ?? 'Error occurred')
-      }
-    } catch {
-      setErrorMessage('Network error')
-    } finally {
-      setLoading(false)
-    }
-  }, [email, policy, locale, storeDomain, copy, onSuccess, onClose])
-
-  return (
-    <CreditsModalContainer
-      isOpen={isOpen}
-      onClose={onClose}
-      className="w-[540px] md:h-auto"
-      scrollClassName="mb-[40px] md:mb-[24px]"
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-    >
-      <div className="flex flex-col gap-[16px] text-center">
-        <Text className="text-[22px] font-bold" html={copy.title} />
-        {copy.desc && (
-          <Text className="text-left text-[16px] font-semibold text-[#1f2021]" html={copy.desc} />
-        )}
-        <div className={cn('flex h-[52px] w-full overflow-hidden md:flex-col md:h-auto md:gap-[16px]', rounded ? 'rounded-[2px]' : 'rounded-none')}>
-          <input
-            className={cn('h-full flex-1 border border-[#d8d8d8] px-[14px] text-[16px] outline-none placeholder:text-[#999] md:h-[52px]', rounded ? 'rounded-l-[2px] md:rounded-[2px]' : 'rounded-none')}
-            placeholder={copy.placeholder}
-            value={email}
-            onChange={e => { setErrorMessage(''); setEmail(e.target.value.trim()) }}
-          />
-          <Button
-            variant="primary"
-            loading={loading}
-            className={cn('!h-full !min-w-0 !px-[24px] md:!h-[46px]', rounded ? '!rounded-l-none !rounded-r-[2px] md:!rounded-[2px]' : '!rounded-none')}
-            onClick={handleSubmit}
-          >
-            {copy.buttonLabel ?? 'Subscribe'}
-          </Button>
-        </div>
-        <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>
-        <div className={cn('text-left text-[16px] font-semibold', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
-          <Text html={successMessage || errorMessage || ''} />
-        </div>
-      </div>
-    </CreditsModalContainer>
-  )
-}

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

@@ -1,147 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import { Checkbox, 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 = {
-  copy: SubscribeModalCopy
-  email?: string
-  onClose: () => void
-  onSuccess?: () => 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 SubscribePanel({ copy, email: initialEmail, onClose, onSuccess }: 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(() => {
-          setSuccessMessage('')
-          onClose()
-        }, 3000)
-      } else {
-        setErrorMessage(result.errors ?? 'Error occurred')
-      }
-    } catch {
-      setErrorMessage('Network error')
-    } finally {
-      setLoading(false)
-    }
-  }, [email, policy, locale, storeDomain, copy, onClose, onSuccess])
-
-  return (
-    <div className="flex 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.desc && (
-          <Text className="text-[16px] text-[#1e2024]" html={copy.desc} />
-        )}
-      </div>
-
-      <div className="flex flex-col gap-[16px]">
-        <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="mt-[2px] border-[#1d1d1f]" />
-          <label
-            className="cursor-pointer text-left text-[14px] text-[#1e2024] [&_a]:underline"
-            onClick={() => setPolicy(v => !v)}
-            dangerouslySetInnerHTML={{ __html: copy.policy ?? '' }}
-          />
-        </div>
-
-        {(errorMessage || successMessage) && (
-          <div className={cn('text-[14px] font-[700]', errorMessage && 'text-[#f84d4f]', successMessage && 'text-[#52c41a]')}>
-            <Text html={successMessage || errorMessage} />
-          </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>
-      </div>
-    </div>
-  )
-}

package/src/components/memberPopup/panels/EarnCredits/hooks/useActivities.ts

@@ -1,64 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-import useSWRMutation from 'swr/mutation'
-import { getAlpcPath } from '../../../../credits/context/utils'
-import type { CreditLogResponse } from '../../../../credits/context/response'
-
-type UseActivitiesConfig = {
-  userId: string | undefined
-  brand: string
-  apiBaseUrl?: string
-  locale?: string
-}
-
-type Params = {
-  page: number
-  pageSize: number
-}
-
-function useActivities(
-  { userId, brand, apiBaseUrl, locale = '' }: UseActivitiesConfig,
-  { page, pageSize }: Params
-) {
-  const [activities, setActivities] = useState<CreditLogResponse[]>([])
-  const [total, setTotal] = useState(0)
-  const [currentPage, setCurrentPage] = useState(0)
-
-  const { isMutating: isLoading, trigger } = useSWRMutation(
-    `/v1/credit/log`,
-    async (url: string, { arg }: { arg: Record<string, any> }) => {
-      const response = await fetch(getAlpcPath(locale, apiBaseUrl) + url, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json', 'current-language': locale },
-        body: JSON.stringify(arg),
-      })
-      return response.json()
-    }
-  )
-
-  const fetchActivities = useCallback(async () => {
-    await trigger(
-      { page, page_size: pageSize, user_id: userId, brand },
-      {
-        onSuccess(data) {
-          setCurrentPage(page)
-          setTotal(data?.data?.total ?? 0)
-          setActivities(prev => prev.concat(data?.data?.creditLogs ?? []))
-        },
-      }
-    )
-  }, [page, pageSize, userId, brand, trigger])
-
-  useEffect(() => {
-    if (!userId || !brand || isLoading || page === currentPage) return
-    fetchActivities()
-  }, [fetchActivities, userId, brand, page, currentPage, isLoading])
-
-  return {
-    activities,
-    isLoading,
-    total,
-    canNext: total > activities.length && !isLoading,
-  }
-}
-
-export default useActivities

package/src/components/memberPopup/panels/EarnCredits/hooks/useSubscribed.ts

@@ -1,32 +0,0 @@
-import { useMemo } from 'react'
-import { useSubscriptions } from '@anker-in/lib'
-import { TaskSubType } from '../../../../credits/context/const'
-import useActivities from './useActivities'
-
-type UseSubscribedConfig = {
-  userId: string | undefined
-  brand: string
-  email: string | undefined
-  locale?: string
-  apiBaseUrl?: string
-}
-
-export function useSubscribed({ userId, brand, email, locale = '', apiBaseUrl }: UseSubscribedConfig) {
-  const { activities } = useActivities(
-    { userId, brand, apiBaseUrl, locale },
-    { page: 1, pageSize: 50 }
-  )
-  const { data: subscription } = useSubscriptions({ email })
-  const subscriptionData = subscription?.data || subscription
-
-  return useMemo(() => {
-    if (!subscriptionData?.preference) {
-      return false
-    }
-    const subscribedByPreference = subscriptionData.preference.some(
-      (item: any) => item.brand === brand && item.subscribe
-    )
-    if (subscribedByPreference) return true
-    return activities?.some(item => item.task_sub_type === TaskSubType.Subscription)
-  }, [subscriptionData?.preference, activities, brand])
-}

package/src/components/memberPopup/panels/EarnCredits/hooks/useUpdateProfile.ts

@@ -1,50 +0,0 @@
-import { useCallback, useState } from 'react'
-
-type UseUpdateProfileConfig = {
-  locale?: string
-  appName?: string
-}
-
-type ProfileData = {
-  first_name?: string
-  last_name?: string
-  phone_number?: string
-  country?: string
-  dob?: string
-}
-
-export function useUpdateProfile({ locale = '', appName = '' }: UseUpdateProfileConfig = {}) {
-  const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-
-  const updateProfile = useCallback(
-    async (data: ProfileData): Promise<boolean> => {
-      setIsLoading(true)
-      setError(null)
-      try {
-        const response = await fetch('/api/multipass/account/users/update_profile', {
-          method: 'PUT',
-          headers: {
-            'Content-Type': 'application/json',
-            'current-language': locale,
-          },
-          body: JSON.stringify({ app: appName, ...data }),
-        })
-        const result = await response.json()
-        if (response.ok && !result.error) {
-          return true
-        }
-        setError(result?.error?.message || result?.error || 'Update failed')
-        return false
-      } catch (e: any) {
-        setError(e?.message ?? 'Unknown error')
-        return false
-      } finally {
-        setIsLoading(false)
-      }
-    },
-    [locale, appName]
-  )
-
-  return { updateProfile, isLoading, error }
-}