@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.21

package/src/components/LiveChatWidget/components/MessageContent/ProductComparison.tsx

@@ -0,0 +1,348 @@
+/**
+ * 产品对比组件
+ * 显示多个产品的对比信息，采用表格布局展示各维度差异
+ * 基于参考设计：顶部产品展示 + 底部对比表格
+ */
+
+import React, { useState } from 'react'
+import type { Product, MessageRenderer } from '../../types'
+
+/**
+ * 对比维度数据结构
+ */
+interface ComparisonDimension {
+  label: string
+  values: Array<{
+    product_id: string
+    [key: string]: any
+  }>
+}
+
+/**
+ * 产品对比数据结构
+ */
+export interface ProductComparisonData {
+  products: Product[]
+  dimensions: {
+    price?: ComparisonDimension
+    variants?: ComparisonDimension
+    member_price?: ComparisonDimension
+    discount?: ComparisonDimension
+    [key: string]: ComparisonDimension | undefined
+  }
+}
+
+export interface ProductComparisonProps {
+  /**
+   * 产品对比数据
+   */
+  data: ProductComparisonData
+
+  /**
+   * 是否为用户消息
+   */
+  isUser?: boolean
+
+  /**
+   * 是否为系统消息
+   */
+  isSystem?: boolean
+
+  /**
+   * 添加到购物车回调
+   */
+  onAddToCart?: (product: Product) => void
+}
+
+/**
+ * 格式化价格显示
+ */
+const formatPrice = (amount: number, currency: string = 'USD'): string => {
+  const symbol = currency === 'USD' ? '$' : currency
+  return `${symbol}${amount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`
+}
+
+/**
+ * 产品对比组件
+ *
+ * 布局：
+ * ```
+ * ┌─────────────────────────────────────┐
+ * │  [产品1图片]    [产品2图片]         │
+ * │   价格1          价格2              │
+ * │   颜色选项       颜色选项            │
+ * ├─────────────────────────────────────┤
+ * │ 维度1   │  值1-1   │   值1-2        │
+ * │ 维度2   │  值2-1   │   值2-2        │
+ * │ 维度3   │  值3-1   │   值3-2        │
+ * └─────────────────────────────────────┘
+ * ```
+ */
+export const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAddToCart }) => {
+  const { products: rawProducts, dimensions } = data
+
+  // 过滤掉 null 或无效的产品
+  const allProducts = rawProducts?.filter(p => p && p.shopifyId) || []
+
+  // 对比列数（固定为2列）
+  const COMPARISON_COLUMNS = 2
+
+  // 初始化每个对比位置的选中产品（默认取前两个产品）
+  const initialSelectedProducts = allProducts.slice(0, COMPARISON_COLUMNS)
+  const [selectedProducts, setSelectedProducts] = useState<Product[]>(initialSelectedProducts)
+
+  // Early return 必须在所有 hooks 之后
+  if (allProducts.length === 0) {
+    return null
+  }
+
+  // 处理产品选择变更
+  const handleProductChange = (index: number, productId: string) => {
+    const newProduct = allProducts.find(p => p.shopifyId === productId)
+    if (newProduct) {
+      const newSelectedProducts = [...selectedProducts]
+      newSelectedProducts[index] = newProduct
+      setSelectedProducts(newSelectedProducts)
+    }
+  }
+
+  // 当前显示的产品（确保只显示指定列数）
+  const products = selectedProducts.slice(0, COMPARISON_COLUMNS)
+
+  /**
+   * 获取指定产品在某个维度的值
+   */
+  const getDimensionValue = (dimension: ComparisonDimension, productId: string): any => {
+    if (!dimension || !dimension.values || !Array.isArray(dimension.values)) {
+      return null
+    }
+    return dimension.values.find(v => v && v.product_id === productId)
+  }
+
+  /**
+   * 渲染通用对比行
+   */
+  const renderComparisonRow = (label: string, dimension: ComparisonDimension | undefined) => {
+    if (!dimension) return null
+
+    return (
+      <div className="border-b border-[#DADCE0] pb-2">
+        {/* 维度标签（标题） */}
+        <div className="mb-3">
+          <span className="text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]">{label}</span>
+        </div>
+
+        {/* 产品值列表（横向排列） */}
+        <div className="flex gap-4" style={{ gap: '36px' }}>
+          {products.map((product, index) => {
+            if (!product || !product.shopifyId) return null
+            const value = getDimensionValue(dimension, product.shopifyId)
+
+            return (
+              <div key={`comparison-${index}`} className="flex-1">
+                {renderDimensionValue(value, dimension.label)}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  /**
+   * 渲染维度值
+   */
+  const renderDimensionValue = (value: any, dimensionLabel: string) => {
+    if (!value) {
+      return <span className="text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">-</span>
+    }
+
+    // 根据不同维度类型渲染不同格式
+    if (dimensionLabel.toLowerCase().includes('price')) {
+      // 价格维度
+      const priceDisplay =
+        value.min === value.max
+          ? formatPrice(value.min, value.currency)
+          : `${formatPrice(value.min, value.currency)} - ${formatPrice(value.max, value.currency)}`
+      return <span className="text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">{priceDisplay}</span>
+    }
+
+    if (dimensionLabel.toLowerCase().includes('variant')) {
+      // 变体数量
+      return (
+        <span className="text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">
+          {value.count || 0} {value.count === 1 ? 'variant' : 'variants'}
+        </span>
+      )
+    }
+
+    // 默认显示
+    return (
+      <span className="text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">
+        {value.display || value.value || '-'}
+      </span>
+    )
+  }
+
+  return (
+    <div className="w-full overflow-hidden rounded-2xl bg-[#F5F6F7]">
+      {/* 顶部产品展示区域 */}
+      <div className="flex  p-4" style={{ gap: '36px', paddingBottom: '0px' }}>
+        {products.map((product, index) => {
+          if (!product || !product.shopifyId) return null
+
+          // 获取价格信息
+          const priceInfo = dimensions.price ? getDimensionValue(dimensions.price, product.shopifyId) : null
+
+          // 获取折扣信息
+          const firstVariant = product.variants?.[0]
+          const hasDiscount = firstVariant?.discount?.has_discount
+          const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null
+
+          // 当前显示价格：有折扣时显示折扣价，否则显示原价
+          const currentPrice = discountPrice || priceInfo?.min || product.price.amount
+          const originalPrice = product.price.amount
+
+          // Add to Cart 按钮点击处理
+          const handleAddToCart = (e: React.MouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            if (onAddToCart) {
+              onAddToCart(product)
+            }
+          }
+
+          return (
+            <div key={`product-column-${index}`} className="flex flex-1 flex-col items-center">
+              {/* 产品选择下拉框 */}
+              <div className="mb-4 w-full">
+                <select
+                  value={product.shopifyId}
+                  onChange={e => handleProductChange(index, e.target.value)}
+                  className="w-full rounded-lg border border-[#DADCE0] bg-[#F5F6F7] px-3 py-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]"
+                  style={{
+                    appearance: 'none',
+                    backgroundImage:
+                      "url(\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\")",
+                    backgroundRepeat: 'no-repeat',
+                    backgroundPosition: 'right 12px center',
+                    paddingRight: '32px',
+                  }}
+                >
+                  {allProducts.map(p => (
+                    <option key={p.shopifyId} value={p.shopifyId}>
+                      {p.title.length > 30 ? `${p.title.slice(0, 30)}...` : p.title}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* 产品图片 */}
+              <a
+                href={product.productUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="mb-4 block w-full max-w-[160px]"
+              >
+                <div className="aspect-square w-full overflow-hidden rounded-lg">
+                  {product.imageUrl ? (
+                    <img
+                      src={product.imageUrl}
+                      alt={product.title}
+                      className="size-full object-contain"
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className="flex size-full items-center justify-center text-gray-400">
+                      <svg className="size-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        />
+                      </svg>
+                    </div>
+                  )}
+                </div>
+              </a>
+
+              {/* 价格展示（带划线价） */}
+              <div className="mb-4 flex flex-col items-center gap-1">
+                <div className="flex items-center gap-2">
+                  {/* 当前价格（折扣价或原价） */}
+                  <span className="text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]">
+                    {formatPrice(currentPrice, priceInfo?.currency || product.price.currency)}
+                  </span>
+                  {/* 划线价 - 仅在有折扣时显示 */}
+                  {hasDiscount && discountPrice && (
+                    <span className="text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through">
+                      {formatPrice(originalPrice, product.price.currency)}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Add to Cart 按钮 */}
+              {onAddToCart && (
+                <button
+                  type="button"
+                  onClick={handleAddToCart}
+                  className="mb-3 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white"
+                  style={{ backgroundColor: '#1D1D1F' }}
+                >
+                  Add to Cart
+                </button>
+              )}
+
+              {/* 颜色选项（如果有variants） */}
+              {product.variants && product.variants.length > 1 && (
+                <div className="flex gap-2">
+                  {product.variants.slice(0, 3).map((variant, idx) => (
+                    <div
+                      key={variant.id || idx}
+                      className="size-6 rounded-full border-2 border-[#DADCE0]"
+                      style={{ backgroundColor: variant.color || '#000' }}
+                      title={variant.title}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* 对比表格区域 */}
+      <div className="flex flex-col gap-4 p-4">
+        {/* 遍历所有维度并渲染 */}
+        {Object.entries(dimensions).map(([key, dimension]) => {
+          if (!dimension || key === 'price') return null // price 已在顶部显示
+          return <div key={key}>{renderComparisonRow(dimension.label, dimension)}</div>
+        })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 创建产品对比渲染器
+ */
+export const ProductComparisonRenderer: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    if (content.type !== 'product_comparison' || !content.data) {
+      return null
+    }
+
+    const comparisonData = content.data as ProductComparisonData & { onAddToCart?: (product: Product) => void }
+
+    return (
+      <ProductComparison
+        data={comparisonData}
+        isUser={isUser}
+        isSystem={isSystem}
+        onAddToCart={comparisonData.onAddToCart}
+      />
+    )
+  },
+}

package/src/components/LiveChatWidget/components/MessageContent/ProductList.tsx

@@ -0,0 +1,275 @@
+/**
+ * 商品列表渲染器
+ * 显示多个商品的纵向列表，支持展开/收起
+ * 基于 specs/livechat-widget/data-model.md 的商品数据模型
+ */
+
+import React, { useState } from 'react'
+import type { MessageRenderer, ProductListContent, Product } from '../../types'
+import { CURRENCY_SYMBOLS } from '../../constants.js'
+
+/**
+ * 格式化价格
+ */
+function formatPrice(price: Product['price']): string {
+  const { amount, currency } = price
+
+  const symbol = CURRENCY_SYMBOLS[currency] || currency
+  return `${symbol}${amount.toFixed(2)}`
+}
+
+/**
+ * 格式化折扣标签文本
+ * @param discount 折扣对象
+ * @param currency 货币代码
+ * @returns 格式化后的折扣文本（如 "$10 OFF" 或 "20% OFF"）
+ */
+function formatDiscountLabel(
+  discount: { discount_type?: string; discount_value?: string | number },
+  currency: string
+): string {
+  if (!discount.discount_type || discount.discount_value === undefined) {
+    return ''
+  }
+
+  // 将 discount_value 转换为数字
+  const value =
+    typeof discount.discount_value === 'string' ? parseFloat(discount.discount_value) : discount.discount_value
+
+  if (isNaN(value)) {
+    return ''
+  }
+
+  if (discount.discount_type === 'percentage') {
+    return `${Math.round(value)}% OFF`
+  }
+
+  if (discount.discount_type === 'fixed_amount') {
+    const symbol = CURRENCY_SYMBOLS[currency] || currency
+    return `${symbol}${Math.round(value)} OFF`
+  }
+
+  return ''
+}
+
+/**
+ * 紧凑型商品卡片（用于纵向列表）
+ */
+const CompactProductCard: React.FC<{
+  product: Product
+  onAddToCart?: (product: Product) => void
+}> = ({ product, onAddToCart }) => {
+  const { title, description, price, imageUrl, productUrl, stockStatus, averageRating, variants } = product
+
+  const isOutOfStock = stockStatus === 'out_of_stock'
+
+  // 获取第一个变体的折扣信息
+  const firstVariant = variants?.[0]
+  const hasDiscount = firstVariant?.discount?.has_discount
+  const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null
+  const discount = firstVariant?.discount
+
+  // 当前显示价格：有折扣时显示折扣价，否则显示原价
+  const currentPrice = discountPrice ? { amount: discountPrice, currency: price.currency } : price
+
+  // 格式化折扣标签
+  const discountLabel = discount && hasDiscount ? formatDiscountLabel(discount, price.currency) : ''
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (onAddToCart) {
+      onAddToCart(product)
+    }
+  }
+
+  return (
+    <div className="block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow hover:shadow-md">
+      <a href={productUrl} target="_blank" rel="noopener noreferrer" className="block">
+        <div className="flex gap-2 p-4">
+          {/* 商品图片 */}
+          <div className=" flex shrink-0 items-center overflow-hidden rounded-md " style={{ width: '40%' }}>
+            <img
+              src={imageUrl}
+              alt={title}
+              className={`h-auto w-full object-cover ${isOutOfStock ? 'opacity-50' : ''}`}
+              loading="lazy"
+            />
+          </div>
+
+          {/* 商品信息 */}
+          <div className="flex flex-1 flex-col justify-center gap-0.5">
+            {/* 折扣标签 */}
+            {discountLabel && (
+              <div
+                className="mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white"
+                style={{ backgroundColor: '#005D8E', paddingTop: '6px', paddingBottom: '4px' }}
+              >
+                {discountLabel}
+              </div>
+            )}
+
+            {/* 标题 */}
+            <h4 className="line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">
+              {title}
+            </h4>
+
+            {/* 描述（可选） */}
+            {description && (
+              <p className="line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">
+                {description}
+              </p>
+            )}
+
+            {/* 价格和评分 */}
+            <div className="mt-4 flex items-center gap-2">
+              <div className="flex items-center gap-1">
+                {/* 当前价格（有折扣时显示折扣价，否则显示原价） */}
+                <span className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">
+                  {formatPrice(currentPrice)}
+                </span>
+                {/* 原价（划线价）- 仅在有折扣时显示 */}
+                {hasDiscount && (
+                  <span className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through">
+                    {formatPrice(price)}
+                  </span>
+                )}
+              </div>
+              {/* 评分（可选） */}
+              {averageRating !== undefined && (
+                <div className="flex items-center gap-0.5 text-xs text-gray-600">
+                  <span className="text-yellow-500">⭐</span>
+                  <span>{averageRating.toFixed(1)}</span>
+                </div>
+              )}
+            </div>
+
+            {/* Add to Cart 按钮 - 在价格下方 */}
+            <button
+              type="button"
+              onClick={handleAddToCart}
+              className="mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white"
+              style={{ backgroundColor: '#1D1D1F' }}
+            >
+              Add to Cart
+            </button>
+          </div>
+        </div>
+      </a>
+    </div>
+  )
+}
+
+/**
+ * 商品列表内部组件（支持展开/收起）
+ */
+const ProductListComponent: React.FC<{
+  products: Product[]
+  title?: string
+  onAddToCart?: (product: Product) => void
+}> = ({ products, title, onAddToCart }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // 过滤掉 null 或无效的产品
+  const validProducts = products.filter(p => p && p.shopifyId)
+
+  // 默认显示前3个产品
+  const INITIAL_DISPLAY_COUNT = 3
+  const hasMore = validProducts.length > INITIAL_DISPLAY_COUNT
+  const displayedProducts = isExpanded ? validProducts : validProducts.slice(0, INITIAL_DISPLAY_COUNT)
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {/* 列表标题（可选） */}
+      {title && <h3 className="text-sm font-semibold text-gray-900">{title}</h3>}
+
+      {/* 纵向排列的商品列表 */}
+      <div className="flex flex-col gap-1.5">
+        {displayedProducts.map((product, index) => {
+          if (!product || !product.shopifyId) return null
+          return <CompactProductCard key={product.shopifyId} product={product} onAddToCart={onAddToCart} />
+        })}
+      </div>
+
+      {/* Learn More 按钮 */}
+      {hasMore && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center justify-center gap-1.5  px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]"
+        >
+          <span>{isExpanded ? 'Show Less' : 'Learn More'}</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 商品列表渲染器
+ *
+ * 功能：
+ * - 纵向展示多个商品
+ * - 默认显示前3个产品
+ * - 支持展开/收起查看全部
+ * - 紧凑型卡片设计
+ * - 可选标题
+ *
+ * 布局：
+ * ```
+ * 标题（可选）
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $29.99     │
+ * └─────────────────┘
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $39.99     │
+ * └─────────────────┘
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $49.99     │
+ * └─────────────────┘
+ * [ Learn More ↓ ]
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: ProductListContent = {
+ *   type: 'product_list',
+ *   data: {
+ *     title: '相关商品推荐',
+ *     products: [product1, product2, product3, product4, product5]
+ *   }
+ * }
+ * <ProductList.render(content, false, false) />
+ * ```
+ */
+export const ProductList: MessageRenderer = {
+  render: content => {
+    const productListContent = content as ProductListContent
+    const { products, title, onAddToCart } = productListContent.data
+
+    // 过滤掉 null 或无效的产品
+    const validProducts = products?.filter(p => p && p.shopifyId) || []
+
+    if (validProducts.length === 0) {
+      return null
+    }
+
+    return <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} />
+  },
+}