@shopbb/helium 0.3.1 → 0.5.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/CartProvider.tsx

@@ -101,8 +101,17 @@ const CART_FRAGMENT = /* GraphQL */ `
     }
     cost {
       subtotalAmount { amount currencyCode }
+      totalDiscountAmount { amount currencyCode }
       totalAmount { amount currencyCode }
     }
+    discountCodes { code applicable }
+    discountAllocations {
+      discountedAmount { amount currencyCode }
+      targetType
+      targetId
+      title
+      code
+    }
   }
 `;
 

package/src/components/DiscountComponents.tsx

@@ -0,0 +1,253 @@
+/**
+ * Discount UI 组件集
+ *
+ *   <AppliedDiscountList>        当前 cart 已应用的折扣分配（只读）
+ *   <ClaimableDiscountList>      可领取的优惠券列表（首页 / 商品页）
+ *   <DiscountClaimButton>        单个领取按钮
+ *   <MyDiscountList>             我的卡包
+ *
+ * 注：W5 已删除以下组件（旧设计）：
+ *   - <DiscountCodeInput>: 输入框范式已过时。请用 <DiscountSelector> + <ClaimableDiscountList>。
+ *   - <BestDiscountHint>: 服务端自动选择最佳券，不需要前端提示。用户在 <DiscountSelector> 看到 / 切换。
+ *
+ * 全部无样式 + data-* 钩子。
+ */
+
+import * as React from 'react';
+import { useDiscounts, useProductDiscounts, type Discount, type DiscountClaim } from './DiscountProvider';
+import { useAnalytics } from './AnalyticsProvider';
+import { Money } from './Money';
+
+// ============================================================
+// AppliedDiscountList
+// ============================================================
+
+export interface AppliedDiscountListProps {
+  className?: string;
+  emptyText?: React.ReactNode;
+}
+
+export function AppliedDiscountList(props: AppliedDiscountListProps) {
+  const { className, emptyText = null } = props;
+  const { cartAllocations } = useDiscounts();
+
+  if (cartAllocations.length === 0) return <>{emptyText}</>;
+
+  return (
+    <div data-applied-discount-list className={className}>
+      {cartAllocations.map((alloc, i) => (
+        <div key={alloc.code || i} data-applied-item>
+          <div data-info>
+            <span data-title>{alloc.title}</span>
+            {alloc.code && <span data-code>{alloc.code}</span>}
+          </div>
+          <span data-discount-amount>
+            − <Money data={{ amount: alloc.discountedAmount.amount, currencyCode: alloc.discountedAmount.currencyCode }} />
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ============================================================
+// ClaimableDiscountList
+// ============================================================
+
+export interface ClaimableDiscountListProps {
+  scope?: 'store' | '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 '免运费';
+}
+
+// ============================================================
+// DiscountClaimButton
+// ============================================================
+
+export interface DiscountClaimButtonProps {
+  discount: Discount;
+  children?: React.ReactNode;
+  loadingText?: React.ReactNode;
+  claimedText?: React.ReactNode;
+  /** 未登录时跳转的路径。默认 `/login?next=` + 当前路径 */
+  loginPath?: string;
+  onClaimed?: () => void;
+  onError?: (msg: string) => void;
+  className?: string;
+}
+
+export function DiscountClaimButton(props: DiscountClaimButtonProps) {
+  const {
+    discount, children = '领取',
+    loadingText = '领取中…', claimedText = '已领取',
+    loginPath,
+    onClaimed, onError, 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 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);
+    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>}
+    </>
+  );
+}
+
+// ============================================================
+// MyDiscountList (我的卡包)
+// ============================================================
+
+export interface MyDiscountListProps {
+  className?: string;
+  emptyText?: React.ReactNode;
+  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;
+    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 '免运费';
+}