@anker-in/campaign-ui 0.5.16 → 0.5.19

package/src/lib/shopify/utils/const.ts

@@ -0,0 +1,115 @@
+// 购物车数据来源
+export enum CartDataSource {
+  Storefront = 'storefront',
+  Theme = 'theme',
+}
+
+export const REVALIDATE_TIME = 60 * 5
+
+export const SOLD_OUT_PRICE = 9999999.99
+
+export enum TemplateType {
+  Page = 'page',
+  Product = 'product',
+  Collection = 'collection',
+  Blog = 'blog',
+  Article = 'article',
+}
+
+export enum DiscountType {
+  fixedAmount = 'fixed_amount',
+  percentage = 'percentage',
+}
+
+// 工具函数：根据配置生成常量
+export const createConstants = (config: {
+  env: string
+  brand: string
+  locales: string[]
+  googleClientId?: string
+  facebookAppId?: string
+  applicationName?: string
+}) => {
+  const { env, brand, locales, googleClientId, facebookAppId, applicationName } = config
+
+  return {
+    locales,
+    env,
+    applicationName: applicationName ? JSON.parse(applicationName) : undefined,
+    host: env === 'production' ? `www.${brand}.com` : `beta.${brand}.com`,
+    brand,
+    googleClientId,
+    facebookAppId,
+  }
+}
+
+
+export const COLOR_LABEL = [
+  'color',
+  'colour',
+  'couleur',
+  'cor',
+  'colore',
+  'farbe',
+  '색',
+  '色',
+  'カラー',
+  'färg',
+  'farve',
+]
+
+export enum CouponChannel {
+  LIGHTNING_DEAL = 'LIGHTNING_DEAL',
+  DEAL = 'LIGHTNING_DEAL',
+  COUPON = 'COUPON',
+  PED = 'PED',
+  WS24 = 'WS24',
+  WSTD = 'WSTD',
+  WSCH = 'WSCH',
+}
+
+export const PRICE_SYMBOL = {
+  us: '$',
+  uk: '£',
+  ca: '$',
+  eu: '€',
+  pl: 'zł',
+  fr: '€',
+  de: '€',
+  vn: '₫',
+  cl: '$',
+  sg: '$',
+  ae: 'AED',
+  es: '€',
+}
+
+export const CURRENCY_CODE = {
+  us: 'USD',
+  uk: 'GBP',
+  ca: 'CAD',
+  eu: 'EUR',
+  pl: 'PL',
+  fr: 'EUR',
+  de: 'EUR',
+  vn: 'VND',
+  cl: 'CLP',
+  es: 'EUR',
+}
+
+export const COUNTRY_CODE = {
+  pl: 'PL',
+} as Record<string, string>
+
+export const LANGUAGE_CODE = {
+  pl: 'PL',
+} as Record<string, string>
+
+
+export const CUSTOMER_ATTRIBUTE_KEY = '_discounts_function_env'
+export const CUSTOMER_SCRIPT_GIFT_KEY = '_giveaway_gradient_gifts'
+
+export const CODE_AMOUNT_KEY = '_sku_code_money'
+export const SCRIPT_CODE_AMOUNT_KEY = '_code_money'
+
+// 主产品公开 code
+export const MAIN_PRODUCT_CODE = ['WS24', 'WSTD', 'WS7D', 'WSCP', 'WSPE', 'WSPD']

package/src/lib/shopify/utils/cookie.ts

@@ -0,0 +1,28 @@
+import Cookies from 'js-cookie'
+
+export const SHOPIFY_COOKIE_EXPIRE = 30
+export const SHOPIFY_CART_COOKIE_EXPIRE = 14
+
+export enum CookieCategory {
+  Necessary = 'necessary', // 必要类cookie
+  Functional = 'functional', // 功能类、配置类cookie
+  Performance = 'performance', // 性能、统计类cookie
+  Targeting = 'targeting', // 广告、追踪类cookie
+}
+
+export const createCartCookieOptions = () => {
+  const hostUrl = window.location.host.split('.')
+  return {
+    category: CookieCategory.Necessary,
+    domain: hostUrl.reverse().slice(0, 2).reverse().join('.'), // 一二级域名
+    expires: SHOPIFY_CART_COOKIE_EXPIRE,
+  }
+}
+
+export const setCartCookies = (name: string, value: string) => {
+  Cookies.set(name, value, createCartCookieOptions())
+}
+
+export const removeCartCookies = (name: string) => {
+  Cookies.remove(name, createCartCookieOptions())
+}

package/src/lib/shopify/utils/errors.ts

@@ -0,0 +1,65 @@
+export type ErrorData = {
+  message: string
+  code?: string
+}
+
+export type ErrorProps = {
+  code?: string
+} & (
+  | { message: string; errors?: never }
+  | { message?: never; errors: ErrorData[] }
+)
+
+export class CommerceError extends Error {
+  code?: string
+  errors: ErrorData[]
+
+  constructor({ message, code, errors }: ErrorProps) {
+    const error: ErrorData = message
+      ? { message, ...(code ? { code } : {}) }
+      : errors![0]
+
+    super(error.message)
+    this.errors = message ? [error] : errors!
+
+    if (error.code) this.code = error.code
+  }
+}
+
+// Used for errors that come from a bad implementation of the hooks
+export class ValidationError extends CommerceError {
+  constructor(options: ErrorProps) {
+    super(options)
+  }
+}
+
+export class CommerceFetcherError extends CommerceError {
+  status: number
+
+  constructor(
+    options: {
+      status: number
+    } & ErrorProps
+  ) {
+    super(options)
+    this.status = options.status
+  }
+}
+
+export class FetcherError extends Error {
+  status: number
+  errors: string[]
+  errorCode: string
+  constructor(options: {
+    status: number
+    errors?: string[]
+    message?: string
+    errorCode?: string
+  }) {
+    const errorMessage = options.message || options.errors?.join('\n')
+    super(errorMessage)
+    this.status = options.status
+    this.errors = options.errors || []
+    this.errorCode = options.errorCode || ''
+  }
+}

package/src/lib/shopify/utils/fetch-graphql-api.ts

@@ -0,0 +1,67 @@
+import fetchPonyfill from 'fetch-ponyfill'
+import { ShopifyConfig } from '../types/config'
+
+import { getCommerceError } from '../utils/handle-fetch-response'
+
+const { fetch } = fetchPonyfill()
+
+/**
+ * Graphql Api 接口 fetch 方法
+ * @param query: 查询语句
+ * @param variables: 查询参数
+ * @param config: 店铺配置
+ * @returns
+ */
+export async function fetchGraphqlApi<Data, Variables = undefined>({
+  query,
+  variables,
+  fetchOptions,
+  headers,
+  config,
+}: {
+  query: string
+  variables?: Variables
+  headers?: Record<string, any>
+  fetchOptions?: Omit<RequestInit, 'headers' | 'method' | 'body'>
+  config: ShopifyConfig
+}): Promise<{ status: number; data: Data; errors?: any } | never> {
+  const { storefrontToken, storeDomain } = config
+
+  let result: Response | undefined
+  try {
+    result = await fetch(`https://${storeDomain}/api/2025-07/graphql.json`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Shopify-Storefront-Access-Token': storefrontToken,
+        ...headers,
+      },
+      body: JSON.stringify({
+        ...(query && { query }),
+        ...(variables && { variables }),
+      }),
+      ...fetchOptions,
+    })
+
+    const { data, errors, status } = await result.json()
+
+    if (errors?.length) {
+      throw new Error(
+        `Status: ${status}, ${result.status}, GraphQL errors: ` +
+          errors.map(({ message }: { message: string }) => message).join(', ')
+      )
+    }
+
+    return { data, status, ...(errors && { errors }) }
+  } catch (err: any) {
+    console.error('fetchGraphqlApi url:', storeDomain, result?.status)
+    throw getCommerceError(
+      [
+        {
+          message: `status: ${result?.status}, ${err.message} \n Most likely related to an unexpected output. e.g the store might be protected with password or not available.`,
+        },
+      ],
+      500
+    )
+  }
+}

package/src/lib/shopify/utils/handle-fetch-response.ts

@@ -0,0 +1,60 @@
+import { CommerceFetcherError, FetcherError } from './errors'
+
+export function getCommerceError(errors: any[] | null, status = 500) {
+  errors = errors ?? [{ message: 'Failed to fetch Shopify API' }]
+  return new CommerceFetcherError({ errors, status })
+}
+
+export async function getFetcherError(
+  error: string | string[],
+  statusCode: any,
+  errorCode: any
+) {
+  let message = '',
+    errors: string[] = []
+  if (typeof error === 'string') {
+    message = error
+  } else if (Array.isArray(error)) {
+    errors = error
+  }
+
+  return new FetcherError({
+    message,
+    errors,
+    status: statusCode,
+    errorCode: errorCode || '',
+  })
+}
+
+export async function getAsyncError(res: Response, responseData: any) {
+  return getFetcherError(
+    responseData?.errors ||
+      responseData?.message ||
+      (Array.isArray(responseData?.data.message)
+        ? responseData?.data.message.join('. ')
+        : responseData?.data.message) ||
+      responseData?.data?.error ||
+      res.statusText,
+    res.status,
+    responseData?.data?.error_code || ''
+  )
+}
+
+export const handleFetchResponse = async (res: Response) => {
+  const responseText = await res.text()
+  let responseData
+  let requestErrorMessage
+
+  if (responseText) {
+    try {
+      responseData = JSON.parse(responseText)
+      requestErrorMessage = responseData?.error || responseData?.data?.error
+    } catch (err) {}
+  }
+
+  if (res.ok && !requestErrorMessage) {
+    return responseData?.data || responseData
+  }
+
+  throw await getAsyncError(res, responseData)
+}

package/src/lib/shopify/utils/helper.ts

@@ -0,0 +1,89 @@
+import { HasMetafieldsIdentifier } from '../gql'
+import { HasMetafieldQueryRoot } from '../types/fetcher'
+import { PartialRecord } from '../utils/type-helper'
+import Cookies from 'js-cookie'
+import { CouponChannel } from '../utils/const'
+import { ProductVariant } from '../types/product'
+
+// 判断对象是否为空
+export function isObjEmpty(obj?: Record<string, any>) {
+  if (!obj) return true
+  else {
+    return Object.keys(obj).length === 0
+  }
+}
+
+export function atobID(id: string) {
+  if (id && typeof id === 'string' && id.includes('/')) {
+    return id.split('/').pop()?.split('?')?.shift()
+  } else {
+    return id
+  }
+}
+
+export function btoaID(id: string, type: 'ProductVariant' | 'Product' = 'ProductVariant') {
+  return `gid://shopify/${type}/${id}`
+}
+
+// 皮肤站三级域名
+export const getThemeLocale = (locale: string) => {
+  if (locale === 'eu-de') return 'de'
+  if (locale === 'eu-en') return 'eu'
+  if (locale === 'au') return 'au'
+  return locale
+}
+
+/**
+ * 生成 metafieldIdentifiers 查询参数
+ * {
+ *   product: { namespace: 'product', key: 'img' },
+ *   variant: { namespace: 'variant', key: 'img' }
+ * }
+ * =>
+ * {
+ *  productMetafieldIdentifiers: [{ namespace: 'combo', key: 'product' }]
+ *  variantMetafieldIdentifiers: [{ namespace: 'combo', key: 'variant' }]
+ * }
+ */
+export function constructMetafieldIdentifiersQueryParams<T extends HasMetafieldQueryRoot>(
+  metafieldIdentifiers: PartialRecord<T, HasMetafieldsIdentifier[]> = {},
+  metafieldsNamespace: string = ''
+): PartialRecord<`${T}MetafieldIdentifiers`, HasMetafieldsIdentifier[]> {
+  const identifiers = Object.entries(metafieldIdentifiers).reduce<
+    PartialRecord<`${T}MetafieldIdentifiers`, HasMetafieldsIdentifier[]>
+  >((queryInput, [key, value]) => {
+    const metafieldIdentifiers = value as HasMetafieldsIdentifier[]
+    queryInput[`${key}MetafieldIdentifiers` as `${T}MetafieldIdentifiers`] = metafieldIdentifiers
+      .filter(item => item.namespace !== metafieldsNamespace)
+      .map(item => ({
+        namespace: metafieldsNamespace,
+        key: item.namespace,
+      }))
+      .concat(metafieldIdentifiers)
+    return queryInput
+  }, {})
+  return identifiers
+}
+
+export const referralAttributes = () => {
+  const inviteCode = Cookies.get('invite_code')
+  const playModeId = Cookies.get('playModeId')
+  const popup = Cookies.get('_popup')
+  if (inviteCode && playModeId) {
+    return popup
+      ? [
+          { key: '_invite_code', value: inviteCode ? inviteCode : '' },
+          { key: '_play_mode_id', value: playModeId ? playModeId : '' },
+          { key: '_popup', value: popup },
+        ]
+      : [
+          { key: '_invite_code', value: inviteCode ? inviteCode : '' },
+          { key: '_play_mode_id', value: playModeId ? playModeId : '' },
+        ]
+  }
+  return []
+}
+
+export const getNormalCoupon = ({ variant }: { variant?: ProductVariant }) => {
+  return variant?.coupons?.find((coupon: any) => coupon.discount_type !== CouponChannel.WSCH)
+}

package/src/lib/shopify/utils/normalize/cart.ts

@@ -0,0 +1,106 @@
+import { ProductVariant as ShopifyProductVariant, CartLine as ShopifyCartLine } from '../../gql'
+import type { Cart, LineItem } from '../../types/cart'
+import type { Cart as ShopifyCart } from '../../gql'
+
+import { normalizeMetafields } from './metafield'
+
+export function normalizeCart(cart: ShopifyCart, metafieldsNamespace: string = ''): Cart {
+  const lineItems = cart.lines?.edges?.map(item => normalizeLineItem(item, metafieldsNamespace))
+  const orderDiscounts = cart?.discountAllocations?.reduce((pre, cur) => {
+    return Number(cur?.discountedAmount?.amount) + pre
+  }, 0)
+  const [totalLineItemsDiscount, lineItemsSubtotalPrice] = lineItems?.reduce(
+    ([t, l], cur) => {
+      const currentDiscount = cur?.discountAllocations?.reduce((p, c) => Number(c?.amount) + p, 0) || 0
+      return [currentDiscount + t, Number(cur?.subtotalAmount) + l]
+    },
+    [0, 0]
+  ) || [0, 0]
+
+  return {
+    customAttributes: cart.attributes,
+    totalLineItemsDiscount: orderDiscounts + totalLineItemsDiscount,
+    id: cart.id,
+    url: cart.checkoutUrl,
+    ready: true,
+    customerId: cart?.buyerIdentity?.customer?.id || '',
+    email: cart?.buyerIdentity?.email || '',
+    createdAt: cart.createdAt,
+    currency: {
+      code: cart.cost?.subtotalAmount?.currencyCode,
+    },
+    taxesIncluded: cart.cost?.totalTaxAmountEstimated,
+    lineItems: cart.lines?.edges?.map(item => normalizeLineItem(item, metafieldsNamespace)),
+    subtotalPrice: cart.cost?.subtotalAmount?.amount,
+    totalPrice: cart.cost?.totalAmount?.amount - (cart.cost?.totalTaxAmount?.amount || 0),
+    // 预估税额现在逻辑没理清楚，暂时 写死为 0
+    // totalTaxAmount: cart.cost?.totalTaxAmount?.amount,
+    totalTaxAmount: 0,
+    // lineItemsSubtotalPrice: cart.cost?.subtotalAmount?.amount,
+    lineItemsSubtotalPrice,
+    discountCodes: cart.discountCodes || [],
+    discountAllocations:
+      cart?.discountAllocations?.map(item => ({
+        code: item?.code || item?.title || '',
+        amount: item?.discountedAmount?.amount,
+      })) || [],
+  }
+}
+
+export function normalizeLineItem({
+  node: { id, merchandise: variant, quantity, discountAllocations, attributes, cost },
+}: {
+  node: ShopifyCartLine
+}, metafieldNamespacePrefix: string = ''): LineItem {
+  const price = variant?.price?.amount
+  const name = variant?.product?.title
+  return {
+    id,
+    name,
+    quantity,
+    variantId: String(variant?.id),
+    productId: String(variant?.product?.id),
+    totalAmount: cost?.totalAmount?.amount,
+    subtotalAmount: cost?.subtotalAmount?.amount,
+    discountAllocations:
+      discountAllocations?.map(item => ({
+        code: item?.code || item?.title || '',
+        amount: item?.discountedAmount?.amount,
+      })) || [],
+    customAttributes:
+      attributes?.map(item => ({
+        key: item?.key || '',
+        value: item?.value || '',
+      })) || [],
+    variant: {
+      id: String(variant?.id),
+      options: [],
+      price,
+      listPrice: variant?.compareAtPrice?.amount,
+      sku: variant?.sku ?? '',
+      name: variant?.title!,
+      requiresShipping: variant?.requiresShipping ?? false,
+      availableForSale: availableVariant({
+        ...variant,
+        price: variant?.price,
+      } as unknown as ShopifyProductVariant),
+      quantityAvailable: variant?.quantityAvailable || 0,
+      currentlyNotInStock: variant?.currentlyNotInStock || false,
+      metafields: normalizeMetafields(variant.metafields, metafieldNamespacePrefix),
+    },
+    product: variant?.product as any,
+    path: `/${variant?.product?.handle}`,
+    discounts: [],
+    options: variant?.title == 'Default Title' ? [] : variant?.selectedOptions,
+  }
+}
+
+const availableVariant = (variant: ShopifyProductVariant) => {
+  //availableForSale 是否可售 true:可售
+  if (!variant.availableForSale) return false
+  //currentlyNotInStock 是否可超卖 true:是
+  //quantityAvailable 库存
+  if (!variant.quantityAvailable && !variant.currentlyNotInStock) return false
+  if (variant.price?.amount >= 9999999.99) return false
+  return true
+}

package/src/lib/shopify/utils/normalize/customer.ts

@@ -0,0 +1,18 @@
+import { Customer } from '../../types/customer'
+import { Customer as ShopifyCustomer } from '../../gql'
+
+export function normalizeCustomer(customer: ShopifyCustomer): Customer {
+  const { id, firstName, lastName, displayName, email, phone, tags, acceptsMarketing, createdAt, orders } = customer
+  return {
+    id,
+    firstName: firstName || '',
+    lastName: lastName || '',
+    displayName: displayName || '',
+    email: email || '',
+    phone: phone || '',
+    tags: tags || [],
+    acceptsMarketing: acceptsMarketing || false,
+    createdAt: createdAt || '',
+    orders: orders?.nodes?.map(order => order) || [],
+  }
+}

package/src/lib/shopify/utils/normalize/index.ts

@@ -0,0 +1,2 @@
+export * from './cart'
+export * from './metafield'

package/src/lib/shopify/utils/normalize/metafield.ts

@@ -0,0 +1,69 @@
+import { Maybe } from 'graphql/jsutils/Maybe'
+import { Metafield } from '../../gql'
+
+export const normalizeMetafields = (
+  metafields: Maybe<Metafield>[], 
+  metafieldNamespacePrefix: string
+): Record<string, any> => {
+  // combo namespace 的优先级低于普通namespace的优先级
+  return metafields?.reduce(
+    (prev, cur) => {
+      if (cur) {
+        let namespace = cur.namespace
+        if (namespace.startsWith(`${metafieldNamespacePrefix}combo`)) {
+          namespace = cur.key
+          prev[namespace] = prev[namespace] || {}
+
+          const parsedMetafields: {
+            [key: string]: Metafield
+          } = parseMetafield(cur)
+          if (parsedMetafields) {
+            Object.entries(parsedMetafields).forEach(([key, innerMetafields]) => {
+              prev[namespace][key] = prev[namespace][key] ?? (innerMetafields ? parseMetafield(innerMetafields) : null)
+            })
+          }
+        } else {
+          prev[namespace] = prev[namespace] || {}
+          prev[namespace][cur.key] = cur ? parseMetafield(cur) : null
+        }
+      }
+      return prev
+    },
+    {} as Record<string, any>
+  )
+}
+
+export function parseJSON(str: string) {
+  try {
+    return JSON.parse(str)
+  } catch (err) {
+    return {}
+  }
+}
+
+const parseDesc = (desc: string) => {
+  const cfg = parseJSON(desc) || {}
+  return {
+    parseType: cfg.type, // JSON_STRING
+    descContent: cfg.content || '', // 描述
+    status: cfg.status || 'Active', // 状态
+  }
+}
+
+export const parseMetafield = (metafield: Metafield) => {
+  const type = metafield?.type && metafield?.type.toLowerCase()
+  const { status } = parseDesc(metafield?.description || '')
+  if (status.toLowerCase() !== 'active') return null
+
+  switch (type) {
+    case 'json':
+    case 'json_string':
+    case 'rating':
+    case 'volume':
+    case 'weight':
+    case 'dimension':
+      return JSON.parse(metafield.value)
+    default:
+      return metafield?.value || metafield
+  }
+}