@shopbb/helium 0.6.3 → 0.7.0

package/src/components/DiscountComponents.tsx

@@ -6,38 +6,66 @@
  *   <DiscountClaimButton>        单个领取按钮
  *   <MyDiscountList>             我的卡包
  *
- * 注：W5 已删除以下组件（旧设计）：
- *   - <DiscountCodeInput>: 输入框范式已过时。请用 <DiscountSelector> + <ClaimableDiscountList>。
- *   - <BestDiscountHint>: 服务端自动选择最佳券，不需要前端提示。用户在 <DiscountSelector> 看到 / 切换。
- *
- * 全部无样式 + data-* 钩子。
+ * helium 0.7：所有组件**接 props 不靠 Provider**。
+ * 商家从 loader 拉 publicDiscounts / myClaims / cart.discountAllocations 传入。
  */
 
 import * as React from 'react';
-import { useDiscounts, useProductDiscounts, type Discount, type DiscountClaim } from './DiscountProvider';
-import { useAnalytics } from './AnalyticsProvider';
 import { Money } from './Money';
-import { useMounted } from './hooks/useMounted';
 import { formatDate } from '../utils/formatDate';
 
+// 类型定义
+export type DiscountValueType = 'PERCENTAGE' | 'FIXED_AMOUNT' | 'FREE_SHIPPING';
+
+export interface DiscountValuePercentage { __typename: 'DiscountPercentage'; percentage: number; }
+export interface DiscountValueAmount { __typename: 'DiscountAmount'; amount: { amount: string; currencyCode: string }; }
+export interface DiscountValueFreeShipping { __typename: 'DiscountFreeShipping'; freeShipping: boolean; }
+
+export interface Discount {
+  id: string;
+  code: string | null;
+  title: string;
+  description: string | null;
+  valueType: DiscountValueType;
+  value: DiscountValuePercentage | DiscountValueAmount | DiscountValueFreeShipping;
+  minSubtotal: { amount: string; currencyCode: string } | null;
+  startsAt: string | null;
+  endsAt: string | null;
+}
+
+export interface DiscountClaim {
+  id: string;
+  claimedAt: string;
+  expiresAt: string | null;
+  isExpired: boolean;
+  remainingUses: number;
+  usedCount: number;
+  discount: Discount;
+}
+
+export interface DiscountAllocation {
+  discountedAmount: { amount: string; currencyCode: string };
+  title?: string | null;
+  code?: string | null;
+}
+
 // ============================================================
 // AppliedDiscountList
 // ============================================================
 
 export interface AppliedDiscountListProps {
+  /** 从 cart.discountAllocations 传入 */
+  allocations?: DiscountAllocation[];
   className?: string;
   emptyText?: React.ReactNode;
 }
 
 export function AppliedDiscountList(props: AppliedDiscountListProps) {
-  const { className, emptyText = null } = props;
-  const { cartAllocations } = useDiscounts();
-
-  if (cartAllocations.length === 0) return <>{emptyText}</>;
-
+  const { allocations = [], className, emptyText = null } = props;
+  if (allocations.length === 0) return <>{emptyText}</>;
   return (
     <div data-applied-discount-list className={className}>
-      {cartAllocations.map((alloc, i) => (
+      {allocations.map((alloc, i) => (
         <div key={alloc.code || i} data-applied-item>
           <div data-info>
             <span data-title>{alloc.title}</span>
@@ -57,8 +85,9 @@ export function AppliedDiscountList(props: AppliedDiscountListProps) {
 // ============================================================
 
 export interface ClaimableDiscountListProps {
-  scope?: 'store' | 'product';
-  productHandle?: string;
+  /** 可领取的折扣（从 loader 拉，例如 publicDiscounts 或 productDiscounts） */
+  discounts?: Discount[];
+  /** 一次最多渲染几张，默认 10 */
   first?: number;
   className?: string;
   emptyText?: React.ReactNode;
@@ -66,25 +95,11 @@ export interface ClaimableDiscountListProps {
 }
 
 export function ClaimableDiscountList(props: ClaimableDiscountListProps) {
-  const { scope = 'store', productHandle, first = 10, className, emptyText = null, renderItem } = props;
-  const mounted = useMounted();
-  const { publicDiscounts, publicDiscountsStatus } = useDiscounts();
-  const { discounts: productDiscs, loading: productLoading } = useProductDiscounts(scope === 'product' ? productHandle : null);
-
-  const list = scope === 'product' ? productDiscs : publicDiscounts;
-  const loading = scope === 'product' ? productLoading : publicDiscountsStatus === 'loading';
-
-  // SSR 安全：首次渲染返回固定占位（空容器），避免和 client 拉到数据后的渲染 mismatch
-  if (!mounted) {
-    return <div data-claimable-discount-list data-scope={scope} data-ssr-placeholder className={className} />;
-  }
-
-  if (loading) return null;
-  if (list.length === 0) return <>{emptyText}</>;
-
+  const { discounts = [], first = 10, className, emptyText = null, renderItem } = props;
+  if (discounts.length === 0) return <>{emptyText}</>;
   return (
-    <div data-claimable-discount-list data-scope={scope} className={className}>
-      {list.slice(0, first).map((d) => (
+    <div data-claimable-discount-list className={className}>
+      {discounts.slice(0, first).map((d) => (
         <React.Fragment key={d.id}>
           {renderItem ? renderItem(d) : <DefaultClaimableItem discount={d} />}
         </React.Fragment>
@@ -115,9 +130,7 @@ function DefaultClaimableItem({ discount: d }: { discount: Discount }) {
 
 function formatDiscountValue(d: Discount): string {
   if (d.value.__typename === 'DiscountPercentage') {
-    // percentage 表示折扣比例（10 = 减 10%）→ 中文"折"是付款比例（10% off = 付 90% = 9 折）
     const pay = (100 - d.value.percentage) / 10;
-    // 整数省点：8 折 / 7.5 折
     const txt = Number.isInteger(pay) ? String(pay) : pay.toFixed(1);
     return `${txt} 折`;
   }
@@ -126,76 +139,65 @@ function formatDiscountValue(d: Discount): string {
 }
 
 // ============================================================
-// DiscountClaimButton
+// DiscountClaimButton — 领取优惠券（需要登录）
+//
+// helium 0.7：不再调 DiscountProvider.claim()。商家自己提供 onClaim 回调或
+// 用 <Form action="/account/discounts" method="POST"> 包裹。
+// 这里给一个最简单的"调商家自传 action endpoint"实现。
 // ============================================================
 
 export interface DiscountClaimButtonProps {
   discount: Discount;
-  children?: React.ReactNode;
+  /** 点击触发的回调（商家实现 claim 逻辑） */
+  onClaim?: (discount: Discount) => Promise<void> | void;
+  /** 是否已领（外部判断后传入，按钮 disabled） */
+  claimed?: boolean;
+  /** 加载中文本 */
   loadingText?: React.ReactNode;
+  /** 已领文本 */
   claimedText?: React.ReactNode;
-  /** 未登录时跳转的路径。默认 `/login?next=` + 当前路径 */
-  loginPath?: string;
-  onClaimed?: () => void;
-  onError?: (msg: string) => void;
+  children?: React.ReactNode;
   className?: string;
 }
 
 export function DiscountClaimButton(props: DiscountClaimButtonProps) {
   const {
-    discount, children = '领取',
-    loadingText = '领取中…', claimedText = '已领取',
-    loginPath,
-    onClaimed, onError, className,
+    discount, onClaim, claimed = false,
+    loadingText = '领取中...',
+    claimedText = '已领取',
+    children = '领取',
+    className,
   } = props;
-  const { claim, myDiscounts, myDiscountsStatus } = useDiscounts();
-  const analytics = useAnalytics();
-  const [loading, setLoading] = React.useState(false);
-  const [err, setErr] = React.useState<string | null>(null);
 
-  const alreadyClaimed = myDiscounts.some((c) => c.discount.id === discount.id);
+  const [pending, setPending] = React.useState(false);
+  const [err, setErr] = React.useState<string | null>(null);
+  const [done, setDone] = React.useState(claimed);
 
-  const handleClaim = async () => {
-    // 未登录 → 跳 login
-    if (myDiscountsStatus === 'unauthenticated') {
-      if (typeof window === 'undefined') return;
-      const next = encodeURIComponent(window.location.pathname + window.location.search);
-      window.location.href = loginPath || `/login?next=${next}`;
-      return;
-    }
-    if (!discount.code) return;
-    setLoading(true);
+  const handleClick = async () => {
+    if (done || pending) return;
+    setPending(true);
     setErr(null);
     try {
-      const r = await claim(discount.code);
-      if (r.userErrors.length > 0) {
-        const msg = r.userErrors[0].message;
-        setErr(msg);
-        onError?.(msg);
-      } else {
-        onClaimed?.();
-        analytics.emit('discount_claim', { code: discount.code });
-      }
+      await onClaim?.(discount);
+      setDone(true);
+    } catch (e: any) {
+      setErr(e?.message || '领取失败');
     } finally {
-      setLoading(false);
+      setPending(false);
     }
   };
 
-  if (alreadyClaimed) {
-    return <button type="button" className={className} disabled data-discount-claim data-claimed>{claimedText}</button>;
-  }
-
   return (
     <>
       <button
         type="button"
-        className={className}
-        onClick={handleClaim}
-        disabled={loading}
         data-discount-claim
-        data-loading={loading ? '' : undefined}
+        data-claimed={done ? '' : undefined}
+        disabled={done || pending}
+        onClick={handleClick}
+        className={className}
       >
-        {loading ? loadingText : children}
+        {pending ? loadingText : done ? claimedText : children}
       </button>
       {err && <div data-error>{err}</div>}
     </>
@@ -203,35 +205,26 @@ export function DiscountClaimButton(props: DiscountClaimButtonProps) {
 }
 
 // ============================================================
-// MyDiscountList (我的卡包)
+// MyDiscountList — 我的卡包
 // ============================================================
 
 export interface MyDiscountListProps {
-  className?: string;
-  emptyText?: React.ReactNode;
+  /** 从 customer GraphQL 拉的 claims */
+  claims?: DiscountClaim[];
   filter?: 'available' | 'used' | 'expired' | 'all';
+  emptyText?: React.ReactNode;
+  className?: string;
 }
 
 export function MyDiscountList(props: MyDiscountListProps) {
-  const { className, emptyText = '还没有优惠券', filter = 'available' } = props;
-  const mounted = useMounted();
-  const { myDiscounts, myDiscountsStatus } = useDiscounts();
-
-  if (!mounted) {
-    return <div data-my-discount-list data-ssr-placeholder className={className} />;
-  }
-  if (myDiscountsStatus === 'loading') return null;
-  if (myDiscountsStatus === 'unauthenticated') return null;
-
-  const filtered = myDiscounts.filter((c) => {
+  const { claims = [], filter = 'available', emptyText = '还没有优惠券', className } = props;
+  const filtered = claims.filter((c) => {
     if (filter === 'all') return true;
     if (filter === 'expired') return c.isExpired;
     if (filter === 'used') return c.remainingUses === 0 && !c.isExpired;
     return !c.isExpired && c.remainingUses > 0;
   });
-
   if (filtered.length === 0) return <div data-my-discount-empty>{emptyText}</div>;
-
   return (
     <div data-my-discount-list className={className}>
       {filtered.map((c) => (
@@ -261,13 +254,14 @@ export function MyDiscountList(props: MyDiscountListProps) {
 }
 
 function formatClaimValue(c: DiscountClaim): string {
-  if (c.discount.valueType === 'PERCENTAGE' && c.discount.valuePercentage != null) {
-    const pay = (100 - c.discount.valuePercentage) / 10;
+  if (c.discount.value.__typename === 'DiscountPercentage') {
+    const pct = c.discount.value.percentage;
+    const pay = (100 - pct) / 10;
     const txt = Number.isInteger(pay) ? String(pay) : pay.toFixed(1);
     return `${txt} 折`;
   }
-  if (c.discount.valueType === 'FIXED_AMOUNT' && c.discount.valueAmount) {
-    return `减 ¥${c.discount.valueAmount.amount}`;
+  if (c.discount.value.__typename === 'DiscountAmount') {
+    return `减 ¥${c.discount.value.amount.amount}`;
   }
   return '免运费';
 }

package/src/components/DiscountSelector.tsx

@@ -1,58 +1,83 @@
 /**
  * <DiscountSelector>
  *
- * Cart 上的优惠券选择器 — 卡片式 UI，对齐拼多多 / 京东体验。
+ * Cart 上的优惠券选择器 — 卡片式 UI。
  *
- * 行为：
- *   - 默认显示当前应用的券（服务端自动选了最佳，或买家显式选的）
- *   - 点"切换"打开抽屉/弹窗，列出该买家所有可用券（从 useDiscounts().myDiscounts）
- *   - 选另一张 → 调 cartDiscountSelect mutation
- *   - 点"不使用优惠券" → cartDiscountClear
- *
- * 未登录买家：渲染"登录后享受优惠"提示。
- *
- * 设计目标：
- *   - 这是 helium "脚手架" 的卡片式实现。商家可以替换为抽屉式 / 弹窗式自定义 UI。
- *   - 商家也可以直接用 useDiscounts() 自己渲染（提供 hook-only 路径）。
+ * helium 0.7 改造：
+ *   - 数据通过 props 传入（不再用 DiscountProvider）
+ *   - mutation 通过 <CartForm action="CustomDiscountSelect" inputs={{claimId}}>
+ *   - 商家 loader 拉 myDiscountClaims + cart.appliedDiscountClaim，传给本组件
  */
 
 import * as React from 'react';
-import { useDiscounts, type DiscountClaim } from './DiscountProvider';
 import { Money } from './Money';
-import { useMounted } from './hooks/useMounted';
 import { CartForm } from './CartForm';
 import { formatDate } from '../utils/formatDate';
 
+// Re-export 类型用法，对齐之前 DiscountProvider 的 DiscountClaim 类型
+export interface DiscountClaim {
+  id: string;
+  claimedAt: string;
+  expiresAt: string | null;
+  isExpired: boolean;
+  remainingUses: number;
+  discount: {
+    id: string;
+    code: string | null;
+    title: string;
+    valueType: 'PERCENTAGE' | 'FIXED_AMOUNT' | 'FREE_SHIPPING';
+    valuePercentage: number | null;
+    valueAmount: { amount: string; currencyCode: string } | null;
+    minSubtotal: { amount: string; currencyCode: string } | null;
+  };
+}
+
+export interface AppliedDiscountClaim {
+  claimId: string;
+  code: string | null;
+  title: string;
+}
+
+export interface DiscountAllocation {
+  discountedAmount: { amount: string; currencyCode: string };
+  title?: string | null;
+  code?: string | null;
+}
+
 export interface DiscountSelectorProps {
-  className?: string;
-  /** 未登录时显示的内容；不传则显示默认 */
+  /** 买家已领的所有 claim（从 customer GraphQL 拉，商家传入） */
+  myClaims?: DiscountClaim[];
+  /** cart 上当前已应用的 claim（cart.appliedDiscountClaim） */
+  appliedClaim?: AppliedDiscountClaim | null;
+  /** cart 折扣金额（cart.discountAllocations[0]） */
+  appliedAllocation?: DiscountAllocation | null;
+  /** 未登录时显示内容 */
+  unauthenticated?: boolean;
   unauthenticatedFallback?: React.ReactNode;
-  /** 自定义渲染 */
-  renderApplied?: (props: { code: string | null; title: string; amount: { amount: string; currencyCode: string }; onChange: () => void }) => React.ReactNode;
+  className?: string;
+  /** 自定义渲染已选 state */
+  renderApplied?: (props: {
+    code: string | null;
+    title: string;
+    amount: { amount: string; currencyCode: string };
+    onChange: () => void;
+  }) => React.ReactNode;
 }
 
 export function DiscountSelector(props: DiscountSelectorProps) {
-  const { className, unauthenticatedFallback, renderApplied } = props;
-  const mounted = useMounted();
   const {
-    myDiscounts, myDiscountsStatus,
-    cartAllocations, appliedClaim,
-  } = useDiscounts();
+    myClaims = [],
+    appliedClaim,
+    appliedAllocation,
+    unauthenticated = false,
+    unauthenticatedFallback,
+    className,
+    renderApplied,
+  } = props;
 
   const [open, setOpen] = React.useState(false);
 
-  // SSR + client 首次 render：返回固定占位，保证 hydration 不 mismatch。
-  if (!mounted) {
-    return <div data-discount-selector data-ssr-placeholder className={className} />;
-  }
-
-  // 服务端已经决定了 cart 上是哪张券
-  const appliedAlloc = cartAllocations[0];
-  const appliedClaimId = appliedClaim?.claimId ?? null;
-  const appliedTitle = appliedClaim?.title ?? appliedAlloc?.title;
-  const appliedCode = appliedClaim?.code ?? appliedAlloc?.code;
-  // 未登录
-  if (myDiscountsStatus === 'unauthenticated') {
+  if (unauthenticated) {
     return unauthenticatedFallback !== undefined ? <>{unauthenticatedFallback}</> : (
       <div data-discount-selector data-unauth className={className}>
         <span>登录后可使用优惠券</span>
@@ -61,13 +86,13 @@ export function DiscountSelector(props: DiscountSelectorProps) {
     );
   }
 
-  if (myDiscountsStatus === 'loading') {
-    return <div data-discount-selector data-loading className={className}>加载优惠券…</div>;
-  }
+  const appliedClaimId = appliedClaim?.claimId ?? null;
+  const appliedTitle = appliedClaim?.title ?? appliedAllocation?.title;
+  const appliedCode = appliedClaim?.code ?? appliedAllocation?.code;
 
-  const availableClaims = myDiscounts.filter((c) => !c.isExpired && c.remainingUses > 0);
+  const availableClaims = myClaims.filter((c) => !c.isExpired && c.remainingUses > 0);
 
-  if (availableClaims.length === 0) {
+  if (availableClaims.length === 0 && !appliedClaimId) {
     return (
       <div data-discount-selector data-no-discount className={className}>
         <span>暂无可用优惠券</span>
@@ -82,15 +107,15 @@ export function DiscountSelector(props: DiscountSelectorProps) {
           renderApplied ? renderApplied({
             code: appliedCode ?? null,
             title: appliedTitle ?? '',
-            amount: appliedAlloc?.discountedAmount ?? { amount: '0', currencyCode: 'CNY' },
+            amount: appliedAllocation?.discountedAmount ?? { amount: '0', currencyCode: 'CNY' },
             onChange: () => setOpen(true),
           }) : (
             <div data-applied>
               <div data-info>
                 <span data-label>已使用</span>
                 <strong data-title>{appliedTitle}</strong>
-                {appliedAlloc && (
-                  <span data-amount>− <Money data={{ amount: appliedAlloc.discountedAmount.amount, currencyCode: appliedAlloc.discountedAmount.currencyCode }} /></span>
+                {appliedAllocation && (
+                  <span data-amount>− <Money data={{ amount: appliedAllocation.discountedAmount.amount, currencyCode: appliedAllocation.discountedAmount.currencyCode }} /></span>
                 )}
               </div>
               <div data-actions>
@@ -119,10 +144,6 @@ export function DiscountSelector(props: DiscountSelectorProps) {
   );
 }
 
-/**
- * 抽屉式选券面板。
- * Demo 实现为屏底固定面板；商家可以替换为 modal / 抽屉等。
- */
 function DiscountPickerSheet({
   claims, currentClaimId, onClose,
 }: {
@@ -139,11 +160,9 @@ function DiscountPickerSheet({
         </div>
         <div data-sheet-list>
           {claims.map((c) => {
-            // claim_id 既可能是 gid 也可能是 raw —— oxygen mutation 接受两种
             const id = c.id.replace(/^gid:\/\/shopbb\/DiscountClaim\//, '');
             const isCurrent = currentClaimId === id;
             return (
-              // 每张券一个 <CartForm>，submit 走 /cart action → cart.selectDiscount
               <CartForm
                 key={c.id}
                 action="CustomDiscountSelect"