@anker-in/campaign-ui 0.2.10-beta.9 → 0.2.11-beta.3

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 { useShopifyContext } from '@anker-in/shopify'
-
-export function useSendEmailValidation() {
-  const { profile } = useCreditsContext()
-  const { appName, locale } = useShopifyContext()
-
-  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,54 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-import type { Subscription } from '../../type'
-import fetcher from '../../../../helpers/fetcher'
-import { useShopifyContext } from '@anker-in/shopify'
-
-function useSubscriptions(email?: string) {
-  const loading = useRef(false)
-  const [subscriptionData, setSubscriptionData] = useState<Subscription>()
-  const { locale } = useShopifyContext()
-
-  const fetchSubscription = useCallback(async () => {
-    if (!email) {
-      return
-    }
-
-    if (loading.current) {
-      return
-    }
-
-    loading.current = true
-
-    try {
-      const response = await fetcher({
-        method: 'GET',
-        url: '/api/multipass/account/subscriptions',
-        body: {
-          email,
-        },
-        action: 'login',
-        locale,
-        headers: {},
-        type: '',
-      })
-
-      if (response) {
-        setSubscriptionData(response)
-      }
-    } catch (error) {
-      console.error(error)
-    } finally {
-      loading.current = false
-    }
-  }, [email, locale, loading])
-
-  useEffect(() => {
-    fetchSubscription()
-  }, [fetchSubscription])
-
-  return {
-    subscriptionData,
-  }
-}
-
-export default useSubscriptions

package/src/components/credits/creditsBenefits/benefitItem.tsx

@@ -1,73 +0,0 @@
-import { Heading, Picture, Text } from '@anker-in/headless-ui'
-import { cn } from '../../../helpers/utils'
-import IconInfo from './iconInfo'
-
-export interface BenefitItemCopy {
-  icon: {
-    alt: string
-    url: string
-  }
-  text: string
-  note?: string
-  tag?: string
-}
-const BenefitItem = ({
-  item,
-  handleClick,
-  isNoteActive,
-  index,
-}: {
-  item: BenefitItemCopy
-  handleClick: ({ item, index }: { item: BenefitItemCopy; index: number }) => void
-  isNoteActive: boolean
-  index: number
-}) => {
-  return (
-    <div
-      className="relative h-full rounded-[16px] border border-white px-[24px] pb-[26px] pt-[24px] md:min-h-[180px] md:p-[16px]"
-      style={{
-        background: 'linear-gradient(119.61deg, #FAFAFA 38.58%, #FFFFFF 63.73%, #F9FCFF 89.37%)',
-      }}
-    >
-      <div className="flex flex-col">
-        <Picture
-          className="mb-[16px] size-[31px] md:absolute md:bottom-[16px] md:right-[16px] md:mb-0"
-          alt={item.icon?.alt}
-          source={item.icon?.url}
-        />
-        <div className="flex items-center">
-          <Heading html={item.text} size="2" className="break-all" />
-          {item.note && (
-            <div
-              role="button"
-              tabIndex={0}
-              onKeyDown={e => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                }
-              }}
-              className="relative mb-1 ml-[4px]"
-              onClick={() => handleClick({ item, index })}
-            >
-              <IconInfo />
-              <div
-                className={cn(
-                  'absolute -bottom-[12px] left-[32px] z-10 w-[356px] -translate-x-full translate-y-full md:w-[276px]',
-                  isNoteActive ? 'block' : 'hidden'
-                )}
-              >
-                <div className="relative rounded-[10px] bg-[#6D6D6F] p-[16px] text-[14px] font-medium text-white shadow">
-                  <Text as="p" size="2" html={item.note} className="desktop:text-[18px]" />
-                  <div className="absolute -top-[10px] right-[9px] mb-2 size-[16px] origin-top-left rotate-45 transform rounded-[2px] bg-[#6D6D6F]" />
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-        {item.tag && <Text as="div" html={item.tag} className="mt-[2px] text-[16px] font-bold text-[#6D6D6F]" />}
-      </div>
-    </div>
-  )
-}
-
-export default BenefitItem

package/src/components/credits/creditsCash/index.tsx

@@ -1,102 +0,0 @@
-import { Container, Heading } from '@anker-in/headless-ui'
-import { useMemo, useState } from 'react'
-
-import RedeemableItem from './RedeemableItem'
-import useRedeemableList from '../context/hooks/useRedeemableList'
-import { cn } from '../../../helpers'
-import RulesModal from '../modal/rulesModal'
-import { useProductsByHandles } from '@anker-in/shopify'
-import { CreditsCashCopy, RedeemItem } from './type'
-import { Product } from '@anker-in/shopify'
-
-export const CreditsCash = ({
-  copy,
-  className = '',
-  hideTitle = false,
-  cardClassName,
-  authCodeActivate,
-}: {
-  copy: CreditsCashCopy
-  className?: string
-  hideTitle?: boolean
-  cardClassName?: string
-  authCodeActivate: {
-    openAuthCodePopup: Function
-    isSuccess: boolean
-    setOnSuccess: (arg: Function) => void
-    isSendingActivateEmail: boolean
-  }
-}) => {
-  const [rules, setRules] = useState<string | string[]>()
-  const { redeemableList } = useRedeemableList()
-
-  // Temporary variables until proper configuration
-  const locale = 'us'
-  const variantMetafieldIdentifiers: any[] = []
-
-  const { data: productByHandles } = useProductsByHandles({
-    locale,
-    handles: copy?.list?.map(item => item.products?.[0]?.handle) || [],
-    metafieldIdentifiers: {
-      variant: variantMetafieldIdentifiers,
-    },
-  })
-
-  const list = useMemo(() => {
-    return productByHandles?.map((product: Product) => {
-      const config = copy.list.find(item => item.products?.[0]?.handle === product.handle)
-      const alpcData = redeemableList.find(item => item.id?.toString() === config?.redeemId?.toString())
-
-      return {
-        product,
-        productVariant:
-          product.variants?.find((variant: any) => variant.sku === config?.products?.[0]?.sku) || product.variants?.[0],
-        alpcData: {
-          id: alpcData?.id,
-          consumeCredits: alpcData?.consume_credits,
-          remainingInventory: alpcData?.remaining_inventory,
-          isLimited: alpcData?.is_limited,
-          consumeType: alpcData?.consume_type,
-          title: alpcData?.name,
-          desc: alpcData?.note,
-        },
-        config,
-      }
-    }) as unknown as RedeemItem[]
-  }, [productByHandles, copy.list, redeemableList])
-
-  console.log('list', list)
-
-  return (
-    <Container className={cn('bg-[#F5F5F5]', className)}>
-      {!hideTitle && <Heading as="h2" size="4" html={copy.title} />}
-      <div className="relative mt-[24px] grid grid-cols-4 gap-[16px] md:grid-cols-2 md-xl:grid-cols-3">
-        {list?.map((item, index: number) => (
-          <RedeemableItem
-            key={index}
-            copy={copy}
-            itemData={item}
-            setRules={setRules}
-            className={cardClassName}
-            currencyCode={productByHandles?.[0]?.price.currencyCode || 'USD'}
-            authCodeActivate={authCodeActivate}
-          />
-        ))}
-      </div>
-
-      {rules && (
-        <RulesModal
-          overlayClassName="md:px-[16px] md:items-center"
-          className="md:h-fit md:rounded-b-[16px]"
-          isOpen={rules.length > 0}
-          onClose={() => setRules([])}
-          titleClassName="border-b-transparent h-[56px]"
-          rules={rules}
-          scrollClassName="md:mt-[8px] md:mb-[24px] md:pt-0"
-          title={copy?.ruleLabel}
-          ruleClassName="text-[#1d1d1f] font-bold"
-        />
-      )}
-    </Container>
-  )
-}

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,55 +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)
-  }
-}
-
-// facebook 埋点
-export const fbq = (...args: any[]) => {
-  if (window.fbq) {
-    window.fbq(...args)
-  }
-}
-
-export const gtag = (...args: any[]) => {
-  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 {}