@shopbb/helium 0.6.3 → 0.7.0

package/src/components/BuyNowButton.tsx

@@ -1,46 +1,28 @@
 /**
- * <BuyNowButton> — 对齐 Hydrogen React
+ * <BuyNowButton> — "立即购买"按钮
  *
- * "立即购买" — 创建/添加 line + 跳 checkout，一步到位。
- *
- * 实现：
- *   1. 内部包 <CartForm action="LinesAdd" inputs={{lines, navigateOnSuccess: '/checkout'}}>
- *   2. submit 成功后 client 自动 navigate 到 checkoutUrl（或 fallback /checkout）
- *   3. 无 JS 时：浏览器走 form POST，服务端 303 跳 /checkout
+ * helium 0.7：本质是 <CartForm action=LinesAdd> + 隐藏 redirectTo 字段。
+ * shopflare cart.tsx action 收到 redirectTo 后会 303 跳转 checkout。
  *
  * 用法：
- *   <BuyNowButton variantId="gid://..." quantity={1}>立即购买</BuyNowButton>
+ *   <BuyNowButton variantId={variantId} quantity={1}>立即购买</BuyNowButton>
  */
 
 import * as React from 'react';
-import { CartForm, useFetcher, type CartLineInput } from './CartForm';
-import { useAnalytics } from './AnalyticsProvider';
+import { CartForm, type CartLineInput } from './CartForm';
 
 export interface BuyNowButtonProps {
-  /** 必传 variant GID */
   variantId: string;
-  /** 数量，默认 1 */
   quantity?: number;
-  /** 行级 attributes */
   attributes?: Array<{ key: string; value: string }>;
-  /** 加购后跳转的 URL（client 端），默认走 cart.checkoutUrl，回退 /checkout */
+  selectedVariant?: any;
+  /** 加购成功后跳转的 URL；商家 action 内部需根据 redirectTo 触发 redirect */
   redirectTo?: string;
-  /** 失败回调 */
-  onError?: (err: Error) => void;
-  /** Loading 文案 */
-  loadingText?: React.ReactNode;
-  /** Disabled 文案 */
   unavailableText?: React.ReactNode;
-  /** disabled */
   disabled?: boolean;
-  /** Form className */
   className?: string;
-  /** 按钮 className */
-  buttonClassName?: string;
-  /** 按钮 content */
-  children?: React.ReactNode;
-  /** 提交 route，默认 /cart */
   route?: string;
+  children?: React.ReactNode;
 }
 
 export function BuyNowButton(props: BuyNowButtonProps) {
@@ -48,88 +30,41 @@ export function BuyNowButton(props: BuyNowButtonProps) {
     variantId,
     quantity = 1,
     attributes,
-    redirectTo,
-    onError,
-    loadingText = '处理中...',
+    selectedVariant,
+    redirectTo = '/checkout',
     unavailableText = '暂不可购',
     disabled = false,
     className,
-    buttonClassName,
-    children = '立即购买',
     route = '/cart',
+    children = '立即购买',
   } = props;
 
   const line: CartLineInput = { merchandiseId: variantId, quantity };
   if (attributes && attributes.length > 0) line.attributes = attributes;
+  if (selectedVariant) line.selectedVariant = selectedVariant;
 
   return (
     <CartForm
       route={route}
       action={CartForm.ACTIONS.LinesAdd}
       inputs={{ lines: [line] }}
-      className={className}
     >
-      <BuyNowButtonInner
-        disabled={disabled}
-        buttonClassName={buttonClassName}
-        loadingText={loadingText}
-        unavailableText={unavailableText}
-        variantId={variantId}
-        quantity={quantity}
-        redirectTo={redirectTo}
-        onError={onError}
-      >
-        {children}
-      </BuyNowButtonInner>
+      {(fetcher) => {
+        const submitting = fetcher.state !== 'idle';
+        return (
+          <>
+            <input type="hidden" name="redirectTo" value={redirectTo} />
+            <button
+              type="submit"
+              className={className}
+              disabled={disabled || submitting}
+              data-buy-now
+            >
+              {submitting ? '处理中...' : disabled ? unavailableText : children}
+            </button>
+          </>
+        );
+      }}
     </CartForm>
   );
 }
-
-function BuyNowButtonInner({
-  disabled, buttonClassName, loadingText, unavailableText, children,
-  variantId, quantity, redirectTo, onError,
-}: {
-  disabled: boolean;
-  buttonClassName?: string;
-  loadingText: React.ReactNode;
-  unavailableText: React.ReactNode;
-  children: React.ReactNode;
-  variantId: string;
-  quantity: number;
-  redirectTo?: string;
-  onError?: (err: Error) => void;
-}) {
-  const fetcher = useFetcher();
-  const analytics = useAnalytics();
-  const prevState = React.useRef(fetcher.state);
-
-  React.useEffect(() => {
-    const wasNonIdle = prevState.current !== 'idle';
-    const isIdle = fetcher.state === 'idle';
-    if (wasNonIdle && isIdle) {
-      if (fetcher.error) {
-        onError?.(new Error(fetcher.error));
-      } else if (fetcher.data?.cart) {
-        analytics.emit('buy_now', { variantId, quantity });
-        const target = redirectTo || (fetcher.data.cart as any).checkoutUrl || '/checkout';
-        if (typeof window !== 'undefined') {
-          window.location.href = target;
-        }
-      }
-    }
-    prevState.current = fetcher.state;
-  }, [fetcher.state, fetcher.error, fetcher.data, redirectTo, onError, analytics, variantId, quantity]);
-
-  const pending = fetcher.state !== 'idle';
-  return (
-    <button
-      type="submit"
-      className={buttonClassName}
-      disabled={disabled || pending}
-      data-buy-now
-      data-loading={pending ? '' : undefined}
-    >
-      {pending ? loadingText : disabled ? unavailableText : children}
-    </button>
-  );
-}

package/src/components/CartCheckoutButton.tsx

@@ -1,54 +1,38 @@
 /**
  * <CartCheckoutButton> — 对齐 Hydrogen React
  *
- * 渲染一个跳到 cart.checkoutUrl 的按钮。最常见的"去结算"入口。
+ * 渲染跳转到 cart.checkoutUrl 的按钮 / 链接。
  *
- * 行为：
- *   - 取 cart.checkoutUrl，无 cart / 空 cart 时按钮 disabled
- *   - 默认 <a> 元素（无 JS 也能用），可改成 <button> + onClick
- *   - 渲染纯样式，行为非业务逻辑
+ * helium 0.7：从 props 接 checkoutUrl，不再 useCart()。
  *
- * 用法：
- *   <CartCheckoutButton>去结算</CartCheckoutButton>
- *
- *   // 自定义渲染
- *   <CartCheckoutButton>
- *     {(href, disabled) => (
- *       <a href={href} className="my-cta" aria-disabled={disabled}>
- *         结算 {cart.totalQuantity} 件
- *       </a>
- *     )}
+ *   <CartCheckoutButton checkoutUrl={cart?.checkoutUrl} disabled={!cart?.totalQuantity}>
+ *     去结算
  *   </CartCheckoutButton>
  */
 
 import * as React from 'react';
-import { useCart } from './CartProvider';
 
 export interface CartCheckoutButtonProps {
-  /** className */
-  className?: string;
-  /** 强制 disabled（即使 cart 有 checkoutUrl） */
+  /** cart.checkoutUrl — 没有时按钮 disabled */
+  checkoutUrl?: string | null;
+  /** 强制 disabled */
   disabled?: boolean;
   /** 按钮内容；不传默认 "去结算" */
   children?: React.ReactNode | ((href: string, disabled: boolean) => React.ReactNode);
-  /** 自定义渲染元素，默认 a */
+  /** className */
+  className?: string;
+  /** 渲染元素：默认 a，可改 button */
   as?: 'a' | 'button';
-  /** 点击回调（事件触发） */
   onClick?: React.MouseEventHandler;
-  /** 透传其它 props 到根元素 */
   [key: string]: any;
 }
 
 export function CartCheckoutButton(props: CartCheckoutButtonProps) {
-  const { className, disabled: disabledProp, children, as = 'a', onClick, ...rest } = props;
-  const { cart } = useCart();
-
-  const href = (cart as any)?.checkoutUrl as string | undefined;
-  const noCart = !cart || cart.totalQuantity === 0 || !href;
-  const disabled = !!disabledProp || noCart;
+  const { checkoutUrl, disabled: disabledProp, children, className, as = 'a', onClick, ...rest } = props;
+  const disabled = !!disabledProp || !checkoutUrl;
 
   if (typeof children === 'function') {
-    return <>{children(href || '#', disabled)}</>;
+    return <>{children(checkoutUrl || '#', disabled)}</>;
   }
 
   const label = children ?? '去结算';
@@ -63,8 +47,8 @@ export function CartCheckoutButton(props: CartCheckoutButtonProps) {
         onClick={(e) => {
           if (disabled) return;
           onClick?.(e);
-          if (!e.defaultPrevented && href) {
-            window.location.href = href;
+          if (!e.defaultPrevented && checkoutUrl) {
+            window.location.href = checkoutUrl;
           }
         }}
         {...rest}
@@ -74,10 +58,9 @@ export function CartCheckoutButton(props: CartCheckoutButtonProps) {
     );
   }
 
-  // <a> 形式：无 JS 也能跳
   return (
     <a
-      href={disabled ? undefined : href}
+      href={disabled ? undefined : (checkoutUrl || undefined)}
       className={className}
       aria-disabled={disabled || undefined}
       data-cart-checkout-button

package/src/components/CartCost.tsx

@@ -1,28 +1,17 @@
 /**
  * <CartCost> — 对齐 Hydrogen React
  *
- * 从 <CartProvider> 拿 cart.cost 渲染金额。amountType 控制渲染哪个：
- *   "total"      → cost.totalAmount (默认)
- *   "subtotal"   → cost.subtotalAmount
- *   "tax"        → cost.totalTaxAmount
- *   "duty"       → cost.totalDutyAmount
- *   "discount"   → cost.totalDiscountAmount（shopbb-extension）
+ * 渲染 cart 上不同维度的金额。
  *
- * 内部用 <Money> 渲染，自动按 currencyCode 加货币符号。
+ * Hydrogen 0.7 改造：cart 通过 prop 接入（不再 useCart()）。
+ * 商家从 loader 拿 cart 后传入。
  *
- * 用法：
- *   <CartCost amountType="subtotal" />      ¥300.00
- *   <CartCost amountType="discount" as="strong" />  ¥30.00
- *   <CartCost amountType="total" withoutTrailingZeros />
- *
- * 自定义渲染：
- *   <CartCost amountType="total">
- *     {(money) => <strong>{money.amount} {money.currencyCode}</strong>}
- *   </CartCost>
+ *   <CartCost cart={cart} amountType="subtotal" />
+ *   <CartCost cart={cart} amountType="total" as="strong" />
+ *   <CartCost cart={cart} amountType="discount">{(money) => <strong>{money.amount}</strong>}</CartCost>
  */
 
 import * as React from 'react';
-import { useCart } from './CartProvider';
 import { Money, type MoneyProps } from './Money';
 
 export interface MoneyValue {
@@ -31,24 +20,24 @@ export interface MoneyValue {
 }
 
 export interface CartCostProps extends Omit<MoneyProps, 'data' | 'children'> {
+  /** cart 对象 — 必须包含 .cost 字段 */
+  cart: any;
   /**
-   * 渲染哪一项 cost。默认 "total"。
-   * - "total"    : 含运费 / 税 / 折扣的最终金额
-   * - "subtotal" : 商品小计（折扣前 / 运费前）
-   * - "tax"      : 税
-   * - "duty"     : 关税
-   * - "discount" : 优惠金额（shopbb extension）
+   * 渲染哪一项 cost：
+   * - "total"    : cart.cost.totalAmount（默认）
+   * - "subtotal" : cart.cost.subtotalAmount
+   * - "tax"      : cart.cost.totalTaxAmount
+   * - "duty"     : cart.cost.totalDutyAmount
+   * - "discount" : cart.cost.totalDiscountAmount（shopbb extension）
    */
   amountType?: 'total' | 'subtotal' | 'tax' | 'duty' | 'discount';
-  /** 自定义渲染：(money) => ReactNode */
+  /** 自定义渲染 */
   children?: (money: MoneyValue) => React.ReactNode;
 }
 
 export function CartCost(props: CartCostProps) {
-  const { amountType = 'total', children, ...moneyProps } = props;
-  const { cart } = useCart();
+  const { cart, amountType = 'total', children, ...moneyProps } = props;
   if (!cart?.cost) return null;
-
   const cost = cart.cost as any;
   let money: MoneyValue | null = null;
   switch (amountType) {
@@ -59,7 +48,6 @@ export function CartCost(props: CartCostProps) {
     case 'discount': money = cost.totalDiscountAmount ?? null; break;
   }
   if (!money) return null;
-
   if (children) return <>{children(money)}</>;
   return <Money data={money} {...moneyProps} />;
 }