@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
86 lines (85 loc) • 3.09 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { useShop, defaultShopifyContext } from "./ShopifyProvider.mjs";
import { useLoadScript } from "./load-script.mjs";
import { parseGid } from "./analytics-utils.mjs";
const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
function isChannel(channel) {
return channel === "headless" || channel === "hydrogen";
}
function ShopPayButton({
channel,
variantIds,
className,
variantIdsAndQuantities,
width,
storeDomain: _storeDomain
}) {
const shop = useShop();
const storeDomain = _storeDomain || (shop == null ? void 0 : shop.storeDomain);
const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);
let ids = [];
let channelAttribution;
if (!storeDomain || storeDomain === defaultShopifyContext.storeDomain) {
throw new Error(MissingStoreDomainErrorMessage);
}
if (variantIds && variantIdsAndQuantities) {
throw new Error(DoublePropsErrorMessage);
}
if (!variantIds && !variantIdsAndQuantities) {
throw new Error(MissingPropsErrorMessage);
}
if (channel) {
if (isChannel(channel)) {
channelAttribution = channel;
} else {
throw new Error(InvalidChannelErrorMessage);
}
}
if (variantIds) {
ids = variantIds.reduce((prev, curr) => {
const bareId = parseGid(curr).id;
if (bareId) {
prev.push(bareId);
}
return prev;
}, []);
} else if (variantIdsAndQuantities) {
ids = variantIdsAndQuantities.reduce((prev, curr) => {
const bareId = parseGid(curr == null ? void 0 : curr.id).id;
if (bareId) {
prev.push(`${bareId}:${(curr == null ? void 0 : curr.quantity) ?? 1}`);
}
return prev;
}, []);
} else {
throw new Error(MissingPropsErrorMessage);
}
if (ids.length === 0) {
throw new Error(InvalidPropsErrorMessage);
}
const style = width ? {
"--shop-pay-button-width": width
} : void 0;
return /* @__PURE__ */ jsx("div", { className, style, children: shopPayLoadedStatus === "done" && /* @__PURE__ */ jsx(
"shop-pay-button",
{
...channelAttribution ? { channel: channelAttribution } : {},
"store-url": storeDomain,
variants: ids.join(",")
}
) });
}
const MissingStoreDomainErrorMessage = 'You must pass a "storeDomain" prop to the "ShopPayButton" component, or wrap it in a "ShopifyProvider" component.';
const InvalidPropsErrorMessage = `You must pass in "variantIds" in the form of ["gid://shopify/ProductVariant/1"]`;
const MissingPropsErrorMessage = `You must pass in either "variantIds" or "variantIdsAndQuantities" to ShopPayButton`;
const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;
const InvalidChannelErrorMessage = `Invalid channel attribution value. Must be either "headless" or "hydrogen"`;
export {
DoublePropsErrorMessage,
InvalidChannelErrorMessage,
InvalidPropsErrorMessage,
MissingPropsErrorMessage,
MissingStoreDomainErrorMessage,
ShopPayButton
};
//# sourceMappingURL=ShopPayButton.mjs.map