@anker-in/campaign-ui 0.1.10 → 0.2.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.1.10",
-  "type": "commonjs",
+  "version": "0.2.0",
+  "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
-  "types": "./dist/cjs/index.d.ts",
   "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
   "exports": {
     ".": {
       "require": {
@@ -16,15 +16,17 @@
         "default": "./dist/esm/index.js"
       }
     },
-    "./*": "./*",
-    "./chat.css": "./src/styles/chat.css"
+    "./tailwind.config": "./tailwind.config.ts",
+    "./style.css": "./style.css",
+    "./chat.css": "./src/styles/chat.css",
+    "./*": "./*"
   },
-  "description": "",
   "files": [
     "src/**",
     "dist/**",
     "styles/**",
     "*.css",
+    "tailwind.config.ts",
     "README.md",
     "CONTRIBUTING.md"
   ],
@@ -33,23 +35,6 @@
     "**/*.css",
     "**/**/*.css"
   ],
-  "scripts": {
-    "dev": "pnpm run dev:css & pnpm run dev:js:esm & pnpm run dev:js:cjs & pnpm run dev:js:esm:types & pnpm run dev:js:cjs:types",
-    "dev:js:cjs": "node esbuild-cjs.mjs watch=true",
-    "dev:js:cjs:types": "tsc --watch --incremental --outdir dist/cjs",
-    "dev:js:esm": "node esbuild-esm.mjs watch=true",
-    "dev:js:esm:types": "tsc --watch --incremental --outdir dist/esm",
-    "dev:css": "postcss src/styles/global.css -o style.css --watch",
-    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
-    "build:js:cjs": "node esbuild-cjs.mjs",
-    "build:js:cjs:types": "tsc --outdir dist/cjs",
-    "build:js:esm": "node esbuild-esm.mjs",
-    "build:js:esm:types": "tsc --outdir dist/esm",
-    "build:css": "postcss src/styles/chat.css -o style.css",
-    "lint": "eslint \"src/**/*.ts*\"",
-    "test": "echo run @anker-in/campaign-ui tests",
-    "clean": "rm -rf .turbo node_modules dist style.css"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -62,21 +47,26 @@
     "@types/jest": "^29.5.12",
     "@types/node": "^20",
     "babel-jest": "^29.7.0",
-    "esbuild": "^0.20.2",
-    "esbuild-style-plugin": "^1.6.3",
+    "esbuild": "^0.19.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-require-extensions": "^0.1.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss-cli": "^11.0.0",
     "react-test-renderer": "^18.3.1",
-    "stylelint": "^16.6.0"
+    "stylelint": "^16.6.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@copilotkit/react-core": "1.8.11",
-    "@copilotkit/react-ui": "1.8.11",
-    "@copilotkit/runtime-client-gql": "1.8.11",
-    "@copilotkit/shared": "1.8.11",
+    "@copilotkit/react-core": "1.1.2",
+    "@copilotkit/react-ui": "1.1.2",
+    "@copilotkit/runtime-client-gql": "1.1.2",
+    "@copilotkit/shared": "1.1.2",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -88,13 +78,36 @@
     "autoprefixer": "^10.4.19",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.7",
     "gsap": "^3.12.5",
     "monaco-editor": "^0.52.0",
     "postcss": "^8.4.38",
-    "react": "^18.3.1",
     "react-codepen-embed": "^1.1.0",
-    "react-dom": "^18.3.1",
+    "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3"
+    "tailwindcss": "^3.4.3",
+    "@anker-in/headless-ui": "1.0.26",
+    "@anker-in/lib": "1.1.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "exclude": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "dev": "pnpm run dev:css & tsup --watch",
+    "dev:css": "postcss src/styles/global.css -o style.css --watch",
+    "build": "pnpm run build:css & pnpm run build:js:esm & pnpm run build:js:cjs & pnpm run build:js:esm:types & pnpm run build:js:cjs:types",
+    "build:js:cjs": "node esbuild-cjs.mjs",
+    "build:js:cjs:types": "tsc --outdir dist/cjs",
+    "build:js:esm": "node esbuild-esm.mjs",
+    "build:js:esm:types": "tsc --outdir dist/esm",
+    "build:css": "postcss src/styles/global.css -o style.css",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "echo run @anker-in/campaign-ui tests",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf .turbo node_modules dist style.css"
   }
 }

package/src/components/chat/button.tsx

@@ -1,6 +1,6 @@
 import { useChatContext } from '@copilotkit/react-ui'
 
-import type { ButtonProps } from './props.js'
+import type { ButtonProps } from './props'
 
 const DefaultButton = ({ setOpen }: ButtonProps) => {
   const context = useChatContext()

package/src/components/chat/index.tsx

@@ -3,12 +3,12 @@ import React, { useMemo } from 'react'
 import { useCallback, useState, useEffect } from 'react'
 import { CopilotKit } from '@copilotkit/react-core'
 import { CopilotPopup } from '@copilotkit/react-ui'
-import DefaultButton from './button.js'
-import Messages from './messages.js'
-import ResponseButton from './response.js'
-import Suggestions from './suggestions.js'
-import { CopilotAction } from './action.js'
-import fetcher from '../../helpers/fetcher.js'
+import DefaultButton from './button'
+import Messages from './messages'
+import ResponseButton from './response'
+import Suggestions from './suggestions'
+import { CopilotAction } from './action'
+import fetcher from '../../helpers/fetcher'
 
 export interface ChatProps {
   title: string

package/src/components/chat/messages.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import type { MessagesProps } from './props.js'
+import type { MessagesProps } from './props'
 import { useChatContext } from '@copilotkit/react-ui'
-import { Markdown } from './markdown.js'
+import { Markdown } from './markdown'
 import { type RenderFunctionStatus, useCopilotContext } from '@copilotkit/react-core'
 import {
   MessageStatusCode,

package/src/components/chat/response.tsx

@@ -8,10 +8,7 @@ const ResponseButton = ({ messagesId }: { messagesId: string }) => {
 
   return (
     !isLoading && (
-      <button
-        onClick={() => (isLoading ? stopGeneration() : reloadMessages(messagesId))}
-        className="copilotKitResponseButton"
-      >
+      <button onClick={() => (isLoading ? stopGeneration() : reloadMessages())} className="copilotKitResponseButton">
         {isLoading ? context.labels.stopGenerating : context.labels.regenerateResponse}
         <span>{isLoading ? context.icons.stopIcon : context.icons.regenerateIcon}</span>
       </button>

package/src/components/chat/suggestions.tsx

@@ -1,7 +1,7 @@
 import { useCopilotChat } from '@copilotkit/react-core'
 import { Role, TextMessage } from '@copilotkit/runtime-client-gql'
 
-import type { SuggestionsProps, ChatSuggestions } from './props.js'
+import type { SuggestionsProps, ChatSuggestions } from './props'
 
 const Suggestions = ({ currentSuggestions }: ChatSuggestions) => {
   const { appendMessage } = useCopilotChat()

package/src/components/credits/context/const.ts

@@ -0,0 +1,104 @@
+export enum CreditType {
+  All = 0,
+  Earned = 1,
+  Deducted = 2,
+  Expired = 3,
+}
+
+export enum ConsumeType {
+  Coupon = 'coupon',
+  GiftCard = 'giftCard',
+  GoGift = 'goGift',
+  Product = 'product',
+  ShippingCoupon = 'shippingCoupon',
+}
+
+export enum AlpcConsumeType {
+  Coupon = 1,
+  Product = 2,
+}
+
+export enum TaskType {
+  Program = 1,
+  Operation = 2,
+  Redeem = 3,
+}
+
+export enum DTC_TASK_TYPE {
+  FirstPurchase = 'firstPurchase',
+  UploadReceipt = 'uploadReceipt',
+  Shopping = 'shopping',
+}
+
+export enum TaskSubType {
+  Activation = 1, // 激活事件
+  UpdateName = 2, // 完善姓名
+  UpdatePhone = 3, // 更新手机号
+  UpdateBirthday = 4, // 更新生日
+  Subscription = 5, // 订阅
+  UpadteAppName = 7, // 完善APP姓名
+  Refund = 3000, // 购物送积分任务退款
+  ProductUnApproved = 5000, // 兑换商品审核不通过
+}
+
+export enum CouponType {
+  FixedMount = 'fixed_amount',
+  Percent = 'percent',
+}
+
+export enum RewardType {
+  Received = 0,
+  Pending = 1,
+  ApproveSuccess = 2,
+  ApproveFail = 3,
+  Unfulfilled = 4,
+  Fulfilled = 5,
+  Failed = 6,
+}
+
+export enum AlpcErrorCode {
+  CodeLpcRedeemFailed = 180001,
+  //user not found
+  CodeLpcUserNotFound = 180002,
+  //credit rule not found
+  CodeLpcCreditRuleNotFound = 180003,
+  //unknown error
+  CodeLpcUnknownError = 180004,
+  // not enough credits
+  CodeLpcNotEnoughCredits = 180005,
+  // user migrate
+  CodeLpcUserMigrate = 180006,
+  // 库存不足
+  CodeLpcRuleInventoryNotEnough = 180007,
+  // 兑换次数限制
+  CodeLpcShopifyCouponRuleRedeemLimit = 180009,
+  // 跨区兑换错误（非欧兑换欧洲的）
+  CodeCrossSiteError = 180011,
+}
+
+export const ALPC_COUNTRY_MAP = new Map<string, string>([
+  ['eu-en', 'eu'],
+  ['eu-de', 'de'],
+])
+
+export enum ApprovalStatus {
+  Pending = 0,
+  Success = 1,
+  Failed = 2,
+  DoubleConfirm = 3,
+}
+
+export const PRICE_SYMBOL = {
+  us: '$',
+  uk: '£',
+  ca: '$',
+  eu: '€',
+  pl: 'zł',
+  fr: '€',
+  de: '€',
+  vn: '₫',
+  cl: '$',
+  sg: '$',
+  ae: 'AED',
+  es: '€',
+}

package/src/components/credits/context/hooks/useActivities.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { useAlpcMutation } from './useAlpcFetch'
+import type { CreditLogResponse } from '../response'
+import { useCreditsContext } from '../provider'
+import { useHeadlessContext } from '@anker-in/lib'
+
+function useActivities({ page, pageSize, options = {} }: { page: number; pageSize: number; options?: any }) {
+  const { profile, isLoadingProfile } = useCreditsContext()
+  const { brand } = useHeadlessContext()
+  const [activities, setActivities] = useState<CreditLogResponse[]>([])
+  const [total, setTotal] = useState(0)
+
+  const [currentPage, setCurrentPage] = useState(0)
+
+  const { isMutating: isLoading, trigger } = useAlpcMutation<
+    {
+      data: {
+        total: number
+        creditLogs: CreditLogResponse[]
+      }
+    },
+    {
+      page: number
+      page_size: number
+      user_id: string
+    }
+  >({
+    url: `/v1/credit/log`,
+    initData: {
+      brand,
+    },
+  })
+
+  const getActivities = useCallback(async () => {
+    const params = {
+      page: page,
+      page_size: pageSize,
+      user_id: profile?.user_id,
+      ...options,
+    }
+
+    trigger(params, {
+      onSuccess(responseData) {
+        setCurrentPage(page)
+        setTotal(responseData?.data?.total)
+        setActivities(activities.concat(responseData?.data?.creditLogs || []))
+      },
+    })
+  }, [activities, profile, page, pageSize, options, trigger])
+
+  useEffect(() => {
+    if (isLoadingProfile || !profile || isLoading) {
+      return
+    }
+
+    if (page !== currentPage && page) {
+      getActivities()
+    }
+  }, [getActivities, isLoadingProfile, isLoading, profile, page, currentPage])
+
+  return {
+    activities,
+    isLoading,
+    total,
+    canNext: total > activities.length && !isLoading,
+  }
+}
+
+export default useActivities

package/src/components/credits/context/hooks/useAddressValidate.ts

@@ -0,0 +1,281 @@
+import { useCallback, useMemo, useState } from 'react'
+import { emailValidate } from '../utils'
+import { useHeadlessContext } from '@anker-in/lib'
+
+type ValidatorCallback = (value: string, params?: Record<string, any>) => boolean
+
+const US_SPECIAL_CHARACTERS = /[&%*<>^#;-]/
+const EU_SPECIAL_CHARACTERS = /[&^*%<>;,?]/
+const SC_CHARACTERS = /[^a-zA-Z0-9\s]/
+const PURE_DIGITAL = /^\d+(\s+\d+)*$/
+const PACKSTATION = /(Packstation|Postfiliale)/gi
+const POBOX = /(P(\.)?\s*?O(\.)?\s*?box|Post(al)?(\s*)?(Office(\s*))?Box)/gi
+
+const ruleValidators: Record<string, ValidatorCallback> = {
+  minLength: (value, params) => value?.length > 0 && value?.length < params?.length,
+  maxLength: (value, params) => value?.length > params?.length,
+  isUSSpecialCharacters: value => US_SPECIAL_CHARACTERS.test(value),
+  isEUSpecialCharacters: value => EU_SPECIAL_CHARACTERS.test(value),
+  isSC: value => SC_CHARACTERS.test(value),
+  isPureDigital: value => PURE_DIGITAL.test(value),
+  isPackstation: value => PACKSTATION.test(value),
+  isPobox: value => POBOX.test(value),
+}
+
+export interface Rule {
+  key: string
+  error: string
+  rule?: string
+  params?: Record<string, any>
+  required?: boolean
+  validator?: (value: string, key: string, address: Record<string, any>) => boolean | string
+}
+
+export type FormData = {
+  key: string
+  label: string
+  tips: string
+  required: boolean
+  placeholder: string
+  type?: string
+}[]
+
+// 国家/地区配置映射
+const LOCALE_CONFIGS = {
+  us: {
+    nameRules: ['isUSSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isUSSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital'],
+      address2: ['isPobox', 'isUSSpecialCharacters', 'maxLength', 'isPureDigital'],
+    },
+    addressLengths: { min: 4, max: 32 },
+  },
+  'eu-en': {
+    nameRules: ['isEUSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isEUSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital', 'isPackstation'],
+      address2: ['isPobox', 'isEUSpecialCharacters', 'maxLength', 'isPackstation'],
+    },
+    addressLengths: { min: 3, max: 70 },
+  },
+  uk: {
+    nameRules: ['isEUSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isEUSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital'],
+      address2: ['isPobox', 'isEUSpecialCharacters', 'maxLength'],
+    },
+    addressLengths: { min: 3, max: 35 },
+  },
+  'eu-de': {
+    nameRules: ['isEUSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'isEUSpecialCharacters', 'minLength', 'maxLength', 'isPureDigital', 'isPackstation'],
+      address2: ['isPobox', 'isPackstation', 'isEUSpecialCharacters', 'maxLength'],
+    },
+    addressLengths: { min: 3, max: 35 },
+  },
+  ca: {
+    nameRules: ['isUSSpecialCharacters'],
+    addressRules: {
+      address1: ['isPobox', 'maxLength'],
+      address2: ['isPobox', 'maxLength'],
+    },
+    addressLengths: { max: 35 },
+  },
+}
+
+// 城市规则配置
+const CITY_CONFIGS = {
+  uk: { rules: ['isEUSpecialCharacters', 'minLength', 'maxLength'], lengths: { min: 2, max: 35 } },
+  'eu-en': { rules: ['isEUSpecialCharacters', 'minLength', 'maxLength'], lengths: { min: 2, max: 35 } },
+  'eu-de': { rules: ['isEUSpecialCharacters', 'minLength', 'maxLength'], lengths: { min: 2, max: 35 } },
+  ca: { rules: ['minLength', 'maxLength'], lengths: { min: 2, max: 15 } },
+}
+
+export const useAddressValidate = ({
+  address,
+  validatorInfo,
+  formData,
+  errorLabel,
+}: {
+  address: Record<string, any>
+  validatorInfo: any
+  formData: any
+  errorLabel: {
+    require: string
+    email: string
+  }
+}) => {
+  const { locale } = useHeadlessContext()
+  const [errors, setErrors] = useState<{ key: string; message: string }[]>([])
+
+  const addressRules: Rule[] = useMemo(() => {
+    const {
+      city_rules = {},
+      name_rules = {},
+      address1_rules,
+      address2_rules,
+      POboxErr,
+      packstationErr,
+    } = validatorInfo || {}
+
+    const localeConfig = LOCALE_CONFIGS[locale as keyof typeof LOCALE_CONFIGS]
+    const cityConfig = CITY_CONFIGS[locale as keyof typeof CITY_CONFIGS]
+
+    // 基础规则
+    const baseRules: Rule[] = [
+      // 表单字段规则
+      ...formData.map((item: any) => ({
+        key: item.key,
+        required: item.required,
+        error: errorLabel.require || 'This field is required',
+      })),
+
+      // 邮箱校验
+      {
+        key: 'email',
+        error: errorLabel.email || 'Invalid email format',
+        validator(value) {
+          return !emailValidate(value)
+        },
+      },
+
+      // 姓名规则
+      {
+        key: 'first_name',
+        required: true,
+        error: errorLabel.require || 'First name is required',
+      },
+      {
+        key: 'last_name',
+        required: true,
+        error: errorLabel.require || 'Last name is required',
+      },
+      {
+        key: 'name',
+        error: name_rules.maxLengthErr || errorLabel.require || 'Name is too long',
+        validator: value => value?.length >= 31,
+      },
+    ]
+
+    // 城市规则
+    const cityRules: Rule[] = cityConfig
+      ? cityConfig.rules.map(rule => {
+          const ruleConfig: Rule = { key: 'city', rule, error: '' }
+
+          if (rule === 'minLength') {
+            ruleConfig.params = { length: cityConfig.lengths.min }
+            ruleConfig.error = city_rules.minLengthErr || errorLabel.require || 'City is too short'
+          } else if (rule === 'maxLength') {
+            ruleConfig.params = { length: cityConfig.lengths.max }
+            ruleConfig.error = city_rules.maxLengthErr || errorLabel.require || 'City is too long'
+          } else if (rule === 'isEUSpecialCharacters') {
+            ruleConfig.error = city_rules.characterErr || errorLabel.require || 'Invalid characters in city'
+          }
+
+          return ruleConfig
+        })
+      : []
+
+    // 姓名特殊字符规则
+    const nameRules: Rule[] =
+      localeConfig?.nameRules
+        .map(rule => ({
+          key: 'first_name',
+          rule,
+          error: name_rules.characterErr,
+        }))
+        .concat(
+          localeConfig?.nameRules.map(rule => ({
+            key: 'last_name',
+            rule,
+            error: name_rules.characterErr,
+          })) || []
+        ) || []
+
+    // 地址规则
+    const addressRules: Rule[] = localeConfig
+      ? Object.entries(localeConfig.addressRules).flatMap(([addressKey, rules]) =>
+          rules.map(rule => {
+            const ruleConfig: Rule = { key: addressKey, rule, error: '' }
+            const rulesConfig = addressKey === 'address1' ? address1_rules : address2_rules
+
+            if (rule === 'isPobox') {
+              ruleConfig.error = POboxErr || errorLabel.require || 'PO Box not allowed'
+            } else if (rule === 'isPackstation') {
+              ruleConfig.error = packstationErr || errorLabel.require || 'Packstation not allowed'
+            } else if (rule === 'isUSSpecialCharacters' || rule === 'isEUSpecialCharacters') {
+              ruleConfig.error = rulesConfig?.characterErr || errorLabel.require || 'Invalid characters'
+            } else if (rule === 'minLength') {
+              ruleConfig.params = { length: 'min' in localeConfig.addressLengths ? localeConfig.addressLengths.min : 0 }
+              ruleConfig.error = rulesConfig?.minLengthErr || errorLabel.require || 'Address is too short'
+            } else if (rule === 'maxLength') {
+              ruleConfig.params = { length: localeConfig.addressLengths.max }
+              ruleConfig.error = rulesConfig?.maxLengthErr || errorLabel.require || 'Address is too long'
+            } else if (rule === 'isPureDigital') {
+              ruleConfig.error = rulesConfig?.pureDigitalErr || errorLabel.require || 'Address cannot be only numbers'
+            }
+
+            return ruleConfig
+          })
+        )
+      : []
+
+    return [...baseRules, ...cityRules, ...nameRules, ...addressRules]
+  }, [locale, validatorInfo, formData, errorLabel])
+
+  const validate = useCallback(
+    ({ force, ignoreKeys }: { force?: boolean; ignoreKeys?: string[] }) => {
+      let newErrors: { key: string; message: string }[] = []
+
+      addressRules.forEach(({ key, rule, params, required, error, validator }) => {
+        const defaultValidator = rule ? ruleValidators[rule] : undefined
+
+        let result
+
+        const value = address[key]
+
+        if (ignoreKeys?.includes(key)) {
+          return
+        }
+
+        if (value === undefined && !force) {
+          return
+        }
+
+        if (newErrors.find(item => item.key == key)) {
+          return
+        }
+
+        if (required && !value) {
+          result = error
+        } else if (validator) {
+          result = validator(value, key, address)
+        } else if (defaultValidator) {
+          result = defaultValidator(value, params)
+        }
+
+        if (result) {
+          newErrors.push({
+            key,
+            message: typeof result === 'string' ? result : error,
+          })
+        }
+      })
+
+      setErrors(newErrors)
+
+      if (newErrors.length) {
+        return true
+      }
+
+      return false
+    },
+    [address, addressRules]
+  )
+
+  return {
+    validate,
+    errors,
+  }
+}