@cmssy/react 0.2.0 → 0.2.2

package/dist/client.cjs

@@ -1058,6 +1058,9 @@ function fractionDigits(currency) {
 function fromMinorUnits(minor, currency) {
   return minor / 10 ** fractionDigits(currency);
 }
+function toMinorUnits(amount, currency) {
+  return Math.round(amount * 10 ** fractionDigits(currency));
+}
 function formatPrice(minor, currency) {
   if (!Number.isFinite(minor)) return "";
   const code = currency ?? "USD";
@@ -1094,8 +1097,9 @@ function matchVariant(variants, selections) {
 function ProductComponent({ content }) {
   const c = content;
   const { fetchProduct, addToCart } = useCart();
-  const [product, setProduct] = react.useState(null);
-  const [loading, setLoading] = react.useState(true);
+  const injected = c.product ?? null;
+  const [product, setProduct] = react.useState(injected);
+  const [loading, setLoading] = react.useState(!injected && Boolean(c.slug));
   const [selections, setSelections] = react.useState({});
   const [adding, setAdding] = react.useState(false);
   const [added, setAdded] = react.useState(false);
@@ -1104,11 +1108,12 @@ function ProductComponent({ content }) {
   const slugField = c.slugField ?? "slug";
   const slug = c.slug ?? "";
   react.useEffect(() => {
+    if (injected || !slug) return;
     let active = true;
     setLoading(true);
     void (async () => {
       try {
-        const result = slug ? await fetchProduct(modelSlug, { [slugField]: slug }) : null;
+        const result = await fetchProduct(modelSlug, { [slugField]: slug });
         if (active) setProduct(result);
       } finally {
         if (active) setLoading(false);
@@ -1117,7 +1122,7 @@ function ProductComponent({ content }) {
     return () => {
       active = false;
     };
-  }, [fetchProduct, modelSlug, slugField, slug]);
+  }, [injected, fetchProduct, modelSlug, slugField, slug]);
   const axes = react.useMemo(
     () => product ? deriveAxes(product.variants) : [],
     [product]
@@ -1137,7 +1142,7 @@ function ProductComponent({ content }) {
   const imageUrl = c.imageField ? data[c.imageField] : null;
   const hasVariants = product.variants.length > 0;
   const currency = data.currency ?? "USD";
-  const priceMinor = hasVariants ? variant?.price : Number(data[c.priceField ?? "price"] ?? 0);
+  const priceMinor = hasVariants ? variant?.price : toMinorUnits(Number(data[c.priceField ?? "price"] ?? 0), currency);
   const showPrice = priceMinor != null && Number.isFinite(priceMinor);
   const allAxesSelected = axes.every((axis) => selections[axis.name]);
   const outOfStock = variant != null && variant.inventory != null && variant.inventory <= 0;
@@ -1415,6 +1420,7 @@ exports.formatPrice = formatPrice;
 exports.fractionDigits = fractionDigits;
 exports.fromMinorUnits = fromMinorUnits;
 exports.productBlock = productBlock;
+exports.toMinorUnits = toMinorUnits;
 exports.useCart = useCart;
 exports.useCmssyUser = useCmssyUser;
 exports.useEditBridge = useEditBridge;

package/dist/client.d.cts

@@ -138,6 +138,7 @@ declare const checkoutBlock: BlockDefinition;
 
 declare function fractionDigits(currency: string): number;
 declare function fromMinorUnits(minor: number, currency: string): number;
+declare function toMinorUnits(amount: number, currency: string): number;
 declare function formatPrice(minor: number, currency: string | null | undefined): string;
 
-export { type CmssyAddToCartOptions, type CmssyAuthActionResult, CmssyAuthProvider, type CmssyAuthProviderProps, type CmssyAuthState, type CmssyAuthUser, CmssyCart, CmssyCommerceProvider, type CmssyCommerceProviderProps, type CmssyCommerceState, CmssyEditableLayout, type CmssyEditableLayoutProps, CmssyEditablePage, type CmssyEditablePageProps, CmssyLazyEditor, type CmssyLazyEditorProps, CmssyLazyLayout, type CmssyLazyLayoutProps, CmssyOrder, CmssyProduct, type EditBridgeConfig, type EditBridgeState, type PatchMap, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, useCart, useCmssyUser, useEditBridge };
+export { type CmssyAddToCartOptions, type CmssyAuthActionResult, CmssyAuthProvider, type CmssyAuthProviderProps, type CmssyAuthState, type CmssyAuthUser, CmssyCart, CmssyCommerceProvider, type CmssyCommerceProviderProps, type CmssyCommerceState, CmssyEditableLayout, type CmssyEditableLayoutProps, CmssyEditablePage, type CmssyEditablePageProps, CmssyLazyEditor, type CmssyLazyEditorProps, CmssyLazyLayout, type CmssyLazyLayoutProps, CmssyOrder, CmssyProduct, type EditBridgeConfig, type EditBridgeState, type PatchMap, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, toMinorUnits, useCart, useCmssyUser, useEditBridge };

package/dist/client.d.ts

@@ -138,6 +138,7 @@ declare const checkoutBlock: BlockDefinition;
 
 declare function fractionDigits(currency: string): number;
 declare function fromMinorUnits(minor: number, currency: string): number;
+declare function toMinorUnits(amount: number, currency: string): number;
 declare function formatPrice(minor: number, currency: string | null | undefined): string;
 
-export { type CmssyAddToCartOptions, type CmssyAuthActionResult, CmssyAuthProvider, type CmssyAuthProviderProps, type CmssyAuthState, type CmssyAuthUser, CmssyCart, CmssyCommerceProvider, type CmssyCommerceProviderProps, type CmssyCommerceState, CmssyEditableLayout, type CmssyEditableLayoutProps, CmssyEditablePage, type CmssyEditablePageProps, CmssyLazyEditor, type CmssyLazyEditorProps, CmssyLazyLayout, type CmssyLazyLayoutProps, CmssyOrder, CmssyProduct, type EditBridgeConfig, type EditBridgeState, type PatchMap, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, useCart, useCmssyUser, useEditBridge };
+export { type CmssyAddToCartOptions, type CmssyAuthActionResult, CmssyAuthProvider, type CmssyAuthProviderProps, type CmssyAuthState, type CmssyAuthUser, CmssyCart, CmssyCommerceProvider, type CmssyCommerceProviderProps, type CmssyCommerceState, CmssyEditableLayout, type CmssyEditableLayoutProps, CmssyEditablePage, type CmssyEditablePageProps, CmssyLazyEditor, type CmssyLazyEditorProps, CmssyLazyLayout, type CmssyLazyLayoutProps, CmssyOrder, CmssyProduct, type EditBridgeConfig, type EditBridgeState, type PatchMap, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, toMinorUnits, useCart, useCmssyUser, useEditBridge };

package/dist/client.js

@@ -1056,6 +1056,9 @@ function fractionDigits(currency) {
 function fromMinorUnits(minor, currency) {
   return minor / 10 ** fractionDigits(currency);
 }
+function toMinorUnits(amount, currency) {
+  return Math.round(amount * 10 ** fractionDigits(currency));
+}
 function formatPrice(minor, currency) {
   if (!Number.isFinite(minor)) return "";
   const code = currency ?? "USD";
@@ -1092,8 +1095,9 @@ function matchVariant(variants, selections) {
 function ProductComponent({ content }) {
   const c = content;
   const { fetchProduct, addToCart } = useCart();
-  const [product, setProduct] = useState(null);
-  const [loading, setLoading] = useState(true);
+  const injected = c.product ?? null;
+  const [product, setProduct] = useState(injected);
+  const [loading, setLoading] = useState(!injected && Boolean(c.slug));
   const [selections, setSelections] = useState({});
   const [adding, setAdding] = useState(false);
   const [added, setAdded] = useState(false);
@@ -1102,11 +1106,12 @@ function ProductComponent({ content }) {
   const slugField = c.slugField ?? "slug";
   const slug = c.slug ?? "";
   useEffect(() => {
+    if (injected || !slug) return;
     let active = true;
     setLoading(true);
     void (async () => {
       try {
-        const result = slug ? await fetchProduct(modelSlug, { [slugField]: slug }) : null;
+        const result = await fetchProduct(modelSlug, { [slugField]: slug });
         if (active) setProduct(result);
       } finally {
         if (active) setLoading(false);
@@ -1115,7 +1120,7 @@ function ProductComponent({ content }) {
     return () => {
       active = false;
     };
-  }, [fetchProduct, modelSlug, slugField, slug]);
+  }, [injected, fetchProduct, modelSlug, slugField, slug]);
   const axes = useMemo(
     () => product ? deriveAxes(product.variants) : [],
     [product]
@@ -1135,7 +1140,7 @@ function ProductComponent({ content }) {
   const imageUrl = c.imageField ? data[c.imageField] : null;
   const hasVariants = product.variants.length > 0;
   const currency = data.currency ?? "USD";
-  const priceMinor = hasVariants ? variant?.price : Number(data[c.priceField ?? "price"] ?? 0);
+  const priceMinor = hasVariants ? variant?.price : toMinorUnits(Number(data[c.priceField ?? "price"] ?? 0), currency);
   const showPrice = priceMinor != null && Number.isFinite(priceMinor);
   const allAxesSelected = axes.every((axis) => selections[axis.name]);
   const outOfStock = variant != null && variant.inventory != null && variant.inventory <= 0;
@@ -1401,4 +1406,4 @@ var checkoutBlock = defineBlock({
   component: CheckoutComponent
 });
 
-export { CmssyAuthProvider, CmssyCommerceProvider, CmssyEditableLayout, CmssyEditablePage, CmssyLazyEditor, CmssyLazyLayout, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, useCart, useCmssyUser, useEditBridge };
+export { CmssyAuthProvider, CmssyCommerceProvider, CmssyEditableLayout, CmssyEditablePage, CmssyLazyEditor, CmssyLazyLayout, cartBlock, checkoutBlock, formatPrice, fractionDigits, fromMinorUnits, productBlock, toMinorUnits, useCart, useCmssyUser, useEditBridge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmssy/react",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "React blocks, renderers, data client and editor bridge for cmssy headless sites",
   "keywords": [
     "cmssy",