@shopify/hydrogen-react 0.0.0-next-182fb2f → 0.0.0-next-59d697b

package/dist/prod/CartCheckoutButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.js","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <button\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,eAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,aAA9B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,QAAAA,UAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;;"}

package/dist/prod/CartCheckoutButton.mjs

@@ -0,0 +1,29 @@
+import { useState, useEffect } from "react";
+import { useCart } from "./CartProvider.mjs";
+import { jsx } from "react/jsx-runtime";
+function CartCheckoutButton(props) {
+  const [requestedCheckout, setRequestedCheckout] = useState(false);
+  const {
+    status,
+    checkoutUrl
+  } = useCart();
+  const {
+    children,
+    ...passthroughProps
+  } = props;
+  useEffect(() => {
+    if (requestedCheckout && checkoutUrl && status === "idle") {
+      window.location.href = checkoutUrl;
+    }
+  }, [requestedCheckout, status, checkoutUrl]);
+  return /* @__PURE__ */ jsx("button", {
+    ...passthroughProps,
+    disabled: requestedCheckout || passthroughProps.disabled,
+    onClick: () => setRequestedCheckout(true),
+    children
+  });
+}
+export {
+  CartCheckoutButton
+};
+//# sourceMappingURL=CartCheckoutButton.mjs.map

package/dist/prod/CartCheckoutButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CartCheckoutButton.mjs","sources":["../../src/CartCheckoutButton.tsx"],"sourcesContent":["import {ReactNode, useEffect, useState} from 'react';\nimport {useCart} from './CartProvider.js';\n\ntype PropsWeControl = 'onClick';\n\n/**\n * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.\n * It must be a descendent of a `CartProvider` component.\n */\nexport function CartCheckoutButton(\n  props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {\n    /** A `ReactNode` element. */\n    children: ReactNode;\n  }\n) {\n  const [requestedCheckout, setRequestedCheckout] = useState(false);\n  const {status, checkoutUrl} = useCart();\n  const {children, ...passthroughProps} = props;\n\n  useEffect(() => {\n    if (requestedCheckout && checkoutUrl && status === 'idle') {\n      window.location.href = checkoutUrl;\n    }\n  }, [requestedCheckout, status, checkoutUrl]);\n\n  return (\n    <button\n      {...passthroughProps}\n      disabled={requestedCheckout || passthroughProps.disabled}\n      onClick={() => setRequestedCheckout(true)}\n    >\n      {children}\n    </button>\n  );\n}\n"],"names":["CartCheckoutButton","props","requestedCheckout","setRequestedCheckout","useState","status","checkoutUrl","useCart","children","passthroughProps","useEffect","window","location","href","disabled"],"mappings":";;;AASO,SAASA,mBACdC,OAIA;AACA,QAAM,CAACC,mBAAmBC,oBAApB,IAA4CC,SAAS,KAAD;AACpD,QAAA;AAAA,IAACC;AAAAA,IAAQC;AAAAA,MAAeC,QAA9B;AACM,QAAA;AAAA,IAACC;AAAAA,OAAaC;AAAAA,EAAoBR,IAAAA;AAExCS,YAAU,MAAM;AACVR,QAAAA,qBAAqBI,eAAeD,WAAW,QAAQ;AACzDM,aAAOC,SAASC,OAAOP;AAAAA,IACxB;AAAA,EACA,GAAA,CAACJ,mBAAmBG,QAAQC,WAA5B,CAJM;AAMT;OAEQG;AAAAA,IACJ,UAAUP,qBAAqBO,iBAAiBK;AAAAA,IAChD,SAAS,MAAMX,qBAAqB,IAAD;AAAA,IAHrC;AAAA,EAAA,CADF;AASD;"}

package/dist/prod/index.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const AddToCartButton = require("./AddToCartButton.js");
+const CartCheckoutButton = require("./CartCheckoutButton.js");
 const CartProvider = require("./CartProvider.js");
 const ExternalVideo = require("./ExternalVideo.js");
 const flattenConnection = require("./flatten-connection.js");
@@ -18,6 +19,7 @@ const storefrontClient = require("./storefront-client.js");
 const useMoney = require("./useMoney.js");
 const Video = require("./Video.js");
 exports.AddToCartButton = AddToCartButton.AddToCartButton;
+exports.CartCheckoutButton = CartCheckoutButton.CartCheckoutButton;
 exports.CartProvider = CartProvider.CartProvider;
 exports.useCart = CartProvider.useCart;
 exports.ExternalVideo = ExternalVideo.ExternalVideo;

package/dist/prod/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/prod/index.mjs

@@ -1,4 +1,5 @@
 import { AddToCartButton } from "./AddToCartButton.mjs";
+import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
 import { CartProvider, useCart } from "./CartProvider.mjs";
 import { ExternalVideo } from "./ExternalVideo.mjs";
 import { flattenConnection } from "./flatten-connection.mjs";
@@ -17,6 +18,7 @@ import { useMoney } from "./useMoney.mjs";
 import { Video } from "./Video.mjs";
 export {
   AddToCartButton,
+  CartCheckoutButton,
   CartProvider,
   ExternalVideo,
   Image,

package/dist/prod/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/types/AddToCartButton.d.ts

@@ -1,4 +1,4 @@
-import { Ref, ReactNode } from 'react';
+import { BaseButtonProps } from './BaseButton.js';
 interface AddToCartButtonProps {
     /** An array of cart line attributes that belong to the item being added to the cart. */
     attributes?: {
@@ -19,18 +19,4 @@ interface AddToCartButtonProps {
  * It must be a descendent of the `CartProvider` component.
  */
 export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
-export interface CustomBaseButtonProps<AsType> {
-    /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */
-    as?: AsType;
-    /** Any ReactNode elements. */
-    children: ReactNode;
-    /** Click event handler. Default behaviour triggers unless prevented */
-    onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
-    /** A default onClick behavior */
-    defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
-    /** A ref to the underlying button */
-    buttonRef?: Ref<HTMLButtonElement>;
-}
-export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
-export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;
 export {};

package/dist/types/BaseButton.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode, Ref } from 'react';
+export interface CustomBaseButtonProps<AsType> {
+    /** Provide a React element or component to render as the underlying button. Note: for accessibility compliance, almost always you should use a `button` element, or a component that renders an underlying button. */
+    as?: AsType;
+    /** Any ReactNode elements. */
+    children: ReactNode;
+    /** Click event handler. Default behaviour triggers unless prevented */
+    onClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A default onClick behavior */
+    defaultOnClick?: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void | boolean;
+    /** A ref to the underlying button */
+    buttonRef?: Ref<HTMLButtonElement>;
+}
+export declare type BaseButtonProps<AsType extends React.ElementType> = CustomBaseButtonProps<AsType> & Omit<React.ComponentPropsWithoutRef<AsType>, keyof CustomBaseButtonProps<AsType>>;
+export declare function BaseButton<AsType extends React.ElementType = 'button'>(props: BaseButtonProps<AsType>): JSX.Element;

package/dist/types/CartCheckoutButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+declare type PropsWeControl = 'onClick';
+/**
+ * The `CartCheckoutButton` component renders a button that redirects to the checkout URL for the cart.
+ * It must be a descendent of a `CartProvider` component.
+ */
+export declare function CartCheckoutButton(props: Omit<JSX.IntrinsicElements['button'], PropsWeControl> & {
+    /** A `ReactNode` element. */
+    children: ReactNode;
+}): JSX.Element;
+export {};

package/dist/types/index.d.cts

@@ -1,5 +1,6 @@
 export { AddToCartButton } from './AddToCartButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
+export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 export { AddToCartButton } from './AddToCartButton.js';
 export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
+export { CartCheckoutButton } from './CartCheckoutButton.js';
 export { CartProvider, useCart } from './CartProvider.js';
 export { ExternalVideo } from './ExternalVideo.js';
 export { flattenConnection } from './flatten-connection.js';

package/dist/umd/hydrogen-react.dev.js

@@ -766,7 +766,7 @@ query CartQuery($id: ID!, $numCartLines: Int = 250, $country: CountryCode = ZZ)
 ${cartFragment}
 `;
   const SFAPI_VERSION = "2022-10";
-  var _jsxFileName$c = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
+  var _jsxFileName$e = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ShopifyProvider.tsx";
   const ShopifyContext = React.createContext({
     storeDomain: "test.myshopify.com",
     storefrontToken: "abc123",
@@ -797,7 +797,7 @@ ${cartFragment}
       value: finalConfig,
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
+        fileName: _jsxFileName$e,
         lineNumber: 49,
         columnNumber: 5
       }
@@ -1312,7 +1312,7 @@ ${cartFragment}
   function isCartFetchResultEvent(event) {
     return event.type === "RESOLVE" || event.type === "ERROR" || event.type === "CART_COMPLETED";
   }
-  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
+  var _jsxFileName$d = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartProvider.tsx";
   const CartContext = React.createContext(null);
   function useCart() {
     const context = React.useContext(CartContext);
@@ -1625,7 +1625,7 @@ ${cartFragment}
       value: cartContextValue,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 425,
         columnNumber: 5
       }
@@ -1791,7 +1791,7 @@ fragment ImageFragment on Image {
   height
 }
 `;
-  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ProductProvider.tsx";
+  var _jsxFileName$c = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ProductProvider.tsx";
   const ProductOptionsContext = React.createContext(null);
   function ProductProvider({
     children,
@@ -1877,7 +1877,7 @@ fragment ImageFragment on Image {
       value,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 201,
         columnNumber: 5
       }
@@ -1950,7 +1950,38 @@ fragment ImageFragment on Image {
     }
     return true;
   }
-  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/AddToCartButton.tsx";
+  var _jsxFileName$b = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/BaseButton.tsx";
+  function BaseButton(props) {
+    const {
+      as,
+      onClick,
+      defaultOnClick,
+      children,
+      buttonRef,
+      ...passthroughProps
+    } = props;
+    const handleOnClick = React.useCallback((event) => {
+      if (onClick) {
+        const clickShouldContinue = onClick(event);
+        if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
+          return;
+      }
+      defaultOnClick == null ? void 0 : defaultOnClick(event);
+    }, [defaultOnClick, onClick]);
+    const Component = as || "button";
+    return /* @__PURE__ */ React__default.default.createElement(Component, {
+      ref: buttonRef,
+      onClick: handleOnClick,
+      ...passthroughProps,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 59,
+        columnNumber: 5
+      }
+    }, children);
+  }
+  var _jsxFileName$a = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/AddToCartButton.tsx";
   function AddToCartButton(props) {
     var _a;
     const [addingItem, setAddingItem] = React.useState(false);
@@ -1994,8 +2025,8 @@ fragment ImageFragment on Image {
       defaultOnClick: handleAddItem,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 70,
+        fileName: _jsxFileName$a,
+        lineNumber: 71,
         columnNumber: 7
       }
     }, children), accessibleAddingToCartLabel ? /* @__PURE__ */ React__default.default.createElement("p", {
@@ -2014,38 +2045,36 @@ fragment ImageFragment on Image {
       "aria-live": "assertive",
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 79,
+        fileName: _jsxFileName$a,
+        lineNumber: 80,
         columnNumber: 9
       }
     }, addingItem ? accessibleAddingToCartLabel : null) : null);
   }
-  function BaseButton(props) {
+  var _jsxFileName$9 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/CartCheckoutButton.tsx";
+  function CartCheckoutButton(props) {
+    const [requestedCheckout, setRequestedCheckout] = React.useState(false);
+    const {
+      status,
+      checkoutUrl
+    } = useCart();
     const {
-      as,
-      onClick,
-      defaultOnClick,
       children,
-      buttonRef,
       ...passthroughProps
     } = props;
-    const handleOnClick = React.useCallback((event) => {
-      if (onClick) {
-        const clickShouldContinue = onClick(event);
-        if (typeof clickShouldContinue === "boolean" && clickShouldContinue === false || (event == null ? void 0 : event.defaultPrevented))
-          return;
+    React.useEffect(() => {
+      if (requestedCheckout && checkoutUrl && status === "idle") {
+        window.location.href = checkoutUrl;
       }
-      defaultOnClick == null ? void 0 : defaultOnClick(event);
-    }, [defaultOnClick, onClick]);
-    const Component = as || "button";
-    return /* @__PURE__ */ React__default.default.createElement(Component, {
-      ref: buttonRef,
-      onClick: handleOnClick,
+    }, [requestedCheckout, status, checkoutUrl]);
+    return /* @__PURE__ */ React__default.default.createElement("button", {
       ...passthroughProps,
+      disabled: requestedCheckout || passthroughProps.disabled,
+      onClick: () => setRequestedCheckout(true),
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 157,
+        lineNumber: 27,
         columnNumber: 5
       }
     }, children);
@@ -3357,6 +3386,7 @@ fragment ImageFragment on Image {
     };
   }
   exports2.AddToCartButton = AddToCartButton;
+  exports2.CartCheckoutButton = CartCheckoutButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
   exports2.Image = Image;