@anker-in/campaign-ui 0.2.0 → 0.2.2

package/src/templates/credits.tsx

@@ -0,0 +1,134 @@
+import { classNames, HeadlessConfig, HeadlessProvider } from '@anker-in/lib'
+import { RegistrationProvider } from '../components/registration/context/provider'
+
+import { DTC_TASK_TYPE } from '../components/credits/context/const'
+import { CreditsProvider } from '../components/credits/context/provider'
+import { CreditsPageCommon } from '../components/credits/type'
+
+import { CreditsBanner, CreditsBannerCopy } from '../components/credits/creditsBanner'
+import { CreditsInfoCard, CreditsInfoCardCopy } from '../components/credits/creditsInfoCard'
+import { CreditsBenefits, CreditsBenefitsCopy } from '../components/credits/creditsBenefits'
+import { CreditsWaysToGetCredits, CreditsWaysToGetCreditsCopy } from '../components/credits/creditsWaysToGetCredits'
+import { CreditsRedeemList, CreditsRedeemListCopy } from '../components/credits/creditsRedeemList'
+import { CreditsCash, CreditsCashCopy } from '../components/credits/creditsCash'
+import { CreditsFaq, CreditsFaqCopy } from '../components/credits/creditsFaq'
+import { AuthCodeActivateCopy } from 'src/components/registration/authCodeActivate/type'
+
+export enum ComponentKey {
+  Banner = 'creditsBanner',
+  InfoCard = 'creditsInfoCard',
+  Benefits = 'creditsBenefits',
+  WaysToGetCredits = 'creditsWaysToGetCredits',
+  RedeemList = 'creditsRedeemList',
+  SpendCreditsLikeCash = 'creditsCash',
+  Faqs = 'creditsFaq',
+}
+export type CreditsTemplateProps = {
+  headlessConfig: HeadlessConfig
+  siteConfig: {
+    registrationsSettings: {
+      authCodeActivate: AuthCodeActivateCopy
+    }
+    taskIdToTypeMapping: Record<string, DTC_TASK_TYPE>
+  }
+  pageConfig: {
+    order: ComponentKey[]
+    common: CreditsPageCommon
+    components: {
+      [ComponentKey.Banner]?: CreditsBannerCopy
+      [ComponentKey.InfoCard]?: CreditsInfoCardCopy
+      [ComponentKey.Benefits]?: CreditsBenefitsCopy
+      [ComponentKey.WaysToGetCredits]?: CreditsWaysToGetCreditsCopy
+      [ComponentKey.RedeemList]?: CreditsRedeemListCopy
+      [ComponentKey.SpendCreditsLikeCash]?: CreditsCashCopy
+      [ComponentKey.Faqs]?: CreditsFaqCopy
+    }
+  }
+  userContext: {
+    profile: any
+    removeProfile: () => void
+    isLoadingProfile: boolean
+    creditInfo: any
+    customer: any
+    customerLoading: boolean
+    fetchCreditInfo: () => void
+  }
+  registrationContext: {
+    openSignUpPopup: () => void
+    openSignInPopup: () => void
+  }
+  gtm: {
+    pageGroup: string
+  }
+}
+
+export const CreditsTemplate = ({
+  headlessConfig,
+  siteConfig,
+  userContext,
+  pageConfig,
+  registrationContext,
+  gtm,
+}: CreditsTemplateProps) => {
+  return (
+    <HeadlessProvider headlessConfig={headlessConfig}>
+      <RegistrationProvider copy={siteConfig.registrationsSettings} email={userContext?.profile?.email}>
+        <CreditsProvider
+          profile={userContext?.profile}
+          removeProfile={userContext?.removeProfile}
+          isLoadingProfile={userContext?.isLoadingProfile}
+          openSignInPopup={registrationContext.openSignInPopup}
+          openSignUpPopup={registrationContext.openSignUpPopup}
+          creditInfo={userContext?.creditInfo}
+          taskIdToTypeMapping={siteConfig.taskIdToTypeMapping}
+          customer={userContext?.customer}
+          fetchCreditInfo={userContext?.fetchCreditInfo}
+          customerLoading={userContext?.customerLoading}
+          gtm={gtm}
+          pageCommon={pageConfig.common}
+        >
+          <div className={classNames('bg-[#f5f5f7] leading-[1.2]')}>
+            {pageConfig.order.map(key => {
+              const componentCopy = pageConfig.components?.[key]
+              if (!componentCopy) return null
+              return (
+                <>
+                  {key === ComponentKey.Banner && <CreditsBanner copy={componentCopy as CreditsBannerCopy} />}
+                  {key === ComponentKey.InfoCard && userContext?.profile && (
+                    <CreditsInfoCard copy={componentCopy as CreditsInfoCardCopy} />
+                  )}
+                  {key === ComponentKey.Benefits && <CreditsBenefits copy={componentCopy as CreditsBenefitsCopy} />}
+                  {key === ComponentKey.WaysToGetCredits && (
+                    <CreditsWaysToGetCredits
+                      copy={componentCopy as CreditsWaysToGetCreditsCopy}
+                      classNames={
+                        headlessConfig.brand === 'anker'
+                          ? {
+                              subtitle: 'text-white',
+                              equalCreditsText:
+                                'bg-gradient-to-r from-[#3AD1FF] to-[#008CD6] bg-clip-text text-transparent',
+                            }
+                          : {
+                              subtitle: 'text-[#D1D1D1]',
+                              equalCreditsText: 'text-[#F6EAD0]',
+                            }
+                      }
+                    />
+                  )}
+                  {key === ComponentKey.RedeemList && (
+                    <CreditsRedeemList copy={componentCopy as CreditsRedeemListCopy} />
+                  )}
+                  {key === ComponentKey.SpendCreditsLikeCash && <CreditsCash copy={componentCopy as CreditsCashCopy} />}
+                  {key === ComponentKey.Faqs && <CreditsFaq copy={componentCopy as CreditsFaqCopy} />}
+                  {key !== ComponentKey.Banner && (
+                    <div className="laptop:h-16 desktop:h-[96px] lg-desktop:h-[128px] tablet:h-16 h-16" />
+                  )}
+                </>
+              )
+            })}
+          </div>
+        </CreditsProvider>
+      </RegistrationProvider>
+    </HeadlessProvider>
+  )
+}

package/src/templates/index.ts

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

package/src/components/credits/context/hooks/useSendEmailValidation.ts

@@ -1,20 +0,0 @@
-import fetcher from '../../../../helpers/fetcher'
-import useSWRMutation from 'swr/mutation'
-import { useCreditsContext } from '../provider'
-import { useHeadlessContext } from '@anker-in/lib'
-
-export function useSendEmailValidation() {
-  const { profile } = useCreditsContext()
-  const { appName, locale } = useHeadlessContext()
-
-  return useSWRMutation('send-email-validation', () =>
-    fetcher({
-      locale,
-      url: '/api/multipass/account/users/send_validation_email',
-      method: 'POST',
-      body: { email: profile?.email, app: appName },
-      needRecaptcha: true,
-      action: 'verifyAccount',
-    })
-  )
-}

package/src/components/credits/context/hooks/useSubscriptions.ts

@@ -1,29 +0,0 @@
-import useSWR, { SWRResponse } from 'swr'
-import type { Subscription } from '../../type'
-import fetcher from '../../../../helpers/fetcher'
-import { useHeadlessContext } from '@anker-in/lib'
-
-export type SubscriptionApiResponse = { data: Subscription }
-export type FetchSubscriptionResponse = SWRResponse<Subscription>
-
-export function useSubscriptions({ email }: { email?: string }): FetchSubscriptionResponse {
-  const { locale } = useHeadlessContext()
-
-  const { data, ...rest } = useSWR<SubscriptionApiResponse>(
-    email ? ['/api/multipass/account/subscriptions', email] : null,
-    async ([url, email]) =>
-      fetcher({
-        method: 'GET',
-        url,
-        body: {
-          email,
-        },
-        action: 'login',
-        locale,
-        headers: {},
-        type: '',
-      })
-  )
-
-  return { data: data?.data, ...rest } as unknown as FetchSubscriptionResponse
-}

package/src/helpers/fetchResponse.ts

@@ -1,35 +0,0 @@
-export async function getAsyncError(res: { json: () => any; status: any; statusText: any }) {
-  try {
-    const result = await res.json()
-    return {
-      status: res.status,
-      statusText: res.statusText,
-      errors: result?.data?.error || result?.data?.code || res.statusText || res.status,
-      type: result?.data?.type,
-      data: result?.data,
-      message: result?.data?.message,
-    }
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-const handleFetchResponse = async (res: Response) => {
-  if (res.ok) {
-    try {
-      const result = await res.json()
-      const { errors } = result
-      if (errors && errors.length) {
-        return { errors, status: res.status }
-      }
-
-      return result
-    } catch (error) {
-      console.log(error)
-    }
-  }
-
-  return await getAsyncError(res)
-}
-
-export default handleFetchResponse

package/src/helpers/fetcher.ts

@@ -1,44 +0,0 @@
-import handleFetchResponse from './fetchResponse'
-
-const isObject = (value: null) => {
-  return value !== null && typeof value === 'object' && !Array.isArray(value)
-}
-
-const fetcher = async ({
-  locale = 'en',
-  url,
-  method = 'POST',
-  headers = {},
-  repeatKey,
-  body,
-  type,
-  timeout = 90000,
-}: any) => {
-  // 添加谷歌验证
-  let bodyData = ''
-  if (type === 'uploadFile') {
-    bodyData = body
-  } else {
-    bodyData = body ? JSON.stringify(body) : ''
-  }
-
-  const controller = new AbortController()
-  if (timeout) {
-    // 超时报错
-    setTimeout(() => controller.abort(), timeout)
-  }
-
-  const data = await fetch(url, {
-    method,
-    mode: 'cors',
-    headers: {
-      'current-language': locale,
-      ...headers,
-    },
-    ...(timeout && { signal: controller.signal }),
-    ...(method !== 'GET' && { body: bodyData }),
-  })
-  return handleFetchResponse(data)
-}
-
-export default fetcher

package/src/helpers/index.ts

@@ -1,2 +0,0 @@
-export { cn } from './utils'
-export { noop } from './utils'

package/src/helpers/track.ts

@@ -1,73 +0,0 @@
-declare global {
-  interface Window {
-    dataLayer?: Array<any>
-    fbq?: (...args: any[]) => void
-    klaviyo?: any
-    gtag?: any
-  }
-}
-
-// GA 埋点
-export const gaTrack = (data: any) => {
-  if (typeof window === 'undefined') {
-    return ''
-  }
-  window.dataLayer = window?.dataLayer || []
-  if (!Array.isArray(window.dataLayer)) {
-    return ''
-  }
-
-  try {
-    window?.dataLayer?.push({ event_parameters: null })
-    window?.dataLayer?.push(data || {})
-  } catch (error) {
-    console.log('pageGTMEvent error', error)
-  }
-}
-
-export function gaNormalClick({ position, label }: { position: string; label: string }) {
-  gaTrack({
-    event: 'ga4Event',
-    event_name: 'lp_button',
-    event_parameters: {
-      page_group: 'soundcoreCredits Rewards Program',
-      position: position,
-      button_name: label,
-    },
-  })
-}
-
-// facebook 埋点
-export const fbq = (...args: any[]) => {
-  if (typeof window === 'undefined') {
-    return ''
-  }
-  if (window.fbq) {
-    window.fbq(...args)
-  }
-}
-
-export const gtag = (...args: any[]) => {
-  if (typeof window === 'undefined') {
-    return ''
-  }
-  if (window.gtag) {
-    window.gtag(...args)
-  }
-}
-
-export const getGtmGroup = ({ query, asPath }: { query: any; asPath: string }) => {
-  if (asPath.includes('collections')) {
-    return `Product List Page_${query?.handle}`
-  }
-
-  if (asPath.includes('products')) {
-    return 'Product Detail Page_' + query?.handle
-  }
-
-  if (asPath === '/' || asPath === '/app-home') {
-    return 'Home Page'
-  }
-
-  return 'Activity Page_' + query?.handle || query?.paths?.[0]?.replace('storefront-', '')
-}

package/src/helpers/utils.ts

@@ -1,8 +0,0 @@
-import { clsx, type ClassValue } from 'clsx'
-import { twMerge } from 'tailwind-merge'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
-
-export function noop(): any {}