@anker-in/campaign-ui 0.0.33-alpha6 → 0.1.1-0.beta.1

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,2 +1,14 @@
 // eslint-disable-next-line import/extensions
+
 export { default as Chat } from './chat/index.js'
+
+export {
+  Role,
+  ActionExecutionMessage,
+  TextMessage,
+  useCopilotChat,
+  useCopilotAction,
+  useCopilotReadable,
+} from './chat/utils.js'
+
+export * from './credits/index.js'

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/index.ts

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

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/helpers/utils.ts

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

package/src/index.ts

@@ -1 +1,23 @@
 export * from './components/index.js'
+
+// 导出 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 '../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
+}

package/src/shopify/fetchers/create-cart.ts

@@ -0,0 +1,40 @@
+import { CartCreatePayload, CartInput } from '../gql'
+import { createCartMutation } from '../mutations/create-cart'
+import type { Cart } from '../types/cart'
+import { ShopifyFetcher } from '../types/fetcher'
+import { fetchGraphqlApi } from '../utils/fetch-graphql-api'
+import { normalizeCart } from '../utils/normalize'
+import { ShopifyConfig } from '../types/config'
+
+/**
+ * Creates a cart using the Shopify API.
+ *
+ * @param options - The options for the cart.
+ * @param config - The store configuration.
+ * @returns The created cart or undefined if the cart creation fails.
+ */
+export const createCart: ShopifyFetcher<
+  Cart | undefined,
+  CartInput & {
+    disableSetCookie?: boolean
+  }
+> = async function ({ options, config }: { options: CartInput; config: ShopifyConfig }) {
+  const { attributes, ...fetchOptions } = options
+
+  const { data } = await fetchGraphqlApi<{ cartCreate: CartCreatePayload }, CartInput>({
+    query: createCartMutation,
+    variables: {
+      attributes: attributes || [],
+      ...fetchOptions,
+    },
+    config,
+  })
+
+  const cart = data?.cartCreate?.cart
+
+  if (cart) {
+    return normalizeCart(cart, '')
+  } else {
+    return undefined
+  }
+}

package/src/shopify/fetchers/get-products-by-handles.ts

@@ -0,0 +1,41 @@
+import { getProductsByHandlesQuery } from '../queries/get-product-by-handles'
+import { fetchGraphqlApi } from '../utils/fetch-graphql-api'
+import { constructMetafieldIdentifiersQueryParams } from '../utils/helper'
+import { normalizeProduct } from '../utils/normalize/product'
+import { Product as ShopifyProduct } from '../gql'
+import { HasMetafieldQueryRoot, ShopifyFetcher, ShopifyFetcherVariables } from '../types/fetcher'
+import { Product } from '../types/product'
+
+export type GetProductsByHandlesReq = {
+  handles: string[]
+}
+
+export type GetProductsMetafieldQueryRoot = HasMetafieldQueryRoot.Product | HasMetafieldQueryRoot.Variant
+
+export const getProductsByHandles: ShopifyFetcher<
+  Product[],
+  GetProductsByHandlesReq,
+  GetProductsMetafieldQueryRoot
+> = async ({ options, config }) => {
+  const { handles, metafieldIdentifiers, metafieldsNamespace } = options
+
+  if (!handles?.length) {
+    return []
+  }
+
+  const products = await fetchGraphqlApi<
+    Record<string, ShopifyProduct>,
+    ShopifyFetcherVariables<GetProductsByHandlesReq, GetProductsMetafieldQueryRoot>
+  >({
+    query: getProductsByHandlesQuery(handles),
+    variables: {
+      handles,
+      ...constructMetafieldIdentifiersQueryParams(metafieldIdentifiers, metafieldsNamespace),
+    },
+    config,
+  })
+
+  return Object.values(products.data)
+    .filter(item => !!item)
+    .map(product => normalizeProduct(product, '')) as Product[]
+}

package/src/shopify/fetchers/index.ts

@@ -0,0 +1,3 @@
+export { getProductsByHandles } from './get-products-by-handles'
+export type { GetProductsByHandlesReq, GetProductsMetafieldQueryRoot } from './get-products-by-handles'
+

package/src/shopify/fragments/article.ts

@@ -0,0 +1,51 @@
+export const articleFragment = /* GraphQL */ `
+  fragment article on Article {
+    id
+    handle
+    title
+    seo {
+      ...seo
+    }
+    image {
+      ...image
+    }
+    tags
+    publishedAt
+    content
+    contentHtml
+    excerpt
+    excerptHtml
+    authorV2 {
+      bio
+      email
+      firstName
+      lastName
+      name
+    }
+  }
+`
+
+export const articleWithoutContentFragment = /* GraphQL */ `
+  fragment article on Article {
+    id
+    handle
+    title
+    seo {
+      ...seo
+    }
+    image {
+      ...image
+    }
+    tags
+    publishedAt
+    excerpt
+    excerptHtml
+    authorV2 {
+      bio
+      email
+      firstName
+      lastName
+      name
+    }
+  }
+`

package/src/shopify/fragments/blog.ts

@@ -0,0 +1,10 @@
+export const blogFragment = /* GraphQL */ `
+  fragment blog on Blog {
+    id
+    handle
+    title
+    seo {
+      ...seo
+    }
+  }
+`