@anker-in/campaign-ui 0.4.8 → 0.5.0-beta.10

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

@@ -0,0 +1,191 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Text } from '@anker-in/headless-ui'
+import { classNames as cn } from '@anker-in/lib'
+import { CreditsModalContainer } from '../../../credits/modal/ModalContainer'
+import type { CompleteProfileCopy } from '../../type'
+import { useUpdateProfile } from './hooks/useUpdateProfile'
+import useCountries from '../../../credits/context/hooks/useCountries'
+import { useMemberPopupContext } from '../../context/provider'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  onSuccess?: () => void
+  copy: CompleteProfileCopy
+  shopifyStoreDomain?: string
+}
+
+export function CompleteProfileModal({ isOpen, onClose, onSuccess, copy, shopifyStoreDomain = '' }: Props) {
+  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
+  const { locale } = alpcConfig
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [birthDay, setBirthDay] = useState('')
+  const [country, setCountry] = useState('')
+  const [firstNameError, setFirstNameError] = useState('')
+  const [lastNameError, setLastNameError] = useState('')
+
+  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
+  const { countries } = useCountries({ shopifyStoreDomain })
+
+  useEffect(() => {
+    if (profile) {
+      setFirstName(profile.first_name ?? '')
+      setLastName(profile.last_name ?? '')
+      setPhone(profile.phone_number ?? '')
+      setBirthDay(profile.dob ?? '')
+      setCountry(profile.country?.id ?? '')
+    }
+  }, [profile])
+
+  useEffect(() => {
+    if (countries.length > 0 && !country) {
+      setCountry(countries[0].id)
+    }
+  }, [countries])
+
+  const validate = useCallback(() => {
+    let hasError = false
+    if (!firstName.trim()) {
+      setFirstNameError(copy.required)
+      hasError = true
+    } else {
+      setFirstNameError('')
+    }
+    if (!lastName.trim()) {
+      setLastNameError(copy.required)
+      hasError = true
+    } else {
+      setLastNameError('')
+    }
+    return hasError
+  }, [firstName, lastName, copy.required])
+
+  const handleSubmit = useCallback(async () => {
+    if (validate()) return
+    const success = await updateProfile({
+      first_name: firstName.trim(),
+      last_name: lastName.trim(),
+      phone_number: phone,
+      country,
+      dob: birthDay,
+    })
+    if (success) {
+      fetchCreditInfo(profile?.user_id)
+      onSuccess?.()
+      onClose()
+    }
+  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
+
+  return (
+    <CreditsModalContainer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={copy.title}
+      titleClassName="!h-auto !border-b-0 !pb-0"
+      className="w-[540px] md:h-auto"
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+    >
+      <div className="flex flex-col gap-[20px]">
+        {copy.subtitle && (
+          <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
+        )}
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.email}</label>
+          <input
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]"
+            value={profile?.email ?? ''}
+            disabled
+          />
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
+            {copy.firstName} <span className="text-[#f84d4f]">*</span>
+          </label>
+          <input
+            className={cn(
+              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
+              firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
+            )}
+            value={firstName}
+            onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
+          />
+          {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">
+            {copy.lastName} <span className="text-[#f84d4f]">*</span>
+          </label>
+          <input
+            className={cn(
+              'mt-[8px] h-[46px] w-full rounded-[4px] border px-[12px] text-[14px] outline-none',
+              lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]'
+            )}
+            value={lastName}
+            onChange={e => { setLastName(e.target.value); setLastNameError('') }}
+          />
+          {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.birthday}</label>
+          <input
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
+            type="date"
+            value={birthDay}
+            onChange={e => setBirthDay(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.phone}</label>
+          <input
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
+            value={phone}
+            onChange={e => setPhone(e.target.value)}
+          />
+        </div>
+
+        <div>
+          <label className="block text-[14px] font-semibold text-[#1d1d1f]">{copy.country}</label>
+          <select
+            className="mt-[8px] h-[46px] w-full rounded-[4px] border border-[#d8d8d8] px-[12px] text-[14px] outline-none"
+            value={country}
+            onChange={e => setCountry(e.target.value)}
+          >
+            {countries.map((c: { id: string; name: string }) => (
+              <option key={c.id} value={c.id}>{c.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="flex gap-[12px]">
+          <Button
+            variant="secondary"
+            size="lg"
+            className="flex-1"
+            onClick={onClose}
+            disabled={isLoading}
+          >
+            {copy.cancel}
+          </Button>
+          <Button
+            variant="primary"
+            size="lg"
+            className="flex-1"
+            loading={isLoading}
+            onClick={handleSubmit}
+          >
+            {copy.save}
+          </Button>
+        </div>
+      </div>
+    </CreditsModalContainer>
+  )
+}

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

@@ -0,0 +1,184 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Button, Text } from '@anker-in/headless-ui'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import type { CompleteProfileCopy } from '../../type'
+import { useUpdateProfile } from './hooks/useUpdateProfile'
+import useCountries from '../../../credits/context/hooks/useCountries'
+import { useMemberPopupContext } from '../../context/provider'
+import { ROUNDED_BRANDS } from '../../../../constants'
+
+type Props = {
+  copy: CompleteProfileCopy
+  shopifyStoreDomain?: string
+  onClose: () => void
+  onSuccess?: () => void
+}
+
+export default function CompleteProfilePanel({ copy, shopifyStoreDomain = '', onClose, onSuccess }: Props) {
+  const { profile, fetchCreditInfo, alpcConfig } = useMemberPopupContext()
+  const { locale } = alpcConfig
+  const { brand } = useHeadlessContext()
+  const rounded = ROUNDED_BRANDS.includes(brand)
+
+  const [firstName, setFirstName] = useState('')
+  const [lastName, setLastName] = useState('')
+  const [phone, setPhone] = useState('')
+  const [birthDay, setBirthDay] = useState('')
+  const [country, setCountry] = useState('')
+  const [firstNameError, setFirstNameError] = useState('')
+  const [lastNameError, setLastNameError] = useState('')
+
+  const { updateProfile, isLoading } = useUpdateProfile({ locale, appName: alpcConfig.appName })
+  const { countries } = useCountries({ shopifyStoreDomain })
+
+  useEffect(() => {
+    if (profile) {
+      setFirstName(profile.first_name ?? '')
+      setLastName(profile.last_name ?? '')
+      setPhone(profile.phone_number ?? '')
+      setBirthDay(profile.dob ?? '')
+      setCountry(profile.country?.id ?? '')
+    }
+  }, [profile])
+
+  useEffect(() => {
+    if (countries.length > 0 && !country) {
+      setCountry(countries[0].id)
+    }
+  }, [countries])
+
+  const validate = useCallback(() => {
+    let hasError = false
+    if (!firstName.trim()) {
+      setFirstNameError(copy.required)
+      hasError = true
+    } else {
+      setFirstNameError('')
+    }
+    if (!lastName.trim()) {
+      setLastNameError(copy.required)
+      hasError = true
+    } else {
+      setLastNameError('')
+    }
+    return hasError
+  }, [firstName, lastName, copy.required])
+
+  const handleSubmit = useCallback(async () => {
+    if (validate()) return
+    const success = await updateProfile({
+      first_name: firstName.trim(),
+      last_name: lastName.trim(),
+      phone_number: phone,
+      country,
+      dob: birthDay,
+    })
+    if (success) {
+      fetchCreditInfo(profile?.user_id)
+      onSuccess?.()
+      onClose()
+    }
+  }, [validate, updateProfile, firstName, lastName, phone, country, birthDay, fetchCreditInfo, profile, onSuccess, onClose])
+
+  return (
+    <div className="flex flex-col gap-[20px]">
+      {copy.subtitle && (
+        <Text className="text-[14px] text-[#1d1d1f]" html={copy.subtitle} />
+      )}
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.email}</label>
+        <input
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] bg-[#f5f5f5] px-[12px] text-[14px] text-[#999]', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          value={profile?.email ?? ''}
+          disabled
+        />
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">
+          {copy.firstName} <span className="text-[#f84d4f]">*</span>
+        </label>
+        <input
+          className={cn(
+            'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',
+            firstNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
+            rounded ? 'rounded-[4px]' : 'rounded-none'
+          )}
+          value={firstName}
+          onChange={e => { setFirstName(e.target.value); setFirstNameError('') }}
+        />
+        {firstNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={firstNameError} />}
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">
+          {copy.lastName} <span className="text-[#f84d4f]">*</span>
+        </label>
+        <input
+          className={cn(
+            'mt-[8px] h-[46px] w-full border px-[12px] text-[14px] outline-none',
+            lastNameError ? 'border-[#f84d4f]' : 'border-[#d8d8d8]',
+            rounded ? 'rounded-[4px]' : 'rounded-none'
+          )}
+          value={lastName}
+          onChange={e => { setLastName(e.target.value); setLastNameError('') }}
+        />
+        {lastNameError && <Text className="mt-[4px] text-[12px] text-[#f84d4f]" html={lastNameError} />}
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.birthday}</label>
+        <input
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          type="date"
+          value={birthDay}
+          onChange={e => setBirthDay(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.phone}</label>
+        <input
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          value={phone}
+          onChange={e => setPhone(e.target.value)}
+        />
+      </div>
+
+      <div>
+        <label className="block text-[14px] font-[700] text-[#1d1d1f]">{copy.country}</label>
+        <select
+          className={cn('mt-[8px] h-[46px] w-full border border-[#d8d8d8] px-[12px] text-[14px] outline-none', rounded ? 'rounded-[4px]' : 'rounded-none')}
+          value={country}
+          onChange={e => setCountry(e.target.value)}
+        >
+          {countries.map((c: { id: string; name: string }) => (
+            <option key={c.id} value={c.id}>{c.name}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex gap-[12px]">
+        <Button
+          variant="secondary"
+          size="lg"
+          className="flex-1"
+          onClick={onClose}
+          disabled={isLoading}
+        >
+          {copy.cancel}
+        </Button>
+        <Button
+          variant="primary"
+          size="lg"
+          className="flex-1"
+          loading={isLoading}
+          onClick={handleSubmit}
+        >
+          {copy.save}
+        </Button>
+      </div>
+    </div>
+  )
+}

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/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 }
+}