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

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

@@ -0,0 +1,130 @@
+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

@@ -0,0 +1,144 @@
+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

@@ -0,0 +1,147 @@
+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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,50 @@
+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 }
+}