@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
65 lines (64 loc) • 2.21 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const ShopifyProvider = require("./ShopifyProvider.js");
const loadScript = require("./load-script.js");
const jsxRuntime = require("react/jsx-runtime");
const SHOPJS_URL = "https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js";
function ShopPayButton({
variantIds,
className,
variantIdsAndQuantities,
width
}) {
const {
storeDomain
} = ShopifyProvider.useShop();
const shopPayLoadedStatus = loadScript.useLoadScript(SHOPJS_URL);
let ids;
if (variantIds && variantIdsAndQuantities) {
throw new Error(DoublePropsErrorMessage);
}
if (variantIds) {
ids = variantIds.reduce((prev, curr) => {
const bareId = getIdFromGid(curr);
if (bareId) {
prev.push(bareId);
}
return prev;
}, []);
} else if (variantIdsAndQuantities) {
ids = variantIdsAndQuantities.reduce((prev, curr) => {
var _a;
const bareId = getIdFromGid(curr == null ? void 0 : curr.id);
if (bareId) {
prev.push(`${bareId}:${(_a = curr == null ? void 0 : curr.quantity) != null ? _a : 1}`);
}
return prev;
}, []);
} else {
throw new Error(MissingPropsErrorMessage);
}
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", {
"store-url": `https://${storeDomain}`,
variants: ids.join(",")
})
});
}
function getIdFromGid(id) {
if (!id)
return;
return id.split("/").pop();
}
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`;
exports.DoublePropsErrorMessage = DoublePropsErrorMessage;
exports.MissingPropsErrorMessage = MissingPropsErrorMessage;
exports.ShopPayButton = ShopPayButton;
exports.getIdFromGid = getIdFromGid;
//# sourceMappingURL=ShopPayButton.js.map