@anker-in/lib 1.0.0 → 1.1.0

package/esbuild-esm.mjs

@@ -0,0 +1,30 @@
+import esbuild from 'esbuild'
+const dir = 'dist/esm'
+
+const options = {
+  entryPoints: ['src/**/*.ts*'],
+  outdir: dir,
+  format: 'esm',
+  target: 'es2020',
+  sourcemap: true,
+  minify: true,
+}
+
+// Check if "watch=true" flag is passed
+if (process.argv[2]) {
+  const [key, value] = process.argv[2].split('=')
+  if (key === 'watch' && value === 'true') {
+    const ctx = await esbuild.context(options)
+    await ctx.watch()
+  }
+}
+
+esbuild.build(options).catch(() => process.exit(1))
+
+// Create a package.json file in the dist/esm directory with "type": "module" field
+import fs from 'fs'
+import path from 'path'
+if (!fs.existsSync(dir)) {
+  fs.mkdirSync(dir, { recursive: true })
+}
+fs.writeFileSync(path.join(dir, 'package.json'), JSON.stringify({ type: 'module' }, null, 2) + '\n', 'utf-8')

package/package.json

@@ -1,21 +1,67 @@
 {
   "name": "@anker-in/lib",
-  "version": "1.0.0",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "1.1.0",
+  "description": "Unified Anker headless library with shared context, Shopify integration, and cart utilities",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      },
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwind-merge": "^1.11.0",
+    "clsx": "^2.1.1"
+  },
+  "dependencies": {
+    "swr": "^2.2.4",
+    "fetch-ponyfill": "^7.1.0",
+    "js-cookie": "^3.0.5"
+  },
   "devDependencies": {
     "@types/jest": "^29.5.12",
+    "@types/js-cookie": "^3.0.6",
+    "esbuild": "^0.19.0",
     "jest": "^29.0.0",
     "ts-jest": "^29.2.6",
     "tsup": "^8.4.0",
     "typescript": "^5.0.0"
   },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "keywords": [
+    "anker",
+    "headless",
+    "shopify",
+    "ecommerce",
+    "react",
+    "cart",
+    "context"
+  ],
+  "author": "Anker",
+  "license": "MIT",
   "scripts": {
     "dev": "tsup --watch",
-    "build": "tsup",
+    "build": "pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:types",
+    "build:js:cjs": "node esbuild-cjs.mjs",
+    "build:js:esm": "node esbuild-esm.mjs",
+    "build:types": "tsc --outdir dist",
     "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",
     "coverage": "jest --coverage",
+    "type-check": "tsc --noEmit",
     "clean": "rm -rf .turbo node_modules dist"
   }
 }

package/src/cart/const.ts

@@ -0,0 +1,23 @@
+import { SWRMutationConfiguration } from 'swr/mutation'
+
+export const currencyCodeMapping = {
+  us: 'USD',
+  ca: 'CAD',
+  gb: 'GBP',
+  eu: 'EUR',
+  au: 'AUD',
+  nz: 'NZD',
+  de: 'EUR',
+  fr: 'EUR',
+  es: 'EUR',
+  it: 'EUR',
+  nl: 'EUR',
+  pl: 'EUR',
+  ro: 'EUR',
+} as Record<string, string>
+
+export const defaultSWRMutationConfiguration: SWRMutationConfiguration<any, any, any, any, any> & {
+  throwOnError?: boolean
+} = {
+  throwOnError: false,
+}

package/src/cart/hooks/basic/useBuyNow.ts

@@ -0,0 +1,105 @@
+import { Attributes, Cart, CartBuyerIdentity, CartInput } from '../../../shopify'
+import { useCallback } from 'react'
+import useSWRMutation, { SWRMutationConfiguration } from 'swr/mutation'
+import { FbqBuyNowTrackConfig } from '../../track/fbq'
+import { GtmParams, BuyNowLineItems } from '../../types'
+// import { startInactiveSpan } from '@sentry/nextjs'
+import { createCart as createCartFetcher } from '../../../shopify'
+import { useHeadlessContext } from '../../../context'
+import { defaultSWRMutationConfiguration } from '../../const'
+
+type UseBuyNowProps = {
+  withTrack?: boolean // 是否需要默认埋点
+  redirectToCheckout?: boolean // 是否重定向到结账页
+}
+
+export type BuyNowArgs = {
+  lineItems: BuyNowLineItems
+  discountCodes?: string[]
+  customAttributes?: Attributes[]
+  buyerIdentity?: CartBuyerIdentity
+  gtmParams?: GtmParams
+  fbqTrackConfig?: FbqBuyNowTrackConfig
+}
+
+export const useBuyNow = (
+  { withTrack = true, redirectToCheckout = true }: UseBuyNowProps = {},
+  swrOptions: SWRMutationConfiguration<Cart | undefined, Error, string, BuyNowArgs> & {
+    throwOnError?: boolean
+  } = defaultSWRMutationConfiguration
+) => {
+  const { storefrontToken, storeDomain } = useHeadlessContext()
+
+  const trigger = useCallback(
+    async (_: any, { arg }: { arg: BuyNowArgs }) => {
+      const { lineItems, discountCodes, gtmParams = {}, buyerIdentity, fbqTrackConfig } = arg
+
+      if (!lineItems) {
+        return
+      }
+
+      // const buyNowSpan = startInactiveSpan({
+      //   name: 'buyNow',
+      //   op: 'business',
+      // })
+
+      const linesToBuyNow = lineItems
+        .map(item => ({
+          merchandiseId: item.variant.id,
+          quantity: item.quantity || 1,
+          attributes: item.attributes,
+        }))
+        .filter(item => item.merchandiseId && item.quantity)
+
+      let resultCart: Cart | undefined
+      if (linesToBuyNow.length > 0) {
+        // const buyNowAPISpan = startInactiveSpan({
+        //   name: 'buyNowAPI',
+        //   op: 'business',
+        //   parentSpan: buyNowSpan,
+        // })
+
+        // const createCartApiSpan = startInactiveSpan({
+        //   name: 'createCartAPI',
+        //   op: 'business',
+        //   parentSpan: buyNowAPISpan,
+        // })
+        // 创建购物车
+        const createCartOptions = {
+          lines: linesToBuyNow,
+          buyerIdentity,
+          discountCodes,
+        } as CartInput
+        resultCart = await createCartFetcher({
+          options: createCartOptions,
+          config: {
+            storefrontToken,
+            storeDomain,
+          },
+        })
+        // createCartApiSpan.end()
+
+        // buyNowAPISpan.end()
+      }
+
+      // 埋点
+      if (withTrack) {
+        // buyNowGa({ lineItems, router, gtmParams })
+        // if (fbqTrackConfig) {
+        //   buyNowFbq({ router, trackConfig: fbqTrackConfig })
+        // }
+      }
+
+      // buyNowSpan.end()
+      if (redirectToCheckout && resultCart?.url) {
+        window.location.href = resultCart.url
+      } else {
+        throw new Error('Failed to buy now')
+      }
+      return resultCart
+    },
+    [withTrack, redirectToCheckout, createCartFetcher]
+  )
+
+  return useSWRMutation('buyNow', trigger, swrOptions)
+}

package/src/cart/index.ts

@@ -0,0 +1,19 @@
+// Context
+
+// Basic Hooks
+
+export * from './hooks/basic/useBuyNow'
+
+// Feature Hooks
+
+// Types
+export * from './types'
+
+// Utils
+export * from './utils'
+
+// Constants
+export * from './const'
+
+// Tracking
+export * from './track/fbq'

package/src/cart/track/fbq.ts

@@ -0,0 +1,63 @@
+import { AddToCartLineItems } from '../types'
+
+declare global {
+  interface Window {
+    fbq?: (...args: any) => void
+    gtag?: (...args: any) => void
+  }
+}
+
+// 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 addToCartFbq = ({ lineItems = [] }: { lineItems: AddToCartLineItems }) => {
+  if (lineItems.length && lineItems[0].variant) {
+    const { variant, quantity, finalPrice } = lineItems[0]
+    fbq('track', 'AddToCart', {
+      value: finalPrice?.amount || variant?.price?.amount,
+      num_items: quantity,
+      currency: variant?.price?.currencyCode,
+      content_name: variant?.product?.title, // 产品内容的名字
+      content_type: 'product_group',
+      content_ids: String(variant?.id), // 产品的varaint id
+      content_category: variant?.product?.metafields?.global?.trafficType || 'public', // 产品分类
+    })
+  }
+}
+
+export type FbqBuyNowTrackConfig = {
+  fbqBuyNowEvent: string
+  gtagBuyNowLabel: string
+  gtagBuyNowConversion: string
+}
+
+export const buyNowFbq = ({
+  trackConfig,
+  gtagId,
+}: {
+  router: any
+  trackConfig: FbqBuyNowTrackConfig
+  gtagId: string
+}) => {
+  try {
+    if (trackConfig?.fbqBuyNowEvent) {
+      fbq('trackCustom', trackConfig?.fbqBuyNowEvent)
+    }
+
+    if (trackConfig?.gtagBuyNowLabel) {
+      gtag('event', trackConfig?.gtagBuyNowConversion || 'conversion', {
+        send_to: `${gtagId}/${trackConfig?.gtagBuyNowLabel}`,
+      })
+    }
+  } catch (error) {}
+}

package/src/cart/types/index.ts

@@ -0,0 +1,25 @@
+import { Attributes } from '../../shopify'
+import { ProductVariant, ProductPrice } from '../../shopify'
+
+export type AddToCartLineItems = Array<{
+  variant: ProductVariant
+  variantId?: string // 兼容老数据
+  quantity: number
+  finalPrice?: ProductPrice
+  attributes?: Attributes
+  sellingPlanId?: string
+}>
+
+export type BuyNowLineItems = Array<{
+  variant: ProductVariant
+  quantity: number
+  finalPrice?: ProductPrice
+  attributes?: Attributes
+  sellingPlanId?: string
+}>
+
+export type GtmParams = {
+  position?: string // ga4 position
+  pageGroup?: string // ga4 pageGroup
+  ga4Params?: Record<string, any> // ga4 额外埋点字段
+}

package/src/cart/utils/index.ts

@@ -0,0 +1,22 @@
+import { Attributes } from '../../shopify'
+
+export const isAttributesEqual = (oldAttributes: Attributes, newAttributes: Attributes) => {
+  // 比对两个数据是否完全相同
+  // 检查数组长度是否相同
+  if (oldAttributes?.length !== newAttributes?.length) {
+    return false
+  }
+
+  // 将数组转换为 Map 以便快速查找
+  const oldMap = new Map(oldAttributes.map(attr => [attr.key, attr.value]))
+  const newMap = new Map(newAttributes.map(attr => [attr.key, attr.value]))
+
+  // 检查所有 key 是否都存在且值相同
+  for (const [key, value] of newMap) {
+    if (!oldMap.has(key) || oldMap.get(key) !== value) {
+      return false
+    }
+  }
+
+  return true
+}

package/src/context/HeadlessProvider.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext, useMemo, ReactNode } from 'react'
+
+import { HeadlessConfig } from './config'
+
+const HeadlessContext = createContext<HeadlessConfig | null>(null)
+
+interface HeadlessProviderProps {
+  children: ReactNode
+  headlessConfig: HeadlessConfig
+}
+
+export const HeadlessProvider = ({ children, headlessConfig }: HeadlessProviderProps): JSX.Element => {
+  const contextValue = useMemo((): HeadlessConfig => {
+    if (!headlessConfig) {
+      throw new Error(`No site configuration or headless configuration found`)
+    }
+
+    return headlessConfig
+  }, [headlessConfig])
+
+  return <HeadlessContext.Provider value={contextValue}>{children}</HeadlessContext.Provider>
+}
+
+export const useHeadlessContext = (): HeadlessConfig => {
+  const context = useContext(HeadlessContext)
+  if (!context) {
+    throw new Error('useHeadlessContext must be used within a HeadlessProvider')
+  }
+  return context || ({} as HeadlessConfig)
+}

package/src/context/config.ts

@@ -0,0 +1,10 @@
+export type HeadlessConfig = {
+  storefrontToken: string
+  storeDomain: string
+  locale: string
+  comboMetafieldsNamespace: string
+  cartIdCookieName: string
+  brand: string
+  appName: string
+  passportUrl: string
+}

package/src/context/index.ts

@@ -0,0 +1,3 @@
+export * from './HeadlessProvider'
+export * from './config'
+

package/src/index.ts

@@ -1 +1,5 @@
-export * from './math'
+export * from './context'
+
+export * from './shopify'
+
+export * from './cart'

package/src/shopify/fetchers/add-cart-lines.ts

@@ -0,0 +1,53 @@
+import { CartLinesAddPayload, MutationCartLinesAddArgs } from '../gql'
+import { addCartLinesMutation } from '../mutations/add-cart-lines'
+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'
+import { Optional } from '../types/type-helper'
+/**
+ * Adds cart lines to the Shopify cart.
+ *
+ * @param options - The options for adding cart lines.
+ * @param config - The store configuration.
+ * @returns The updated cart or undefined if the cart could not be updated.
+ */
+export const addCartLines: ShopifyFetcher<Cart | undefined, MutationCartLinesAddArgs> = async function ({
+  options,
+  config,
+}: {
+  options: MutationCartLinesAddArgs
+  config: ShopifyConfig
+}) {
+  const { data } = await fetchGraphqlApi<
+    { cartLinesAdd: CartLinesAddPayload },
+    Optional<MutationCartLinesAddArgs, 'cartId'>
+  >({
+    query: addCartLinesMutation,
+    variables: {
+      cartId: options.cartId,
+      lines: options.lines,
+    },
+    config,
+  })
+
+  if (data?.cartLinesAdd?.userErrors?.length) {
+    const errors = data.cartLinesAdd.userErrors
+    const quantityError = errors.find(error => error.field?.includes('quantity'))
+    if (quantityError) {
+      // The quantity of the line item is invalid.
+      return Promise.reject(quantityError)
+    } else {
+      throw new Error(JSON.stringify(data?.cartLinesAdd?.userErrors))
+    }
+  }
+
+  const cart = data?.cartLinesAdd?.cart
+
+  if (cart) {
+    return normalizeCart(cart, '')
+  } else {
+    return undefined
+  }
+}

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

@@ -0,0 +1,43 @@
+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 { GetCartMetafieldQueryRoot } from './get-cart'
+import { constructMetafieldIdentifiersQueryParams } from '../utils/helper'
+
+/**
+ * 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, GetCartMetafieldQueryRoot> = async function ({
+  options,
+  config,
+}) {
+  const { comboMetafieldsNamespace, metafieldIdentifiers, ...rest } = options
+  if (!rest.lines?.length) {
+    throw new Error('Invalid input used for this operation: Miss lines')
+  }
+  const { data } = await fetchGraphqlApi<{ cartCreate: CartCreatePayload }, CartInput>({
+    query: createCartMutation,
+    variables: {
+      ...rest,
+      ...(metafieldIdentifiers && {
+        ...constructMetafieldIdentifiersQueryParams(metafieldIdentifiers, comboMetafieldsNamespace),
+      }),
+    },
+    config,
+  })
+
+  const cart = data?.cartCreate?.cart
+
+  if (cart) {
+    return normalizeCart(cart, comboMetafieldsNamespace)
+  } else {
+    return undefined
+  }
+}

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

@@ -0,0 +1,48 @@
+import { Cart, GetCartQueryVariables } from '../gql'
+import type { Cart as ExportCart } from '../types/cart'
+import {
+  HasMetafieldQueryRoot,
+  metafieldIdentifiersGroup,
+  ShopifyFetcher,
+  ShopifyFetcherVariables,
+} from '../types/fetcher'
+import { fetchGraphqlApi } from '../utils/fetch-graphql-api'
+import { normalizeCart } from '../utils/normalize'
+import { getCartQuery } from '../queries/get-cart'
+import { constructMetafieldIdentifiersQueryParams } from '../utils/helper'
+
+export type GetCartMetafieldQueryRoot = HasMetafieldQueryRoot.Product | HasMetafieldQueryRoot.Variant
+
+export type GetCartReq = {
+  cartId: string
+} & metafieldIdentifiersGroup<GetCartMetafieldQueryRoot>
+
+/**
+ * Fetches the cart from Shopify.
+ *
+ * @param options - The options for fetching the cart.
+ * @param config - The store configuration.
+ * @returns The fetched cart or undefined if not found.
+ */
+export const getCart: ShopifyFetcher<ExportCart | undefined, GetCartQueryVariables, GetCartMetafieldQueryRoot> =
+  async function ({ options, config }) {
+    const { comboMetafieldsNamespace: metafieldsNamespace, metafieldIdentifiers, cartId } = options
+
+    if (!cartId) {
+      throw new Error('Invalid input used for this operation: Miss cartId')
+    }
+
+    const { data } = await fetchGraphqlApi<
+      { cart: Cart },
+      ShopifyFetcherVariables<GetCartQueryVariables, GetCartMetafieldQueryRoot>
+    >({
+      query: getCartQuery,
+      variables: {
+        cartId,
+        ...constructMetafieldIdentifiersQueryParams(metafieldIdentifiers, metafieldsNamespace),
+      },
+      config,
+    })
+
+    return normalizeCart(data.cart, metafieldsNamespace)
+  }

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

@@ -0,0 +1,48 @@
+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 GetProductsMetafieldQueryRoot = HasMetafieldQueryRoot.Product | HasMetafieldQueryRoot.Variant
+
+export type GetProductsByHandlesReq = {
+  handles: string[]
+}
+
+/**
+ * Gets products by their handles.
+ *
+ * @param options - The options for getting products.
+ * @param config - The store configuration.
+ * @returns An array of products.
+ */
+export const getProductsByHandles: ShopifyFetcher<
+  Product[],
+  GetProductsByHandlesReq,
+  GetProductsMetafieldQueryRoot
+> = async ({ options, config }) => {
+  const { handles, metafieldIdentifiers, comboMetafieldsNamespace } = options
+
+  if (!handles?.length) {
+    throw new Error('Handles are required')
+  }
+
+  const products = await fetchGraphqlApi<
+    Record<string, ShopifyProduct>,
+    ShopifyFetcherVariables<GetProductsByHandlesReq, GetProductsMetafieldQueryRoot>
+  >({
+    query: getProductsByHandlesQuery(handles),
+    variables: {
+      handles,
+      ...constructMetafieldIdentifiersQueryParams(metafieldIdentifiers, comboMetafieldsNamespace),
+    },
+    config,
+  })
+
+  return Object.values(products.data)
+    .filter(item => !!item)
+    .map(product => normalizeProduct(product, '')) as Product[]
+}

package/src/shopify/fetchers/index.ts

@@ -0,0 +1,10 @@
+export { getProductsByHandles } from './get-products-by-handles'
+export { addCartLines } from './add-cart-lines'
+export { createCart } from './create-cart'
+export { removeCartLines } from './remove-cart-lines'
+export { updateCartAttributes } from './update-cart-attributes'
+export { updateCartLines } from './update-cart-lines'
+export { getCart } from './get-cart'
+
+export type { GetProductsByHandlesReq, GetProductsMetafieldQueryRoot } from './get-products-by-handles'
+export type { GetCartReq, GetCartMetafieldQueryRoot } from './get-cart'

package/src/shopify/fetchers/remove-cart-lines.ts

@@ -0,0 +1,31 @@
+import { Cart, MutationCartLinesRemoveArgs } from '../gql'
+import { removeCartItemsMutation } from '../mutations/remove-cart-items'
+import type { Cart as ExportCart } from '../types/cart'
+import { ShopifyFetcher } from '../types/fetcher'
+import { fetchGraphqlApi } from '../utils/fetch-graphql-api'
+import { normalizeCart } from '../utils/normalize'
+
+/**
+ * Removes cart lines from the Shopify API.
+ *
+ * @param options - The options for removing cart lines.
+ * @param config - The store configuration.
+ * @returns The normalized cart after removing the cart lines, or undefined if the operation fails.
+ */
+export const removeCartLines: ShopifyFetcher<ExportCart | undefined, MutationCartLinesRemoveArgs> = async function ({
+  options,
+  config,
+}) {
+  const { data } = await fetchGraphqlApi<{ cartLinesRemove: { cart: Cart } }, MutationCartLinesRemoveArgs>({
+    query: removeCartItemsMutation,
+    variables: options,
+    config,
+  })
+
+  if (data?.cartLinesRemove?.cart) {
+    const normalizedCart = normalizeCart(data.cartLinesRemove.cart, '')
+    return normalizedCart
+  } else {
+    return undefined
+  }
+}