@shopbb/helium 0.3.0 → 0.4.0

package/src/components/AddressPicker.tsx

@@ -0,0 +1,152 @@
+/**
+ * <AddressPicker>
+ *
+ * Checkout 用的地址选择器。**自带**：
+ *   - 从 useAddressBook() 拿 list
+ *   - radio 渲染 + 默认选 defaultAddress
+ *   - 选 "新地址" 时展开新增表单
+ *
+ * 用法（受控）：
+ *   <AddressPicker
+ *     value={selectedAddressId}
+ *     onChange={(id, addr) => setSelectedAddressId(id)}
+ *     allowNewAddress
+ *     onUseNewAddress={(addr) => setInlineAddress(addr)}
+ *   />
+ *
+ * 用法（非受控）：
+ *   <AddressPicker onSelect={(addr) => ...} />
+ *   组件内部 state；选择后回调商家拿值。
+ */
+
+import * as React from 'react';
+import { useAddressBook, type Address } from './AddressBookProvider';
+import { AddressForm } from './AddressForm';
+
+export interface AddressPickerProps {
+  /** 受控：当前选中的 address ID */
+  value?: string | null;
+  /** 受控：选中变化（同时拿到 address 对象） */
+  onChange?: (addressId: string | null, address: Address | null) => void;
+  /** 非受控：选择时回调（不需要外面 state） */
+  onSelect?: (address: Address | null) => void;
+  /** 是否允许"使用新地址"选项 */
+  allowNewAddress?: boolean;
+  /** 选了"新地址"后填表保存的回调（拿到新建好的 Address） */
+  onUseNewAddress?: (address: Address) => void;
+  /** 空状态：没保存地址时显示什么。默认渲染内嵌 AddressForm */
+  emptyFallback?: React.ReactNode;
+  className?: string;
+}
+
+export function AddressPicker(props: AddressPickerProps) {
+  const {
+    value, onChange, onSelect,
+    allowNewAddress = true,
+    onUseNewAddress,
+    emptyFallback,
+    className,
+  } = props;
+  const { addresses, defaultAddress, status } = useAddressBook();
+
+  // 非受控 fallback
+  const [internalId, setInternalId] = React.useState<string | null>(null);
+  const selectedId = value !== undefined ? value : internalId;
+  const setSelectedId = React.useCallback((id: string | null, addr: Address | null) => {
+    if (value === undefined) setInternalId(id);
+    onChange?.(id, addr);
+    onSelect?.(addr);
+  }, [value, onChange, onSelect]);
+
+  const [showNewForm, setShowNewForm] = React.useState(false);
+
+  // 初次：自动选 default address
+  React.useEffect(() => {
+    if (selectedId == null && defaultAddress) {
+      setSelectedId(defaultAddress.id, defaultAddress);
+    } else if (selectedId == null && addresses.length > 0) {
+      setSelectedId(addresses[0].id, addresses[0]);
+    }
+  }, [defaultAddress, addresses, selectedId, setSelectedId]);
+
+  if (status === 'loading') {
+    return <div data-address-picker data-loading>加载地址中…</div>;
+  }
+
+  // 0 个地址：直接展示一个新增表单
+  if (addresses.length === 0) {
+    if (emptyFallback) return <>{emptyFallback}</>;
+    return (
+      <div data-address-picker data-empty className={className}>
+        <div data-picker-title>填写收货地址</div>
+        <AddressForm
+          onSave={(addr) => {
+            if (addr) {
+              setSelectedId(addr.id, addr);
+              onUseNewAddress?.(addr);
+            }
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div data-address-picker className={className}>
+      <div data-picker-title>选择收货地址</div>
+      <div data-picker-list>
+        {addresses.map((a) => (
+          <label key={a.id} data-picker-item data-active={selectedId === a.id ? '' : undefined}>
+            <input
+              type="radio"
+              name="address-picker"
+              checked={selectedId === a.id}
+              onChange={() => { setSelectedId(a.id, a); setShowNewForm(false); }}
+            />
+            <div>
+              <div data-name>
+                {a.firstName || ''}{a.lastName || ''}
+                {a.isDefault && <span data-default-tag>默认</span>}
+              </div>
+              <div data-line>
+                {a.phone} · {a.province}{a.city}{a.district || ''}{a.address1 || ''}
+              </div>
+            </div>
+          </label>
+        ))}
+        {allowNewAddress && (
+          <label data-picker-item data-active={showNewForm ? '' : undefined}>
+            <input
+              type="radio"
+              name="address-picker"
+              checked={showNewForm}
+              onChange={() => { setShowNewForm(true); setSelectedId(null, null); }}
+            />
+            <div>
+              <div data-name>+ 使用新地址</div>
+              <div data-line>填写一个新地址（默认保存到地址簿）</div>
+            </div>
+          </label>
+        )}
+      </div>
+      {showNewForm && allowNewAddress && (
+        <div data-new-address-form>
+          <AddressForm
+            onCancel={() => {
+              setShowNewForm(false);
+              const fallback = defaultAddress || addresses[0];
+              if (fallback) setSelectedId(fallback.id, fallback);
+            }}
+            onSave={(addr) => {
+              if (addr) {
+                setShowNewForm(false);
+                setSelectedId(addr.id, addr);
+                onUseNewAddress?.(addr);
+              }
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

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 '免运费';
+}