@shopbb/helium 0.3.1 → 0.4.0

package/src/components/DiscountComponents.tsx

@@ -0,0 +1,369 @@
+/**
+ * Discount UI 组件集（W4b）
+ *
+ *   <DiscountCodeInput>          cart / checkout 输入框
+ *   <AppliedDiscountList>        当前 cart 已应用的码列表
+ *   <BestDiscountHint>           "可省 ¥X" 提示
+ *   <ClaimableDiscountList>      可领取的优惠券列表（首页 / 商品页）
+ *   <DiscountClaimButton>        单个领取按钮
+ *   <MyDiscountList>             我的卡包
+ *
+ * 全部无样式 + data-* 钩子。
+ */
+
+import * as React from 'react';
+import { useDiscounts, useProductDiscounts, type Discount, type DiscountClaim } from './DiscountProvider';
+import { useAnalytics } from './AnalyticsProvider';
+import { Money } from './Money';
+
+// ============================================================
+// 1. DiscountCodeInput
+// ============================================================
+
+export interface DiscountCodeInputProps {
+  placeholder?: string;
+  buttonText?: string;
+  onApplied?: (code: string) => void;
+  onError?: (msg: string) => void;
+  className?: string;
+}
+
+export function DiscountCodeInput(props: DiscountCodeInputProps) {
+  const { placeholder = '输入优惠码', buttonText = '应用', onApplied, onError, className } = props;
+  const { applyToCart } = useDiscounts();
+  const analytics = useAnalytics();
+  const [code, setCode] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [err, setErr] = React.useState<string | null>(null);
+
+  const submit = async () => {
+    const c = code.trim();
+    if (!c) return;
+    setLoading(true);
+    setErr(null);
+    try {
+      const r = await applyToCart(c);
+      if (r.userErrors.length > 0) {
+        const msg = r.userErrors[0].message;
+        setErr(msg);
+        onError?.(msg);
+      } else {
+        setCode('');
+        onApplied?.(c);
+        analytics.emit('discount_apply_to_cart', { code: c });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form
+      data-discount-code-input
+      className={className}
+      onSubmit={(e) => { e.preventDefault(); submit(); }}
+    >
+      <div data-row>
+        <input
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          placeholder={placeholder}
+          disabled={loading}
+        />
+        <button type="submit" disabled={loading || !code.trim()}>
+          {loading ? '...' : buttonText}
+        </button>
+      </div>
+      {err && <div data-error>{err}</div>}
+    </form>
+  );
+}
+
+// ============================================================
+// 2. AppliedDiscountList
+// ============================================================
+
+export interface AppliedDiscountListProps {
+  className?: string;
+  emptyText?: React.ReactNode;
+}
+
+export function AppliedDiscountList(props: AppliedDiscountListProps) {
+  const { className, emptyText = null } = props;
+  const { appliedToCart, cartAllocations, removeFromCart } = useDiscounts();
+  const analytics = useAnalytics();
+
+  if (appliedToCart.length === 0) return <>{emptyText}</>;
+
+  return (
+    <div data-applied-discount-list className={className}>
+      {appliedToCart.map((dc) => {
+        const alloc = cartAllocations.find((a) => a.code === dc.code);
+        return (
+          <div
+            key={dc.code}
+            data-applied-item
+            data-applicable={dc.applicable ? '' : undefined}
+          >
+            <div data-info>
+              <span data-code>{dc.code}</span>
+              {alloc && (
+                <span data-discount-amount>
+                  − <Money data={{ amount: alloc.discountedAmount.amount, currencyCode: alloc.discountedAmount.currencyCode }} />
+                </span>
+              )}
+              {!dc.applicable && <span data-warning>不适用</span>}
+            </div>
+            <button
+              type="button"
+              data-remove
+              onClick={async () => {
+                await removeFromCart(dc.code);
+                analytics.emit('discount_remove_from_cart', { code: dc.code });
+              }}
+            >
+              ×
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ============================================================
+// 3. BestDiscountHint
+// ============================================================
+
+export interface BestDiscountHintProps {
+  className?: string;
+  /** 自定义渲染（高级用法） */
+  render?: (best: { discount: DiscountClaim; estimatedAmount: number; apply: () => Promise<void> }) => React.ReactNode;
+}
+
+export function BestDiscountHint(props: BestDiscountHintProps) {
+  const { className, render } = props;
+  const { bestApplicableForCart, applyToCart } = useDiscounts();
+  const analytics = useAnalytics();
+  if (!bestApplicableForCart) return null;
+  const { discount: claim, estimatedAmount } = bestApplicableForCart;
+  const code = claim.discount.code;
+  if (!code) return null;
+
+  const apply = async () => {
+    await applyToCart(code);
+    analytics.emit('discount_apply_to_cart', { code, source: 'best_hint' });
+  };
+
+  if (render) return <>{render({ discount: claim, estimatedAmount, apply })}</>;
+
+  return (
+    <div data-best-discount-hint className={className}>
+      <div data-msg>
+        使用 <strong data-code>{code}</strong> 可省{' '}
+        <strong data-amount><Money data={{ amount: String(estimatedAmount), currencyCode: 'CNY' }} /></strong>
+      </div>
+      <button type="button" onClick={apply} data-apply>立即使用</button>
+    </div>
+  );
+}
+
+// ============================================================
+// 4. ClaimableDiscountList
+// ============================================================
+
+export interface ClaimableDiscountListProps {
+  scope?: 'store' | 'product';
+  /** scope='product' 时必传 */
+  productHandle?: string;
+  first?: number;
+  className?: string;
+  emptyText?: React.ReactNode;
+  /** 自定义渲染（高级用法） */
+  renderItem?: (discount: Discount) => React.ReactNode;
+}
+
+export function ClaimableDiscountList(props: ClaimableDiscountListProps) {
+  const { scope = 'store', productHandle, first = 10, className, emptyText = null, renderItem } = props;
+  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';
+
+  if (loading) return null;
+  if (list.length === 0) return <>{emptyText}</>;
+
+  return (
+    <div data-claimable-discount-list data-scope={scope} className={className}>
+      {list.slice(0, first).map((d) => (
+        <React.Fragment key={d.id}>
+          {renderItem ? renderItem(d) : <DefaultClaimableItem discount={d} />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+function DefaultClaimableItem({ discount: d }: { discount: Discount }) {
+  return (
+    <div data-claimable-item>
+      <div data-info>
+        <div data-title>{d.title}</div>
+        <div data-value>{formatDiscountValue(d)}</div>
+        {d.minSubtotal && (
+          <div data-condition>
+            满 <Money data={{ amount: d.minSubtotal.amount, currencyCode: d.minSubtotal.currencyCode }} /> 可用
+          </div>
+        )}
+        {d.endsAt && (
+          <div data-deadline>{new Date(d.endsAt).toLocaleDateString('zh-CN')} 过期</div>
+        )}
+      </div>
+      {d.code && <DiscountClaimButton discount={d}>领取</DiscountClaimButton>}
+    </div>
+  );
+}
+
+function formatDiscountValue(d: Discount): string {
+  if (d.value.__typename === 'DiscountPercentage') {
+    return `${100 - d.value.percentage} 折`;
+  }
+  if (d.value.__typename === 'DiscountAmount') {
+    return `减 ¥${d.value.amount.amount}`;
+  }
+  return '免运费';
+}
+
+// ============================================================
+// 5. DiscountClaimButton
+// ============================================================
+
+export interface DiscountClaimButtonProps {
+  discount: Discount;
+  children?: React.ReactNode;
+  loadingText?: React.ReactNode;
+  claimedText?: React.ReactNode;
+  onClaimed?: () => void;
+  onError?: (msg: string) => void;
+  className?: string;
+}
+
+export function DiscountClaimButton(props: DiscountClaimButtonProps) {
+  const {
+    discount, children = '领取',
+    loadingText = '领取中…', claimedText = '已领取',
+    onClaimed, onError, className,
+  } = props;
+  const { claim, myDiscounts } = 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 handleClaim = async () => {
+    if (!discount.code) return;
+    setLoading(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 });
+      }
+    } finally {
+      setLoading(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}
+      >
+        {loading ? loadingText : children}
+      </button>
+      {err && <div data-error>{err}</div>}
+    </>
+  );
+}
+
+// ============================================================
+// 6. MyDiscountList (我的卡包)
+// ============================================================
+
+export interface MyDiscountListProps {
+  className?: string;
+  emptyText?: React.ReactNode;
+  /** 过滤 tabs（available / used / expired），默认显示 available */
+  filter?: 'available' | 'used' | 'expired' | 'all';
+}
+
+export function MyDiscountList(props: MyDiscountListProps) {
+  const { className, emptyText = '还没有优惠券', filter = 'available' } = props;
+  const { myDiscounts, myDiscountsStatus } = useDiscounts();
+
+  if (myDiscountsStatus === 'loading') return null;
+  if (myDiscountsStatus === 'unauthenticated') return null;
+
+  const filtered = myDiscounts.filter((c) => {
+    if (filter === 'all') return true;
+    if (filter === 'expired') return c.isExpired;
+    if (filter === 'used') return c.remainingUses === 0 && !c.isExpired;
+    // available
+    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) => (
+        <div
+          key={c.id}
+          data-my-discount-item
+          data-expired={c.isExpired ? '' : undefined}
+          data-used={c.remainingUses === 0 ? '' : undefined}
+        >
+          <div data-info>
+            <div data-title>{c.discount.title}</div>
+            <div data-value>{formatClaimValue(c)}</div>
+            {c.discount.minSubtotal && (
+              <div data-condition>
+                满 <Money data={{ amount: c.discount.minSubtotal.amount, currencyCode: c.discount.minSubtotal.currencyCode }} /> 可用
+              </div>
+            )}
+            {c.expiresAt && (
+              <div data-deadline>{new Date(c.expiresAt).toLocaleDateString('zh-CN')} 过期</div>
+            )}
+          </div>
+          {c.discount.code && <code data-code>{c.discount.code}</code>}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function formatClaimValue(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 '免运费';
+}