@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
86 lines (85 loc) • 3.45 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const ShopifyProvider = require("./ShopifyProvider.js");
const loadScript = require("./load-script.js");
const analyticsUtils = require("./analytics-utils.js");
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 = ShopifyProvider.useShop();
const storeDomain = _storeDomain || (shop == null ? void 0 : shop.storeDomain);
const shopPayLoadedStatus = loadScript.useLoadScript(SHOPJS_URL);
let ids = [];
let channelAttribution;
if (!storeDomain || storeDomain === ShopifyProvider.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 = analyticsUtils.parseGid(curr).id;
if (bareId) {
prev.push(bareId);
}
return prev;
}, []);
} else if (variantIdsAndQuantities) {
ids = variantIdsAndQuantities.reduce((prev, curr) => {
const bareId = analyticsUtils.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__ */ jsxRuntime.jsx("div", { className, style, children: shopPayLoadedStatus === "done" && /* @__PURE__ */ jsxRuntime.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"`;
exports.DoublePropsErrorMessage = DoublePropsErrorMessage;
exports.InvalidChannelErrorMessage = InvalidChannelErrorMessage;
exports.InvalidPropsErrorMessage = InvalidPropsErrorMessage;
exports.MissingPropsErrorMessage = MissingPropsErrorMessage;
exports.MissingStoreDomainErrorMessage = MissingStoreDomainErrorMessage;
exports.ShopPayButton = ShopPayButton;
//# sourceMappingURL=ShopPayButton.js.map