@anker-in/campaign-ui 0.1.10 → 0.2.10-beta.2

package/src/components/credits/modal/loadingDots.tsx

@@ -0,0 +1,17 @@
+import { cn } from '../../../helpers/utils'
+
+interface LoadingProps {
+  className?: string
+}
+
+function LoadingDots({ className }: LoadingProps) {
+  return (
+    <span className={cn(className)}>
+      <span className="dot" key={`dot_1`} />
+      <span className="dot" key={`dot_2`} />
+      <span className="dot" key={`dot_3`} />
+    </span>
+  )
+}
+
+export default LoadingDots

package/src/components/credits/modal/modalContainer.tsx

@@ -0,0 +1,112 @@
+import { cn } from '../../../helpers/utils'
+import { useEffect, useState, type UIEvent } from 'react'
+import ReactModal from 'react-modal'
+
+export type ModalContainerProps = {
+  overlayClassName?: string
+  className?: string
+  scrollClassName?: string
+  title?: string
+  titleClassName?: string
+  useAnimation?: boolean // 使用动画展示
+  animationClassName?: string // 动画展示控制的classname
+  isOpen: boolean
+  children?: any
+  onClose: () => void
+  onScrollEnd?: (event: UIEvent<HTMLDivElement>) => void
+}
+
+export const CreditsModalContainer = ({
+  isOpen,
+  title,
+  className = '',
+  overlayClassName = '',
+  scrollClassName = '',
+  onClose,
+  onScrollEnd,
+  children,
+  useAnimation,
+  animationClassName,
+  titleClassName = '',
+  ...props
+}: ModalContainerProps): React.ReactElement => {
+  const [animationShow, setAnimationShow] = useState(false)
+
+  useEffect(() => {
+    if (!useAnimation) {
+      return
+    }
+    requestAnimationFrame(() => {
+      setAnimationShow(isOpen ?? false)
+    })
+  }, [isOpen, useAnimation])
+
+  return (
+    <ReactModal
+      isOpen={isOpen ?? false}
+      overlayClassName={cn(
+        'fixed inset-0 z-[999] flex items-center justify-center bg-black/70 leading-[1.2] md:items-end',
+        overlayClassName
+      )}
+      className={cn(
+        'min-md:max-h-[calc(100vh-96px)] relative flex min-h-[200px] flex-col overflow-hidden rounded-[16px] bg-white outline-none transition-all duration-300 md:h-[88.27vh] md:w-full md:rounded-b-none',
+        animationShow ? '' : animationClassName,
+        className
+      )}
+      onRequestClose={onClose}
+      {...props}
+    >
+      <div
+        className={cn(
+          'flex w-full shrink-0 items-center justify-between',
+          title ? 'min-l:px-[32px] h-[70px] border-b border-[#e2e2e2] px-[24px]' : 'h-[48px] px-[16px]',
+          titleClassName
+        )}
+      >
+        <div className="text-[18px] font-bold">{title}</div>
+        <div
+          className="size-[22px] cursor-pointer"
+          onClick={onClose}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault()
+              onClose?.()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M16.8525 5.31015C16.4558 4.91337 15.8125 4.91338 15.4157 5.31015L11.1268 9.5991L6.83815 5.31049C6.44138 4.91372 5.79808 4.91372 5.40131 5.31049C5.00454 5.70726 5.00455 6.35055 5.40131 6.74732L9.68993 11.0359L5.40105 15.3248C5.00428 15.7216 5.00428 16.3649 5.40105 16.7616C5.79782 17.1584 6.44111 17.1584 6.83788 16.7616L11.1268 12.4728L15.416 16.762C15.8128 17.1588 16.456 17.1588 16.8528 16.762C17.2496 16.3652 17.2496 15.7219 16.8528 15.3252L12.5636 11.0359L16.8525 6.74698C17.2493 6.35021 17.2493 5.70692 16.8525 5.31015ZM16.921 6.02856C16.921 6.22992 16.8441 6.43127 16.6905 6.5849L14.465 8.8104L12.2395 11.0359L12.2395 11.0359L16.6905 6.58493C16.8441 6.43129 16.921 6.22993 16.921 6.02856ZM5.34966 6.19087C5.37992 6.3354 5.45115 6.47307 5.56336 6.58528L10.014 11.0359L10.014 11.0359L5.56336 6.58524C5.45116 6.47304 5.37992 6.33539 5.34966 6.19087ZM5.35087 16.2121C5.38193 16.3541 5.45267 16.4891 5.56309 16.5996C5.87037 16.9068 6.36856 16.9068 6.67583 16.5996L11.1268 12.1486L15.578 16.5999C15.8853 16.9072 16.3835 16.9072 16.6908 16.5999C16.8498 16.4409 16.9265 16.2307 16.9209 16.0223C16.9265 16.2307 16.8498 16.4409 16.6908 16.5999C16.3835 16.9072 15.8853 16.9072 15.578 16.5999L11.1268 12.1487L6.67583 16.5996C6.36856 16.9069 5.87037 16.9069 5.56309 16.5996C5.45267 16.4892 5.38192 16.3541 5.35087 16.2121Z"
+              fill="#333333"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        className={cn(
+          'my-[32px] flex-1 overflow-auto overscroll-contain px-[24px] md:mb-[48px]',
+          !title && 'mt-0',
+          'min-l:px-[32px]',
+          scrollClassName
+        )}
+        onScroll={event => {
+          const targetElement = event.target as HTMLDivElement
+
+          if (targetElement.scrollHeight <= targetElement.clientHeight) {
+            return
+          }
+
+          if (targetElement.scrollTop + targetElement.clientHeight >= targetElement.scrollHeight - 50) {
+            onScrollEnd && onScrollEnd(event)
+          }
+        }}
+      >
+        {children}
+      </div>
+    </ReactModal>
+  )
+}

package/src/components/credits/modal/rulesModal.tsx

@@ -0,0 +1,44 @@
+import { Text } from '@anker-in/headless-ui'
+import { useMemo } from 'react'
+
+import { CreditsModalContainer, type ModalContainerProps } from './modalContainer'
+import { cn } from '../../../helpers/utils'
+
+function RulesModal({
+  rules,
+  className,
+  ruleClassName,
+  ...props
+}: {
+  rules: string | string[]
+  ruleClassName?: string
+  className?: string
+} & ModalContainerProps) {
+  const rulesComponent = useMemo(() => {
+    if (typeof rules === 'string') {
+      return <Text className={cn('text-[16px] font-semibold', ruleClassName)} html={rules}></Text>
+    } else {
+      return (
+        <ul className="ml-4 text-[16px]">
+          {rules?.map((rule, index) => (
+            <li key={index} className={cn('mb-[10px] list-disc')}>
+              <Text
+                as="div"
+                className={cn('text-[16px] font-semibold leading-[1.4] text-[#777777]', ruleClassName)}
+                html={rule}
+              ></Text>
+            </li>
+          ))}
+        </ul>
+      )
+    }
+  }, [ruleClassName, rules])
+
+  return (
+    <CreditsModalContainer className={cn('max-h-[90vh] w-[640px]', className)} {...props}>
+      {rulesComponent}
+    </CreditsModalContainer>
+  )
+}
+
+export default RulesModal

package/src/components/credits/modal/tip.tsx

@@ -0,0 +1,92 @@
+import classNames from 'classnames'
+import { useState } from 'react'
+
+function Tip({ info, index }: { info: string; index: number }) {
+  const [show, setShow] = useState(false)
+
+  return (
+    <div
+      className="relative ml-[6px] cursor-pointer"
+      onClick={() => {
+        setShow(!show)
+      }}
+      role="button"
+      tabIndex={0}
+      onKeyDown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+        }
+      }}
+      onMouseOver={() => {
+        setShow(true)
+      }}
+      onFocus={() => {
+        setShow(true)
+      }}
+      onMouseLeave={() => {
+        setShow(false)
+      }}
+      onBlur={() => {
+        setShow(false)
+      }}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M9 18C13.9706 18 18 13.9706 18 9C18 4.02944 13.9706 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18ZM9.765 10.7118H8.316C8.316 9.71658 8.95624 9.11788 9.5487 8.56386C10.0589 8.08679 10.5336 7.64285 10.5336 7.0074C10.5336 6.2766 9.9918 5.9112 9.1854 5.9112C8.3916 5.9112 7.7994 6.327 7.5474 7.0704L6.3 6.3648C6.7788 5.13 7.938 4.5 9.2232 4.5C10.6218 4.5 11.9826 5.3316 11.9826 6.9192C11.9826 7.95842 11.3297 8.58584 10.7324 9.15979C10.2289 9.64359 9.765 10.0894 9.765 10.7118ZM9.9918 12.69C9.9918 13.2066 9.5634 13.635 9.0468 13.635C8.5176 13.635 8.1018 13.2066 8.1018 12.69C8.1018 12.1608 8.5176 11.745 9.0468 11.745C9.5634 11.745 9.9918 12.1608 9.9918 12.69Z"
+          fill="#999999"
+        />
+      </svg>
+      <div
+        className={classNames(
+          'absolute -right-[14px] hidden min-w-[300px] shadow-[0px_1px_12px_0px_rgba(0,0,0,0.12)]',
+          index === 0 ? 'top-[33px]' : 'bottom-[33px]',
+          show && '!block'
+        )}
+      >
+        <i
+          className="absolute right-[8px] blur-[12px]"
+          style={
+            index === 0
+              ? {
+                  top: '-9px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderBottom: '8px solid rgba(0,0,0,0.12)',
+                }
+              : {
+                  bottom: '-9px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderTop: '8px solid rgba(0,0,0,0.12)',
+                }
+          }
+        ></i>
+        <i
+          className="absolute right-[8px]"
+          style={
+            index === 0
+              ? {
+                  top: '-7px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderBottom: '8px solid #fff ',
+                }
+              : {
+                  bottom: '-7px',
+                  borderRight: '16px solid transparent ',
+                  borderLeft: '16px solid transparent ',
+                  borderTop: '8px solid #fff ',
+                }
+          }
+        ></i>
+        <p className="relative block rounded-[4px] bg-white px-[14px] py-[12px]">
+          <span className="block text-left text-[14px] font-semibold leading-[1.4] text-[#333]">{info}</span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default Tip

package/src/components/credits/type.ts

@@ -0,0 +1,60 @@
+import type { Product, ProductVariant } from '@shopify/types/product'
+import type { AlpcConsumeType, ConsumeType } from './context/const'
+
+export interface Subscription {
+  preference: {
+    subscribe: boolean
+    brand: string
+  }[]
+}
+
+export type RedeemableItem = {
+  config: {
+    title: string
+    desc: string
+    rules: string[]
+    image: {
+      url: string
+    }
+    type: ConsumeType
+    value: string
+  }
+  alpc: {
+    id: string
+    consumeCredits: number
+    remainingInventory: number
+    isLimited: boolean
+    consumeType: AlpcConsumeType
+    showCredit: boolean
+    title: string
+  }
+  product: Product
+  variant: ProductVariant
+}
+
+export interface ShippingCountry {
+  id: string
+  name: string
+  code: string
+  provinces: {
+    id: string
+    name: string
+    code: string
+  }[]
+}
+
+export interface ShippingZone {
+  name: string
+  countries: ShippingCountry[]
+}
+
+export type CreditsPageCommon = {
+  pointUnit: string
+  ruleLabel: string
+  soldOut: string
+  imageMapping: {
+    [key in ConsumeType]: {
+      url: string
+    }
+  }
+}

package/src/components/index.ts

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/extensions
 
-export { default as Chat } from './chat/index.js'
+export { default as Chat } from './chat/index'
 
 export {
   Role,
@@ -9,4 +9,6 @@ export {
   useCopilotChat,
   useCopilotAction,
   useCopilotReadable,
-} from './chat/utils.js'
+} from './chat/utils'
+
+export * from './credits/index'

package/src/debug-env.ts

@@ -0,0 +1,18 @@
+// 调试环境变量工具
+export const debugEnv = () => {
+  console.log('=== Campaign UI Environment Variables Debug ===')
+  console.log('NEXT_PUBLIC_BRAND:', process.env.NEXT_PUBLIC_BRAND)
+  console.log('NEXT_PUBLIC_ENV:', process.env.NEXT_PUBLIC_ENV)
+  console.log('NEXT_PUBLIC_I18N_SHOPIFY_STOREFRONT_TOKEN:', process.env.NEXT_PUBLIC_I18N_SHOPIFY_STOREFRONT_TOKEN)
+  console.log('NEXT_PUBLIC_I18N_SHOPIFY_STORE_DOMAIN:', process.env.NEXT_PUBLIC_I18N_SHOPIFY_STORE_DOMAIN)
+  console.log('NEXT_PUBLIC_METAFIELD_NAMESPACE_PREFIX:', process.env.NEXT_PUBLIC_METAFIELD_NAMESPACE_PREFIX)
+  console.log('===============================================')
+  
+  return {
+    BRAND: process.env.NEXT_PUBLIC_BRAND || 'soundcore',
+    ENV: process.env.NEXT_PUBLIC_ENV,
+    STOREFRONT_TOKEN: process.env.NEXT_PUBLIC_I18N_SHOPIFY_STOREFRONT_TOKEN,
+    STORE_DOMAIN: process.env.NEXT_PUBLIC_I18N_SHOPIFY_STORE_DOMAIN,
+    METAFIELD_PREFIX: process.env.NEXT_PUBLIC_METAFIELD_NAMESPACE_PREFIX || ''
+  }
+}

package/src/helpers/fetcher.ts

@@ -1,4 +1,4 @@
-import handleFetchResponse from './fetchResponse.js'
+import handleFetchResponse from './fetchResponse'
 
 const isObject = (value: null) => {
   return value !== null && typeof value === 'object' && !Array.isArray(value)

package/src/helpers/index.ts

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

package/src/helpers/track.ts

@@ -0,0 +1,55 @@
+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/index.ts

@@ -1 +1,23 @@
-export * from './components/index.js'
+export * from './components/index'
+
+// 导出 Shopify Context 相关模块
+export { ShopifyProvider, useShopifyContext } from '@shopify/context/ShopifyProvider'
+
+// 导出 Shopify 核心模块
+export * from '@shopify/fetchers'
+export * from '@shopify/hooks'
+export * from '@shopify/queries'
+export * from '@shopify/fragments'
+
+// 导出 Shopify 核心类型（排除有冲突的 Brand 类型）
+export type {
+  Cart,
+  LineItem,
+  Product,
+  ProductVariant,
+  ProductImage,
+  ProductMedia,
+  ProductPrice,
+  VariantCoupon,
+  Discount,
+} from '@shopify/types'

package/src/shopify/MIGRATION_GUIDE.md

@@ -0,0 +1,156 @@
+# Shopify Context 迁移指南
+
+## 概述
+
+本指南帮助你将现有的环境变量依赖迁移到新的 `ShopifyContext` 系统。
+
+## 迁移步骤
+
+### 1. 设置 Provider
+
+在主应用的根组件中设置 `ShopifyProvider`：
+
+```tsx
+import { ShopifyProvider, createShopifyConfig } from '@anker-in/campaign-ui/shopify/context'
+
+// 方式 1: 手动配置
+const shopifyConfig = createShopifyConfig({
+  brand: 'soundcore',
+  env: 'production',
+  metafieldNamespacePrefix: 'custom',
+  stores: [
+    {
+      locale: 'us',
+      domain: 'store-us.myshopify.com',
+      token: 'your-us-token',
+      themeDomain: 'us.soundcore.com'
+    },
+    {
+      locale: 'eu', 
+      domain: 'store-eu.myshopify.com',
+      token: 'your-eu-token',
+      themeDomain: 'eu.soundcore.com'
+    }
+  ]
+})
+
+function App({ locale }: { locale: string }) {
+  return (
+    <ShopifyProvider config={shopifyConfig} locale={locale}>
+      <YourAppContent />
+    </ShopifyProvider>
+  )
+}
+```
+
+### 2. 替换环境变量使用
+
+#### 旧方式 (环境变量):
+```tsx
+import { I18N_STOREFRONT_TOKEN, I18N_STORE_DOMAIN, BRAND } from './utils/store'
+
+const token = I18N_STOREFRONT_TOKEN[locale]
+const domain = I18N_STORE_DOMAIN[locale]
+const brand = BRAND
+```
+
+#### 新方式 (Context):
+```tsx
+import { useShopifyContext, useStoreTokens, useStoreDomains, useStoreConfig } from './context'
+
+const { currentStore, brand } = useShopifyContext()
+const { currentToken } = useStoreTokens()
+const { currentDomain } = useStoreDomains()
+const { brand: configBrand } = useStoreConfig()
+```
+
+### 3. 常用迁移模式
+
+#### 获取当前店铺信息
+```tsx
+// 旧方式
+const currentStore = I18N_STORE_DOMAIN[locale]
+const currentToken = I18N_STOREFRONT_TOKEN[locale]
+
+// 新方式
+const { currentStore } = useShopifyContext()
+const { currentToken } = useStoreTokens()
+```
+
+#### 获取 API URL
+```tsx
+// 旧方式
+const apiUrl = `https://${I18N_STORE_DOMAIN[locale]}/api/2025-07/graphql.json`
+
+// 新方式
+const { getApiUrlByLocale } = useShopifyContext()
+const apiUrl = getApiUrlByLocale(locale)
+```
+
+#### 获取主题域名
+```tsx
+// 旧方式
+const themeDomain = I18N_THEME_DOMAIN[locale]
+
+// 新方式
+const { getThemeDomainByLocale } = useShopifyContext()
+const themeDomain = getThemeDomainByLocale(locale)
+```
+
+### 4. 多国家页面构建
+
+对于不同国家的页面，你可以在构建时动态设置 locale：
+
+```tsx
+// pages/[locale]/products.tsx
+import { ShopifyProvider, createShopifyConfig } from '@anker-in/campaign-ui/shopify/context'
+
+export default function ProductsPage({ locale }: { locale: string }) {
+  const shopifyConfig = createShopifyConfig({
+    brand: 'soundcore',
+    env: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+    metafieldNamespacePrefix: 'custom',
+    stores: getStoresForLocale(locale) // 根据 locale 获取对应的店铺配置
+  })
+
+  return (
+    <ShopifyProvider config={shopifyConfig} locale={locale}>
+      <ProductList />
+    </ShopifyProvider>
+  )
+}
+```
+
+### 5. 向后兼容
+
+如果你需要逐步迁移，可以使用 `createShopifyConfigFromEnv()` 来保持向后兼容：
+
+```tsx
+import { createShopifyConfigFromEnv } from '@anker-in/campaign-ui/shopify/context'
+
+// 从环境变量创建配置（向后兼容）
+const shopifyConfig = createShopifyConfigFromEnv()
+
+function App({ locale }: { locale: string }) {
+  return (
+    <ShopifyProvider config={shopifyConfig} locale={locale}>
+      <YourAppContent />
+    </ShopifyProvider>
+  )
+}
+```
+
+## 优势
+
+1. **类型安全**: 完整的 TypeScript 支持
+2. **灵活性**: 支持动态配置，不依赖环境变量
+3. **多店铺支持**: 轻松管理多个国家的店铺配置
+4. **测试友好**: 可以轻松 mock 配置进行测试
+5. **构建时配置**: 支持在构建时根据国家动态设置配置
+
+## 注意事项
+
+1. 确保在使用任何 shopify 相关 hooks 之前设置了 `ShopifyProvider`
+2. 每个页面/组件只能有一个 `ShopifyProvider`
+3. `locale` 必须在配置的 `stores` 中存在
+4. 建议在生产环境中使用手动配置而不是环境变量

package/src/shopify/context/ShopifyProvider.tsx

@@ -0,0 +1,34 @@
+import React, { createContext, useContext, useMemo, ReactNode } from 'react'
+
+import { ShopifyConfig, SiteConfig, ShopifyContextValue } from '@shopify/types/config'
+
+const ShopifyContext = createContext<ShopifyContextValue | null>(null)
+
+interface ShopifyProviderProps {
+  children: ReactNode
+  shopifyConfig: ShopifyConfig
+  siteConfig: SiteConfig
+}
+
+export const ShopifyProvider: React.FC<ShopifyProviderProps> = ({ children, siteConfig, shopifyConfig }) => {
+  const contextValue = useMemo((): ShopifyContextValue => {
+    if (!siteConfig || !shopifyConfig) {
+      throw new Error(`No site configuration or shopify configuration found`)
+    }
+
+    return {
+      ...siteConfig,
+      ...shopifyConfig,
+    }
+  }, [siteConfig, shopifyConfig])
+
+  return <ShopifyContext.Provider value={contextValue}>{children}</ShopifyContext.Provider>
+}
+
+export const useShopifyContext = (): ShopifyContextValue => {
+  const context = useContext(ShopifyContext)
+  if (!context) {
+    throw new Error('useShopifyContext must be used within a ShopifyProvider')
+  }
+  return context
+}