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

package/src/components/registration/authCodeActivate/index.tsx

@@ -6,13 +6,13 @@ import {
   useHeadlessContext,
   useEmailValidation,
   useCountDown,
-  ROUNDED_BRANDS,
 } from '@anker-in/lib'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Message } from './Message'
 import { AuthCodeActivateProps } from './type'
 import { useRegistration } from '../context'
 import { RegistrationModalContainer } from '../modalContainer'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
   const { locale, brand } = useHeadlessContext()
@@ -180,6 +180,7 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
               } else {
                 setTimeout(() => {
                   authCodeActivate.close()
+                  window.location.reload()
                 }, 3000)
               }
             } else {
@@ -189,6 +190,7 @@ export const AuthCodeActivate: React.FC<AuthCodeActivateProps> = ({ copy }) => {
                 } else {
                   setTimeout(() => {
                     authCodeActivate.close()
+                    window.location.reload()
                   }, 3000)
                 }
               } else if (data?.data?.error_code === '142') {

package/src/components/registration/modalContainer.tsx

@@ -1,6 +1,7 @@
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useEffect, useState, type UIEvent } from 'react'
 import ReactModal from 'react-modal'
+import { ROUNDED_BRANDS } from '../../constants'
 
 export type ModalContainerProps = {
   overlayClassName?: string

package/src/constants.ts

@@ -0,0 +1 @@
+export const ROUNDED_BRANDS = ['eufy', 'soundcore']

package/src/index.ts

@@ -1,2 +1,3 @@
-export * from './components'
-export * from './templates'
+export * from './components/index.js'
+export * from './templates/index.js'
+export * from './constants.js'

package/src/stories/CartCard.stories.tsx

@@ -0,0 +1,459 @@
+/**
+ * CartCard Storybook Stories
+ * 展示购物车卡片组件的各种状态
+ */
+
+import type { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+import { CartCard } from '../components/LiveChatWidget/components/MessageContent/CartCard.js'
+import type { CartContent } from '../components/LiveChatWidget/types'
+
+// Story 包装组件
+const CartCardWrapper: React.FC<{ content: CartContent }> = ({ content }) => {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 p-4">
+      <div className="w-full max-w-md">{CartCard.render(content, false, false)}</div>
+    </div>
+  )
+}
+
+const meta: Meta<typeof CartCardWrapper> = {
+  title: 'Campaign/LiveChatWidget/MessageContent/CartCard',
+  component: CartCardWrapper,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: `
+# 购物车卡片组件
+
+显示用户购物车内容，包括商品列表、价格汇总和结账按钮。
+
+## 功能特性
+
+- 📦 **商品列表**: 展示购物车中的所有商品
+- 💰 **价格汇总**: 显示小计、折扣和总计
+- 🎟️ **折扣码**: 显示已应用的折扣码及其状态
+- 🛒 **结账按钮**: 一键跳转到 Shopify 结账页面
+- 🈳 **空状态**: 优雅的空购物车提示
+
+## 使用场景
+
+- 用户添加商品到购物车后 (add_to_cart)
+- 用户查询购物车内容 (get_cart)
+- 用户修改购物车数量 (update_cart_item)
+- 用户应用折扣码 (update_discount_codes)
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof CartCardWrapper>
+
+/**
+ * 空购物车状态
+ */
+export const Empty: Story = {
+  args: {
+    content: {
+      type: 'cart',
+      data: {
+        isEmpty: true,
+        cartId: 'gid://shopify/Cart/empty',
+        totalQuantity: 0,
+        lines: [],
+        cost: {
+          totalAmount: {
+            amount: '0.00',
+            currencyCode: 'USD',
+          },
+          subtotalAmount: {
+            amount: '0.00',
+            currencyCode: 'USD',
+          },
+        },
+      },
+    },
+  },
+}
+
+/**
+ * 单件商品
+ */
+export const SingleItem: Story = {
+  args: {
+    content: {
+      type: 'cart',
+      data: {
+        isEmpty: false,
+        cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
+        totalQuantity: 1,
+        lines: [
+          {
+            id: 'gid://shopify/CartLine/12345',
+            quantity: 1,
+            cost: {
+              totalAmount: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567890',
+              title: 'Black',
+              price: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
+                altText: 'Soundcore Space One',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826618',
+                title: 'Soundcore Space One',
+                handle: 'soundcore-space-one',
+              },
+            },
+          },
+        ],
+        cost: {
+          totalAmount: {
+            amount: '99.99',
+            currencyCode: 'USD',
+          },
+          subtotalAmount: {
+            amount: '99.99',
+            currencyCode: 'USD',
+          },
+        },
+        checkoutUrl: 'https://checkout.shopify.com/example',
+      },
+    },
+  },
+}
+
+/**
+ * 多件商品
+ */
+export const MultipleItems: Story = {
+  args: {
+    content: {
+      type: 'cart',
+      data: {
+        isEmpty: false,
+        cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
+        totalQuantity: 5,
+        lines: [
+          {
+            id: 'gid://shopify/CartLine/12345',
+            quantity: 2,
+            cost: {
+              totalAmount: {
+                amount: '199.98',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '199.98',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567890',
+              title: 'Black',
+              price: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
+                altText: 'Soundcore Space One',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826618',
+                title: 'Soundcore Space One',
+                handle: 'soundcore-space-one',
+              },
+            },
+          },
+          {
+            id: 'gid://shopify/CartLine/12346',
+            quantity: 1,
+            cost: {
+              totalAmount: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567891',
+              title: 'White',
+              price: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop',
+                altText: 'eufy Security Camera',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826619',
+                title: 'eufy Security Camera',
+                handle: 'eufy-security-camera',
+              },
+            },
+          },
+          {
+            id: 'gid://shopify/CartLine/12347',
+            quantity: 2,
+            cost: {
+              totalAmount: {
+                amount: '79.98',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '39.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '79.98',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567892',
+              title: 'USB-C Cable',
+              price: {
+                amount: '39.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1583863788434-e58a36330cf0?w=400&h=400&fit=crop',
+                altText: 'Anker USB-C Cable',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826620',
+                title: 'Anker USB-C Cable 6ft',
+                handle: 'anker-usb-c-cable',
+              },
+            },
+          },
+        ],
+        cost: {
+          totalAmount: {
+            amount: '409.95',
+            currencyCode: 'USD',
+          },
+          subtotalAmount: {
+            amount: '409.95',
+            currencyCode: 'USD',
+          },
+        },
+        checkoutUrl: 'https://checkout.shopify.com/example',
+      },
+    },
+  },
+}
+
+/**
+ * 有折扣码的购物车
+ */
+export const WithDiscount: Story = {
+  args: {
+    content: {
+      type: 'cart',
+      data: {
+        isEmpty: false,
+        cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
+        totalQuantity: 3,
+        lines: [
+          {
+            id: 'gid://shopify/CartLine/12345',
+            quantity: 2,
+            cost: {
+              totalAmount: {
+                amount: '199.98',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '199.98',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567890',
+              title: 'Black',
+              price: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
+                altText: 'Soundcore Space One',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826618',
+                title: 'Soundcore Space One',
+                handle: 'soundcore-space-one',
+              },
+            },
+          },
+          {
+            id: 'gid://shopify/CartLine/12346',
+            quantity: 1,
+            cost: {
+              totalAmount: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567891',
+              title: 'White',
+              price: {
+                amount: '129.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&h=400&fit=crop',
+                altText: 'eufy Security Camera',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826619',
+                title: 'eufy Security Camera',
+                handle: 'eufy-security-camera',
+              },
+            },
+          },
+        ],
+        cost: {
+          totalAmount: {
+            amount: '296.97',
+            currencyCode: 'USD',
+          },
+          subtotalAmount: {
+            amount: '329.97',
+            currencyCode: 'USD',
+          },
+        },
+        discountCodes: [
+          {
+            code: 'SPRING20',
+            applicable: true,
+          },
+        ],
+        checkoutUrl: 'https://checkout.shopify.com/example',
+      },
+    },
+  },
+}
+
+/**
+ * 多个折扣码（部分失效）
+ */
+export const WithMultipleDiscounts: Story = {
+  args: {
+    content: {
+      type: 'cart',
+      data: {
+        isEmpty: false,
+        cartId: 'gid://shopify/Cart/Z2NwLXVzLWVhc3QxOjAxSkZHRjA4VkFRQkhON1dBMTNLREZEVEZH',
+        totalQuantity: 2,
+        lines: [
+          {
+            id: 'gid://shopify/CartLine/12345',
+            quantity: 2,
+            cost: {
+              totalAmount: {
+                amount: '199.98',
+                currencyCode: 'USD',
+              },
+              amountPerQuantity: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              subtotalAmount: {
+                amount: '199.98',
+                currencyCode: 'USD',
+              },
+            },
+            merchandise: {
+              id: 'gid://shopify/ProductVariant/43234567890',
+              title: 'Black',
+              price: {
+                amount: '99.99',
+                currencyCode: 'USD',
+              },
+              image: {
+                url: 'https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&fit=crop',
+                altText: 'Soundcore Space One',
+              },
+              product: {
+                id: 'gid://shopify/Product/8179159826618',
+                title: 'Soundcore Space One',
+                handle: 'soundcore-space-one',
+              },
+            },
+          },
+        ],
+        cost: {
+          totalAmount: {
+            amount: '179.98',
+            currencyCode: 'USD',
+          },
+          subtotalAmount: {
+            amount: '199.98',
+            currencyCode: 'USD',
+          },
+        },
+        discountCodes: [
+          {
+            code: 'WELCOME10',
+            applicable: true,
+          },
+          {
+            code: 'EXPIRED20',
+            applicable: false,
+          },
+        ],
+        checkoutUrl: 'https://checkout.shopify.com/example',
+      },
+    },
+  },
+}