@shopbb/helium 0.4.0 → 0.5.1

package/src/components/DiscountProvider.tsx

@@ -87,19 +87,24 @@ export interface DiscountContextValue {
   /** 我领过的有效券 */
   myDiscounts: DiscountClaim[];
   myDiscountsStatus: 'unauthenticated' | 'idle' | 'loading' | 'error';
-  /** 当前 cart 上应用的码 */
-  appliedToCart: CartDiscountCode[];
-  /** 当前 cart 上的折扣分配明细 */
+  /**
+   * 当前 cart 上的折扣分配明细。
+   * W5 起：cart 上最多一张券（自动选最佳 / 买家手动选）。
+   */
   cartAllocations: CartDiscountAllocation[];
-  /** 当前 cart 上最大可省（计算了用户已领但未应用的券） */
-  bestApplicableForCart: { discount: DiscountClaim; estimatedAmount: number } | null;
+  /** 当前应用的 claim ID（W5），null = 无折扣或买家未登录 */
+  appliedClaimId: string | null;
+  /** 当前应用的券标题 + code（来自 Cart.appliedDiscountClaim） */
+  appliedClaim: { claimId: string; code: string | null; title: string } | null;
   /** 错误 */
   error: string | null;
 
   // 操作
   claim: (code: string) => Promise<{ claim?: DiscountClaim; userErrors: DiscountUserError[] }>;
-  applyToCart: (code: string) => Promise<{ userErrors: DiscountUserError[] }>;
-  removeFromCart: (code: string) => Promise<{ userErrors: DiscountUserError[] }>;
+  /** 显式选中一张已领的券应用到当前 cart */
+  selectCartDiscount: (claimId: string) => Promise<{ userErrors: DiscountUserError[] }>;
+  /** 清掉显式选择，让 cart 回到"自动选最佳"或"无折扣" */
+  clearCartDiscount: () => Promise<{ userErrors: DiscountUserError[] }>;
   refetchMyDiscounts: () => Promise<void>;
   refetchPublicDiscounts: () => Promise<void>;
 }
@@ -149,19 +154,25 @@ export function DiscountProvider(props: DiscountProviderProps) {
   }, [tokenProvider]);
 
   const storefrontGql = React.useCallback(
-    async <T = any>(query: string, variables?: any): Promise<{ data?: T; errors?: any[] }> => {
+    async <T = any>(query: string, variables?: any, opts?: { withBuyerAuth?: boolean }): Promise<{ data?: T; errors?: any[] }> => {
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+        'X-Storefront-Access-Token': shop.storefrontAccessToken,
+      };
+      // 部分 storefront mutation 需要登录买家（如 cartDiscountSelect）
+      if (opts?.withBuyerAuth) {
+        const token = getToken();
+        if (token) headers.Authorization = `Bearer ${token}`;
+      }
       const res = await fetch(shop.apiUrl, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Storefront-Access-Token': shop.storefrontAccessToken,
-        },
+        headers,
         body: JSON.stringify({ query, variables }),
         credentials: 'include',
       });
       return res.json();
     },
-    [shop.apiUrl, shop.storefrontAccessToken],
+    [shop.apiUrl, shop.storefrontAccessToken, getToken],
   );
 
   const customerGql = React.useCallback(
@@ -280,95 +291,90 @@ export function DiscountProvider(props: DiscountProviderProps) {
     [customerGql, refetchMyDiscounts],
   );
 
-  // ----- cart apply / remove -----
-  const appliedToCart = cartCtx?.cart && (cartCtx.cart as any).discountCodes ? (cartCtx.cart as any).discountCodes as CartDiscountCode[] : [];
-  const cartAllocations = cartCtx?.cart && (cartCtx.cart as any).discountAllocations ? (cartCtx.cart as any).discountAllocations as CartDiscountAllocation[] : [];
-
-  const applyCodes = React.useCallback(
-    async (codes: string[]) => {
-      if (!cartCtx?.cart) return { userErrors: [{ code: 'NO_CART', message: 'cart 不存在' }] };
-      const result = await storefrontGql<{ cartDiscountCodesUpdate: { cart: any; userErrors: DiscountUserError[] } }>(
-        `mutation U($id: ID!, $codes: [String!]!) {
-           cartDiscountCodesUpdate(cartId: $id, discountCodes: $codes) {
-             cart { id }
-             userErrors { field code message }
-           }
-         }`,
-        { id: cartCtx.cart.id, codes },
-      );
-      if (result.errors?.length) {
-        return { userErrors: [{ code: 'NETWORK_ERROR', message: result.errors[0].message }] };
+  // ----- 当前 cart 上的折扣（服务端算好的） -----
+  const cartAllocations = cartCtx?.cart && (cartCtx.cart as any).discountAllocations
+    ? (cartCtx.cart as any).discountAllocations as CartDiscountAllocation[]
+    : [];
+  const appliedClaim: { claimId: string; code: string | null; title: string } | null =
+    cartCtx?.cart && (cartCtx.cart as any).appliedDiscountClaim
+      ? (cartCtx.cart as any).appliedDiscountClaim
+      : null;
+  const appliedClaimId = appliedClaim?.claimId ?? null;
+
+  // ----- W5: select / clear cart discount -----
+  // 走 Storefront GraphQL（不是 Customer Account），但需要 buyer JWT 让服务端 ctx.buyerUserId
+  // 有值。withBuyerAuth=true 触发 storefrontGql 加 Authorization header。
+  const selectCartDiscount = React.useCallback(
+    async (claimId: string) => {
+      if (!cartCtx?.cart) {
+        return { userErrors: [{ code: 'NO_CART', message: 'cart 不存在' }] };
+      }
+      try {
+        const result = await storefrontGql<{ cartDiscountSelect: { cart: any; userErrors: DiscountUserError[] } }>(
+          `mutation S($id: ID!, $c: ID!) {
+             cartDiscountSelect(cartId: $id, claimId: $c) {
+               cart { id }
+               userErrors { field code message }
+             }
+           }`,
+          { id: cartCtx.cart.id, c: claimId },
+          { withBuyerAuth: true },
+        );
+        if (result.errors?.length) {
+          return { userErrors: [{ code: 'NETWORK_ERROR', message: result.errors[0].message }] };
+        }
+        await cartCtx.refetch();
+        return { userErrors: result.data!.cartDiscountSelect.userErrors };
+      } catch (e: any) {
+        return { userErrors: [{ code: 'NETWORK_ERROR', message: e?.message ?? String(e) }] };
       }
-      // 刷 cart（拉新的 discountCodes / allocations）
-      await cartCtx.refetch();
-      return { userErrors: result.data!.cartDiscountCodesUpdate.userErrors };
     },
     [cartCtx, storefrontGql],
   );
 
-  const applyToCart = React.useCallback(
-    async (code: string) => {
-      const existing = appliedToCart.map((d) => d.code);
-      if (existing.includes(code.toUpperCase())) return { userErrors: [] };
-      return applyCodes([...existing, code.toUpperCase()]);
-    },
-    [appliedToCart, applyCodes],
-  );
-
-  const removeFromCart = React.useCallback(
-    async (code: string) => {
-      const next = appliedToCart.map((d) => d.code).filter((c) => c !== code.toUpperCase());
-      return applyCodes(next);
-    },
-    [appliedToCart, applyCodes],
-  );
-
-  // ----- best applicable for cart -----
-  const bestApplicableForCart = React.useMemo(() => {
-    if (!cartCtx?.cart || myDiscounts.length === 0) return null;
-    const subtotalStr = (cartCtx.cart as any).cost?.subtotalAmount?.amount;
-    const subtotal = Number(subtotalStr || 0);
-    if (subtotal <= 0) return null;
-
-    const currentApplied = new Set(appliedToCart.map((d) => d.code));
-
-    let best: { discount: DiscountClaim; estimatedAmount: number } | null = null;
-    for (const claimed of myDiscounts) {
-      const d = claimed.discount;
-      if (!d.code || claimed.isExpired) continue;
-      if (currentApplied.has(d.code)) continue;
-      // 门槛
-      if (d.minSubtotal && Number(d.minSubtotal.amount) > subtotal) continue;
-      // 估算折扣
-      let amount = 0;
-      if (d.valueType === 'PERCENTAGE' && d.valuePercentage != null) {
-        amount = Math.floor(subtotal * (d.valuePercentage / 100) * 100) / 100;
-      } else if (d.valueType === 'FIXED_AMOUNT' && d.valueAmount) {
-        amount = Math.min(Number(d.valueAmount.amount), subtotal);
+  const clearCartDiscount = React.useCallback(
+    async () => {
+      if (!cartCtx?.cart) {
+        return { userErrors: [{ code: 'NO_CART', message: 'cart 不存在' }] };
       }
-      if (amount > 0 && (best == null || amount > best.estimatedAmount)) {
-        best = { discount: claimed, estimatedAmount: amount };
+      try {
+        const result = await storefrontGql<{ cartDiscountClear: { cart: any; userErrors: DiscountUserError[] } }>(
+          `mutation C($id: ID!) {
+             cartDiscountClear(cartId: $id) {
+               cart { id }
+               userErrors { field code message }
+             }
+           }`,
+          { id: cartCtx.cart.id },
+          { withBuyerAuth: true },
+        );
+        if (result.errors?.length) {
+          return { userErrors: [{ code: 'NETWORK_ERROR', message: result.errors[0].message }] };
+        }
+        await cartCtx.refetch();
+        return { userErrors: result.data!.cartDiscountClear.userErrors };
+      } catch (e: any) {
+        return { userErrors: [{ code: 'NETWORK_ERROR', message: e?.message ?? String(e) }] };
       }
-    }
-    return best;
-  }, [cartCtx, myDiscounts, appliedToCart]);
+    },
+    [cartCtx, storefrontGql],
+  );
 
   const value: DiscountContextValue = React.useMemo(
     () => ({
       publicDiscounts, publicDiscountsStatus,
       myDiscounts, myDiscountsStatus,
-      appliedToCart, cartAllocations,
-      bestApplicableForCart,
+      cartAllocations,
+      appliedClaimId, appliedClaim,
       error,
-      claim, applyToCart, removeFromCart,
+      claim, selectCartDiscount, clearCartDiscount,
       refetchMyDiscounts, refetchPublicDiscounts,
     }),
     [
       publicDiscounts, publicDiscountsStatus,
       myDiscounts, myDiscountsStatus,
-      appliedToCart, cartAllocations,
-      bestApplicableForCart, error,
-      claim, applyToCart, removeFromCart,
+      cartAllocations, appliedClaimId, appliedClaim, error,
+      claim, selectCartDiscount, clearCartDiscount,
       refetchMyDiscounts, refetchPublicDiscounts,
     ],
   );

package/src/components/DiscountSelector.tsx

@@ -0,0 +1,209 @@
+/**
+ * <DiscountSelector>
+ *
+ * Cart 上的优惠券选择器 — 卡片式 UI，对齐拼多多 / 京东体验。
+ *
+ * 行为：
+ *   - 默认显示当前应用的券（服务端自动选了最佳，或买家显式选的）
+ *   - 点"切换"打开抽屉/弹窗，列出该买家所有可用券（从 useDiscounts().myDiscounts）
+ *   - 选另一张 → 调 cartDiscountSelect mutation
+ *   - 点"不使用优惠券" → cartDiscountClear
+ *
+ * 未登录买家：渲染"登录后享受优惠"提示。
+ *
+ * 设计目标：
+ *   - 这是 helium "脚手架" 的卡片式实现。商家可以替换为抽屉式 / 弹窗式自定义 UI。
+ *   - 商家也可以直接用 useDiscounts() 自己渲染（提供 hook-only 路径）。
+ */
+
+import * as React from 'react';
+import { useDiscounts, type DiscountClaim } from './DiscountProvider';
+import { useAnalytics } from './AnalyticsProvider';
+import { Money } from './Money';
+
+export interface DiscountSelectorProps {
+  className?: string;
+  /** 未登录时显示的内容；不传则显示默认 */
+  unauthenticatedFallback?: React.ReactNode;
+  /** 自定义渲染 */
+  renderApplied?: (props: { code: string | null; title: string; amount: { amount: string; currencyCode: string }; onChange: () => void; onClear: () => void }) => React.ReactNode;
+}
+
+export function DiscountSelector(props: DiscountSelectorProps) {
+  const { className, unauthenticatedFallback, renderApplied } = props;
+  const {
+    myDiscounts, myDiscountsStatus,
+    cartAllocations, appliedClaim,
+    selectCartDiscount, clearCartDiscount,
+  } = useDiscounts();
+  const analytics = useAnalytics();
+
+  const [open, setOpen] = React.useState(false);
+  const [pending, setPending] = React.useState(false);
+
+  // 服务端已经决定了 cart 上是哪张券
+  const appliedAlloc = cartAllocations[0];
+  const appliedClaimId = appliedClaim?.claimId ?? null;
+  const appliedTitle = appliedClaim?.title ?? appliedAlloc?.title;
+  const appliedCode = appliedClaim?.code ?? appliedAlloc?.code;
+
+  const handleSelect = async (claimId: string) => {
+    setPending(true);
+    try {
+      await selectCartDiscount(claimId);
+      analytics.emit('discount_select', { claimId });
+    } finally {
+      setPending(false);
+      setOpen(false);
+    }
+  };
+
+  const handleClear = async () => {
+    setPending(true);
+    try {
+      await clearCartDiscount();
+    } finally {
+      setPending(false);
+      setOpen(false);
+    }
+  };
+
+  // 未登录
+  if (myDiscountsStatus === 'unauthenticated') {
+    return unauthenticatedFallback !== undefined ? <>{unauthenticatedFallback}</> : (
+      <div data-discount-selector data-unauth className={className}>
+        <span>登录后可使用优惠券</span>
+        <a href="/login?next=/cart">去登录</a>
+      </div>
+    );
+  }
+
+  if (myDiscountsStatus === 'loading') {
+    return <div data-discount-selector data-loading className={className}>加载优惠券…</div>;
+  }
+
+  const availableClaims = myDiscounts.filter((c) => !c.isExpired && c.remainingUses > 0);
+
+  if (availableClaims.length === 0) {
+    return (
+      <div data-discount-selector data-no-discount className={className}>
+        <span>暂无可用优惠券</span>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div data-discount-selector className={className}>
+        {appliedClaimId ? (
+          renderApplied ? renderApplied({
+            code: appliedCode ?? null,
+            title: appliedTitle ?? '',
+            amount: appliedAlloc?.discountedAmount ?? { amount: '0', currencyCode: 'CNY' },
+            onChange: () => setOpen(true),
+            onClear: handleClear,
+          }) : (
+            <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>
+                )}
+              </div>
+              <div data-actions>
+                <button type="button" onClick={() => setOpen(true)} disabled={pending}>切换</button>
+                <button type="button" onClick={handleClear} disabled={pending} data-clear>不使用</button>
+              </div>
+            </div>
+          )
+        ) : (
+          <div data-empty-applied>
+            <div data-info>
+              <span data-label>有 {availableClaims.length} 张可用优惠券</span>
+            </div>
+            <button type="button" onClick={() => setOpen(true)} disabled={pending}>选择</button>
+          </div>
+        )}
+      </div>
+
+      {open && (
+        <DiscountPickerSheet
+          claims={availableClaims}
+          currentClaimId={appliedClaimId}
+          onSelect={handleSelect}
+          onClose={() => setOpen(false)}
+          pending={pending}
+        />
+      )}
+    </>
+  );
+}
+
+/**
+ * 抽屉式选券面板。
+ * Demo 实现为屏底固定面板；商家可以替换为 modal / 抽屉等。
+ */
+function DiscountPickerSheet({
+  claims, currentClaimId, onSelect, onClose, pending,
+}: {
+  claims: DiscountClaim[];
+  currentClaimId: string | null;
+  onSelect: (claimId: string) => void;
+  onClose: () => void;
+  pending: boolean;
+}) {
+  return (
+    <div data-discount-picker-overlay onClick={onClose}>
+      <div data-discount-picker-sheet onClick={(e) => e.stopPropagation()}>
+        <div data-sheet-header>
+          <h3>选择优惠券</h3>
+          <button type="button" onClick={onClose} data-sheet-close>×</button>
+        </div>
+        <div data-sheet-list>
+          {claims.map((c) => {
+            const id = c.id.replace(/^gid:\/\/shopbb\/DiscountClaim\//, '');
+            const isCurrent = currentClaimId === id;
+            return (
+              <button
+                key={c.id}
+                type="button"
+                data-claim-card
+                data-current={isCurrent ? '' : undefined}
+                onClick={() => onSelect(id)}
+                disabled={pending}
+              >
+                <div data-claim-left>
+                  <div data-claim-value>{formatValue(c)}</div>
+                  {c.discount.minSubtotal && (
+                    <div data-claim-min>
+                      满 <Money data={{ amount: c.discount.minSubtotal.amount, currencyCode: c.discount.minSubtotal.currencyCode }} /> 可用
+                    </div>
+                  )}
+                </div>
+                <div data-claim-right>
+                  <div data-claim-title>{c.discount.title}</div>
+                  {c.discount.code && <div data-claim-code>{c.discount.code}</div>}
+                  {c.expiresAt && (
+                    <div data-claim-expiry>{new Date(c.expiresAt).toLocaleDateString('zh-CN')} 过期</div>
+                  )}
+                </div>
+                {isCurrent && <span data-claim-current-tag>当前使用</span>}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function formatValue(c: DiscountClaim): string {
+  if (c.discount.valueType === 'PERCENTAGE' && c.discount.valuePercentage != null) {
+    return `${100 - c.discount.valuePercentage} 折`;
+  }
+  if (c.discount.valueType === 'FIXED_AMOUNT' && c.discount.valueAmount) {
+    return `− ¥${c.discount.valueAmount.amount}`;
+  }
+  return '免运费';
+}

package/src/components/index.ts

@@ -116,18 +116,17 @@ export type {
 } from './DiscountProvider';
 
 export {
-  DiscountCodeInput,
   AppliedDiscountList,
-  BestDiscountHint,
   ClaimableDiscountList,
   DiscountClaimButton,
   MyDiscountList,
 } from './DiscountComponents';
 export type {
-  DiscountCodeInputProps,
   AppliedDiscountListProps,
-  BestDiscountHintProps,
   ClaimableDiscountListProps,
   DiscountClaimButtonProps,
   MyDiscountListProps,
 } from './DiscountComponents';
+
+export { DiscountSelector } from './DiscountSelector';
+export type { DiscountSelectorProps } from './DiscountSelector';