@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
65 lines (64 loc) • 1.93 kB
JavaScript
import { useShop } from "./ShopifyProvider.mjs";
import { useLoadScript } from "./load-script.mjs";
import { jsx } from "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
} = useShop();
const shopPayLoadedStatus = 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__ */ jsx("div", {
className,
style,
children: shopPayLoadedStatus === "done" && /* @__PURE__ */ 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`;
export {
DoublePropsErrorMessage,
MissingPropsErrorMessage,
ShopPayButton,
getIdFromGid
};
//# sourceMappingURL=ShopPayButton.mjs.map