@shopbb/helium 0.4.0 → 0.5.0

package/src/components/DiscountSelector.tsx

@@ -0,0 +1,220 @@
+/**
+ * <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 { useCart } from './CartProvider';
+import { useShop } from './ShopProvider';
+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 } = useDiscounts();
+  const { cart, refetch: refetchCart } = useCart();
+  const shop = useShop();
+  const analytics = useAnalytics();
+
+  const [open, setOpen] = React.useState(false);
+  const [pending, setPending] = React.useState(false);
+
+  // 服务端已经决定了 cart 上是哪张券
+  const appliedAlloc = cartAllocations[0];
+  const appliedClaimId = (cart as any)?.appliedDiscountClaim?.claimId ?? null;
+  const appliedTitle = (cart as any)?.appliedDiscountClaim?.title ?? appliedAlloc?.title;
+  const appliedCode = (cart as any)?.appliedDiscountClaim?.code ?? appliedAlloc?.code;
+
+  const callSelectMutation = async (claimId: string | null) => {
+    if (!cart) return;
+    setPending(true);
+    try {
+      const token = (typeof localStorage !== 'undefined') ? (localStorage.getItem('shopbb:buyer_token') || localStorage.getItem('shopflare:buyer_token')) : null;
+      const mutation = claimId
+        ? `mutation S($id: ID!, $c: ID!) { cartDiscountSelect(cartId: $id, claimId: $c) { cart { id } userErrors { message } } }`
+        : `mutation C($id: ID!) { cartDiscountClear(cartId: $id) { cart { id } userErrors { message } } }`;
+      const variables: any = { id: cart.id };
+      if (claimId) variables.c = claimId;
+      const res = await fetch(shop.apiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Storefront-Access-Token': shop.storefrontAccessToken,
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
+        body: JSON.stringify({ query: mutation, variables }),
+        credentials: 'include',
+      });
+      await res.json();
+      // 重新拉 cart 让 UI 更新（拿到新的 discountAllocations）
+      await refetchCart();
+    } 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: () => callSelectMutation(null),
+          }) : (
+            <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={() => callSelectMutation(null)} 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={(claimId) => {
+            analytics.emit('discount_select', { claimId });
+            callSelectMutation(claimId);
+          }}
+          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';