@anker-in/campaign-ui 0.5.16 → 0.5.19

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

@@ -0,0 +1,193 @@
+
+import {
+  ImageConnection,
+  MediaConnection,
+  MoneyV2,
+  Product as ShopifyProduct,
+  ProductOption,
+  ProductVariant as ShopifyProductVariant,
+  ProductVariantConnection,
+  SelectedOption,
+} from '../../gql'
+import type {
+  Product,
+  ProductImage,
+  ProductMedia,
+  ProductPrice,
+  ProductVariant,
+  VariantCoupon,
+} from '../../types/product'
+
+import { atobID } from '../helper'
+import { normalizeMetafields } from './metafield'
+import { colorMap } from '../colors'
+
+const money = ({ amount, currencyCode }: MoneyV2): ProductPrice => {
+  return (
+    amount &&
+    currencyCode && {
+      amount: +amount,
+      currencyCode,
+    }
+  )
+}
+
+const checkVariantAvailable = (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
+}
+
+export const normalizeProductOption = ({
+  id,
+  name,
+  values,
+}: ProductOption): {
+  __typename: 'ProductOption'
+  id: string
+  name: string
+  values: {
+    label: string
+    hexColors?: string[]
+  }[]
+} => {
+  return {
+    __typename: 'ProductOption',
+    id,
+    name: name.toLowerCase(),
+    values: values.map(value => {
+      let output: any = {
+        label: value,
+      }
+      if (name.match(/colou?r/gi)) {
+        const mapedColor = colorMap[value.toLowerCase().replace(/ /g, '')]
+        if (mapedColor) {
+          output = {
+            ...output,
+            hexColors: [mapedColor],
+          }
+        }
+      }
+      return output
+    }),
+  }
+}
+
+const normalizeProductImages = ({ nodes }: ImageConnection): ProductImage[] =>
+  nodes?.map(node => ({
+    url: node.url,
+    alt: node.altText || '',
+  })) || []
+
+const normalizeProductMedia = ({ nodes }: MediaConnection): ProductMedia[] => nodes?.map(node => node) || []
+
+// variant 下的 product 不包含 variants
+function normalizeVariantProduct(product: ShopifyProduct, metafieldNamespacePrefix: string = ''): Omit<Product, 'variants'> {
+  const { id, vendor, images, media, variants, handle, priceRange, options, metafields, availableForSale, ...rest } =
+    product
+
+  return {
+    ...rest,
+    availableForSale: !!variants.nodes.find(item => !!item.availableForSale),
+    id,
+    vendor: vendor || '',
+    handle,
+    path: `/${handle}`,
+    slug: handle?.replace(/^\/+|\/+$/g, ''),
+    price: money(priceRange?.minVariantPrice),
+    priceRange,
+    images: normalizeProductImages(images),
+    media: normalizeProductMedia(media),
+    options: options
+      ? options
+          .filter(o => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
+          .map(o => normalizeProductOption(o))
+      : [],
+    metafields: normalizeMetafields(metafields, metafieldNamespacePrefix) || {},
+  }
+}
+
+export const getCouponsFromVariantMetafields = ({ metafields, variantId }: { metafields: any; variantId: string }) => {
+  const coupons =
+    metafields?.__discountCodeApp?.data?.filter((coupon: VariantCoupon) => {
+      const isRightVariant = String(coupon.variant_shopify_id) === atobID(variantId)
+
+      const isActive =
+        (coupon.ends_at === null || new Date(coupon.ends_at).getTime() > new Date().getTime()) &&
+        (coupon.starts_at === null || new Date(coupon.starts_at).getTime() <= new Date().getTime())
+
+      // 原 by_skus 的接口默认不返回这个类型的 code
+      // const notWSCHCode = !coupon.title.toLocaleLowerCase().includes(CouponChannel.WSCH)
+
+      return isRightVariant && isActive
+    }) || []
+  return coupons
+}
+
+const normalizeProductVariants = ({ nodes }: ProductVariantConnection, product: ShopifyProduct, metafieldNamespacePrefix: string = ''): ProductVariant[] => {
+  return nodes?.map(node => {
+    const { id, selectedOptions, sku, price, metafields, ...rest } = node
+    const normalizedMetafields = normalizeMetafields(metafields, metafieldNamespacePrefix)
+    const coupons = getCouponsFromVariantMetafields({ metafields: normalizedMetafields, variantId: id })
+    return {
+      ...rest,
+      id,
+      sku: sku ?? id,
+      weight: node.weight,
+      price: money(price),
+      availableForSale: checkVariantAvailable(node),
+      options: selectedOptions.map(({ name, value }: SelectedOption) => {
+        const options = normalizeProductOption({
+          id,
+          name,
+          values: [value],
+        })
+        return options
+      }),
+      selectedOptions,
+      metafields: normalizedMetafields,
+      product: normalizeVariantProduct(product, metafieldNamespacePrefix),
+      coupons,
+    } as ProductVariant
+  })
+}
+
+export function normalizeProduct(product: ShopifyProduct, metafieldNamespacePrefix: string = ''): Product {
+  const { id, vendor, images, media, variants, handle, priceRange, options, metafields, availableForSale, ...rest } =
+    product
+
+  const customVariants = variants ? normalizeProductVariants(variants, product, metafieldNamespacePrefix) : []
+  return {
+    ...rest,
+    availableForSale: !!customVariants.find(item => !!item.availableForSale),
+    id,
+    vendor: vendor || '',
+    handle,
+    path: `/${handle}`,
+    slug: handle?.replace(/^\/+|\/+$/g, ''),
+    price: money(priceRange?.minVariantPrice),
+    priceRange,
+    images: normalizeProductImages(images),
+    media: normalizeProductMedia(media),
+    variants: customVariants,
+    options:
+      options?.length > 0
+        ? options
+            .filter(o => o.name !== 'Title') // By default Shopify adds a 'Title' name when there's only one option. We don't need it. https://community.shopify.com/c/Shopify-APIs-SDKs/Adding-new-product-variant-is-automatically-adding-quot-Default/td-p/358095
+            .map(o => normalizeProductOption(o))
+        : customVariants.length > 1
+          ? [
+              {
+                id: 'colorOptionsId',
+                name: customVariants?.[0]?.options?.[0]?.name,
+                values: customVariants.map(item => item.options.map(o => o.values)).flatMap(item => item.flat()),
+              },
+            ]
+          : [],
+    metafields: normalizeMetafields(metafields, metafieldNamespacePrefix) || {},
+  }
+}

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

@@ -0,0 +1,5 @@
+// 这个文件现在只保留 helper 函数，其他功能已迁移到 ShopifyContext
+import { getThemeLocale } from './helper'
+
+// 导出 helper 函数供其他地方使用
+export { getThemeLocale }

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

@@ -0,0 +1,7 @@
+export type PartialRecord<K extends string | number | symbol, T> = Partial<
+  Record<K, T>
+>
+
+export type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type Replace<T, K extends keyof T, V> = Omit<T, K> & { [P in K]: V }

package/src/lib/utils/classnames.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const classNames = (...inputs: ClassValue[])=> {
+  return twMerge(clsx(inputs))
+}

package/src/lib/utils/fetcher/fetchResponse.ts

@@ -0,0 +1,34 @@
+export async function getAsyncError(res: { json: () => any; status: any; statusText: any }) {
+  try {
+    const result = await res.json()
+    const resultdata = result?.data || result
+    return {
+      status: res.status,
+      statusText: res.statusText,
+      errors: resultdata?.error || resultdata?.code || res.statusText || res.status,
+      type: resultdata?.type,
+      data: resultdata,
+      message: resultdata?.message || result?.message,
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+export 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)
+}

package/src/lib/utils/fetcher/fetcher.ts

@@ -0,0 +1,39 @@
+import { handleFetchResponse } from './fetchResponse'
+
+export 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',
+    credentials: 'include',
+    headers: {
+      'current-language': locale,
+      ...headers,
+    },
+    ...(timeout && { signal: controller.signal }),
+    ...(method !== 'GET' && { body: bodyData }),
+  })
+  return handleFetchResponse(data)
+}

package/src/lib/utils/fetcher/index.ts

@@ -0,0 +1,2 @@
+export * from './fetcher'
+export * from './fetchResponse'

package/src/lib/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './classnames'
+export * from './fetcher'
+export * from './track'
+export * from './useCountDown'

package/src/lib/utils/track.ts

@@ -0,0 +1,57 @@
+declare global {
+  interface Window {
+    dataLayer?: Array<any>
+    fbq?: (...args: any[]) => void
+    klaviyo?: any
+    gtag?: (...args: any[]) => void
+  }
+}
+
+// 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)
+  }
+}
+
+export function gaNormalClick({ position, label }: { position: string; label: string }) {
+  gaTrack({
+    event: 'ga4Event',
+    event_name: 'lp_button',
+    event_parameters: {
+      page_group: 'soundcoreCredits Rewards Program',
+      position: position,
+      button_name: label,
+    },
+  })
+}
+
+// facebook 埋点
+export const fbq = (...args: any[]) => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  if (window.fbq) {
+    window.fbq(...args)
+  }
+}
+
+export const gtag = (...args: any[]) => {
+  if (typeof window === 'undefined') {
+    return ''
+  }
+  if (window.gtag) {
+    window.gtag(...args)
+  }
+}

package/src/lib/utils/useCountDown.tsx

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export function useCountDown(countDownTime: number, onEnd = () => {}) {
+  const [start, setStart] = useState(false)
+  const [countDown, setCountDown] = useState(countDownTime)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+
+  const startAction = useCallback(() => {
+    if (!start) {
+      setCountDown(countDownTime)
+      setStart(true)
+    }
+  }, [start, countDownTime])
+
+  useEffect(() => {
+    if (start) {
+      if (countDown > 0) {
+        timerRef.current = setTimeout(() => {
+          setCountDown(countDown - 1)
+        }, 1000)
+      } else {
+        setStart(false)
+        if (onEnd) {
+          onEnd()
+        }
+      }
+    }
+
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current)
+      }
+    }
+  }, [start, countDown, onEnd])
+
+  return {
+    startCountDown: start,
+    startAction,
+    countDown,
+  }
+}

package/src/templates/Credits.tsx

@@ -1,4 +1,4 @@
-import { classNames, HeadlessProvider } from '@anker-in/lib'
+import { classNames, HeadlessProvider } from '../lib'
 import { useEffect, useRef } from 'react'
 import { RegistrationProvider } from '../components/registration/context/provider'
 import { CreditsProvider, useCreditsContext } from '../components/credits/context/provider'

package/src/templates/Credits.types.ts

@@ -1,4 +1,4 @@
-import { HeadlessConfig } from '@anker-in/lib'
+import { HeadlessConfig } from '../lib'
 import { DTC_TASK_TYPE } from '../components/credits/context/const'
 import { CreditsPageCommon } from '../components/credits/type'
 import { FunctionMemberPriceConfig } from '../components/credits/context/memberPriceTypes'

package/tailwind.config.ts

@@ -3,11 +3,7 @@ import type { Config } from 'tailwindcss'
 export default {
   // 添加前缀避免与主项目冲突
   prefix: 'cmp-',
-  content: [
-    './src/components/**/*.{js,jsx,ts,tsx}',
-    './src/icons/**/*.{js,jsx,ts,tsx}',
-    '../storybook/.storybook/**/*.{js,jsx,ts,tsx}',
-  ],
+  content: ['./src/components/**/*.{js,jsx,ts,tsx}', './src/icons/**/*.{js,jsx,ts,tsx}'],
   // 禁用 preflight 避免覆盖主项目的基础样式
   corePlugins: {
     preflight: false,