@plasmicpkgs/commerce 0.0.6 → 0.0.9

package/dist/commerce.esm.js

@@ -2,7 +2,7 @@ import registerComponent from '@plasmicapp/host/registerComponent';
 import React, { useContext, useRef, useMemo, createContext, useCallback } from 'react';
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import useSWR from 'swr';
-import { repeatedElement } from '@plasmicapp/host';
+import { repeatedElement, usePlasmicCanvasContext } from '@plasmicapp/host';
 import Cookies from 'js-cookie';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -165,6 +165,44 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
 function createCommonjsModule(fn, module) {
 	return module = { exports: {} }, fn(module, module.exports), module.exports;
 }
@@ -893,7 +931,39 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
   }
 });
 
+var defaultProduct = {
+  id: "123456789",
+  name: "Product Placeholder",
+  description: "",
+  descriptionHtml: "\n    <p>This is a <strong>placeholder</strong>.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>\n  ",
+  images: [{
+    url: "https://static1.plasmic.app/commerce/lightweight-jacket-0.png",
+    alt: "Lightweight Jacket"
+  }, {
+    url: "https://static1.plasmic.app/commerce/lightweight-jacket-1.png",
+    alt: "Lightweight Jacket"
+  }, {
+    url: "https://static1.plasmic.app/commerce/lightweight-jacket-2.png",
+    alt: "Lightweight Jacket"
+  }],
+  variants: [{
+    id: "variiant1",
+    name: "Variant Placeholder",
+    options: []
+  }, {
+    id: "variant2",
+    name: "Variant Placeholder 2",
+    options: []
+  }],
+  price: {
+    value: 0,
+    currencyCode: "USD"
+  },
+  options: []
+};
+
 var ProductContext = /*#__PURE__*/React.createContext(undefined);
+var CategoryContext = /*#__PURE__*/React.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -903,9 +973,21 @@ function ProductProvider(_ref) {
     key: product.id
   }, React.createElement(FormProvider, Object.assign({}, methods), children));
 }
-function useProduct() {
-  return useContext(ProductContext);
+var useProduct = function useProduct() {
+  var product = useContext(ProductContext);
+  return product != null ? product : defaultProduct;
+};
+function CategoryProvider(_ref2) {
+  var category = _ref2.category,
+      children = _ref2.children;
+  return React.createElement(CategoryContext.Provider, {
+    value: category,
+    key: category.id
+  }, children);
 }
+var useCategoryContext = function useCategoryContext() {
+  return useContext(CategoryContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/createContext({});
@@ -1176,10 +1258,9 @@ var addToCartButtonMeta = {
       }]
     }
   },
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "AddToCartButton"
 };
-
 function AddToCartButton(props) {
   var children = props.children;
   var product = useProduct();
@@ -1190,12 +1271,13 @@ function AddToCartButton(props) {
     var _ref = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
       var _form$getValues$Produ;
 
-      var quantity, variantId;
+      var quantity, _form$getValues$Produ2, variantId;
+
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              quantity = (_form$getValues$Produ = +form.getValues()["ProductQuantity"]) != null ? _form$getValues$Produ : 1;
+              quantity = +((_form$getValues$Produ = form.getValues()["ProductQuantity"]) != null ? _form$getValues$Produ : 1);
 
               if (!(isNaN(quantity) || quantity < 1)) {
                 _context.next = 3;
@@ -1212,7 +1294,7 @@ function AddToCartButton(props) {
                 break;
               }
 
-              variantId = form.getValues()["ProductVariant"];
+              variantId = (_form$getValues$Produ2 = form.getValues()["ProductVariant"]) != null ? _form$getValues$Produ2 : product.variants[0].id;
               _context.next = 7;
               return addItem({
                 productId: product.id,
@@ -1243,7 +1325,6 @@ function AddToCartButton(props) {
     }
   }) : null;
 }
-
 function registerAddToCartButton(loader, customAddToCartButtonMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
@@ -1257,16 +1338,148 @@ var fetcher$1 = SWRFetcher;
 var fn$1 = function fn(provider) {
   var _provider$products;
 
-  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useProduct;
 };
 
-var useSearch = function useSearch(input) {
+var useProduct$1 = function useProduct(input) {
   var hook = useHook(fn$1);
   return useSWRHook(_extends({
     fetcher: fetcher$1
   }, hook))(input);
 };
 
+var productBoxMeta = {
+  name: "plasmic-commerce-product-box",
+  displayName: "Product Box",
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-text-field",
+          props: {
+            field: "name"
+          }
+        }, {
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }],
+        styles: {
+          width: "100%",
+          minWidth: 0
+        }
+      }]
+    },
+    noLayout: "boolean",
+    id: {
+      type: "string",
+      description: "Fetch a product by its slug or ID"
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductBox"
+};
+function ProductBox(props) {
+  var className = props.className,
+      children = props.children,
+      noLayout = props.noLayout,
+      id = props.id;
+
+  var _useProduct = useProduct$1({
+    id: id
+  }),
+      data = _useProduct.data,
+      error = _useProduct.error,
+      isLoading = _useProduct.isLoading;
+
+  if (!id) {
+    return React.createElement("span", null, "You must set the id prop");
+  }
+
+  if (error) {
+    throw new CommerceError({
+      message: error.message,
+      code: error.code
+    });
+  }
+
+  if (isLoading) {
+    return React.createElement("span", null, "Loading...");
+  }
+
+  if (!data) {
+    throw new Error("Product not found!");
+  }
+
+  var renderedData = React.createElement(ProductProvider, {
+    product: data
+  }, children);
+  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
+    className: className
+  }, renderedData);
+}
+function registerProductBox(loader, customProductBoxMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductBox, customProductBoxMeta != null ? customProductBoxMeta : productBoxMeta);
+}
+
+var fetcher$2 = SWRFetcher;
+
+var fn$2 = function fn(provider) {
+  var _provider$products;
+
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
+};
+
+var useSearch = function useSearch(input) {
+  var hook = useHook(fn$2);
+  return useSWRHook(_extends({
+    fetcher: fetcher$2
+  }, hook))(input);
+};
+
+var fetcher$3 = SWRFetcher;
+
+var fn$3 = function fn(provider) {
+  var _provider$site;
+
+  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useCategories;
+};
+
+var useCategories = function useCategories(input) {
+  var hook = useHook(fn$3);
+  return useSWRHook(_extends({
+    fetcher: fetcher$3
+  }, hook))(input);
+};
+
+var fetcher$4 = SWRFetcher;
+
+var fn$4 = function fn(provider) {
+  var _provider$site;
+
+  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useBrands;
+};
+
+var useBrands = function useBrands(input) {
+  var hook = useHook(fn$4);
+  return useSWRHook(_extends({
+    fetcher: fetcher$4
+  }, hook))(input);
+};
+
+var useCommerceExtraFeatures = function useCommerceExtraFeatures() {
+  var _useCommerce = useCommerce(),
+      providerRef = _useCommerce.providerRef;
+
+  return providerRef.current.extraFeatures;
+};
+
 var productCollectionMeta = {
   name: "plasmic-commerce-product-collection",
   displayName: "Product Collection",
@@ -1291,6 +1504,20 @@ var productCollectionMeta = {
         }
       }]
     },
+    emptyMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "No product found!"
+      }
+    },
+    loadingMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Loading..."
+      }
+    },
     count: "number",
     category: {
       type: "choice",
@@ -1303,6 +1530,17 @@ var productCollectionMeta = {
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
+      },
+      hidden: function hidden(props, ctx) {
+        return !!(ctx != null && ctx.hasCategoryCtx);
+      }
+    },
+    includeSubCategories: {
+      type: "boolean",
+      hidden: function hidden(props, ctx) {
+        var _ctx$features;
+
+        return !(ctx != null && (_ctx$features = ctx.features) != null && _ctx$features.includeSubCategories);
       }
     },
     brand: {
@@ -1328,36 +1566,51 @@ var productCollectionMeta = {
     padding: "8px",
     maxWidth: "100%"
   },
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "ProductCollection"
 };
-
 function ProductCollection(props) {
+  var _categoryCtx$id;
+
   var className = props.className,
       children = props.children,
       count = props.count,
       category = props.category,
+      includeSubCategories = props.includeSubCategories,
       brand = props.brand,
       noLayout = props.noLayout,
-      setControlContextData = props.setControlContextData;
+      setControlContextData = props.setControlContextData,
+      emptyMessage = props.emptyMessage,
+      loadingMessage = props.loadingMessage;
+
+  var _useCategories = useCategories(),
+      categories = _useCategories.data,
+      isCategoriesLoading = _useCategories.isLoading;
+
+  var _useBrands = useBrands(),
+      brands = _useBrands.data,
+      isBrandsLoading = _useBrands.isLoading;
+
+  var categoryCtx = useCategoryContext();
 
   var _useSearch = useSearch({
-    categoryId: category,
+    categoryId: (_categoryCtx$id = categoryCtx == null ? void 0 : categoryCtx.id) != null ? _categoryCtx$id : category,
     brandId: brand,
-    count: count
+    count: count,
+    categories: categories != null ? categories : [],
+    includeSubCategories: includeSubCategories
   }),
-      data = _useSearch.data;
-
-  var _useCategories = useCategories({}),
-      categories = _useCategories.data;
+      data = _useSearch.data,
+      isSearchLoading = _useSearch.isLoading;
 
-  var _useBrands = useBrands({}),
-      brands = _useBrands.data;
+  var features = useCommerceExtraFeatures();
 
   if (categories && brands) {
     setControlContextData == null ? void 0 : setControlContextData({
       categories: categories,
-      brands: brands
+      brands: brands,
+      features: features,
+      hasCategoryCtx: !!categoryCtx
     });
   }
 
@@ -1367,11 +1620,19 @@ function ProductCollection(props) {
       key: product.id
     }, repeatedElement(i === 0, children));
   });
+
+  if ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+    return React.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
+
+  if (!data || data.products.length === 0) {
+    return React.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
+
   return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
     className: className
   }, renderedData);
 }
-
 function registerProductCollection(loader, customProductCollectionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
@@ -1380,6 +1641,69 @@ function registerProductCollection(loader, customProductCollectionMeta) {
   doRegisterComponent(ProductCollection, customProductCollectionMeta != null ? customProductCollectionMeta : productCollectionMeta);
 }
 
+var productLinkMeta = {
+  name: "plasmic-commerce-product-link",
+  displayName: "Product Link",
+  props: {
+    children: "slot",
+    linkDest: {
+      type: "string",
+      defaultValueHint: "products/{slug}",
+      description: "Set the link destination. You can use {slug} to replace by the product slug"
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductLink"
+};
+function ProductLink(props) {
+  var className = props.className,
+      children = props.children,
+      linkDest = props.linkDest;
+  var product = useProduct();
+
+  var resolveLink = function resolveLink(linkDest) {
+    var _linkDest$match;
+
+    if (!product || !linkDest) {
+      return undefined;
+    }
+
+    var regex = /{[^}]*}/;
+    var regexAll = new RegExp(regex, "g");
+    var matches = (_linkDest$match = linkDest.match(regexAll)) != null ? _linkDest$match : [];
+    var resolvedLink = linkDest;
+
+    for (var _iterator = _createForOfIteratorHelperLoose(matches), _step; !(_step = _iterator()).done;) {
+      var match = _step.value;
+      var field = match.slice(1, -1);
+
+      if (!(field in product)) {
+        return undefined;
+      }
+
+      resolvedLink = resolvedLink.replace(regex, product[field]);
+    }
+
+    return resolvedLink;
+  };
+
+  return React.createElement("a", {
+    className: className,
+    href: resolveLink(linkDest),
+    style: {
+      color: "inherit",
+      textDecoration: "inherit"
+    }
+  }, children);
+}
+function registerProductLink(loader, customProductLinkMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductLink, customProductLinkMeta != null ? customProductLinkMeta : productLinkMeta);
+}
+
 var placeholderImage = "https://static1.plasmic.app/commerce/lightweight-jacket-0.png";
 var productMediaMeta = {
   name: "plasmic-commerce-product-media",
@@ -1387,7 +1711,7 @@ var productMediaMeta = {
   props: {
     mediaIndex: "number"
   },
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "ProductMedia"
 };
 function ProductMedia(props) {
@@ -1492,19 +1816,16 @@ var productPriceMeta = {
   name: "plasmic-commerce-product-price",
   displayName: "Product Price",
   props: {},
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "ProductPrice"
 };
-function ProductPrice(props) {
+function ProductPriceComponent(props) {
+  var _product$variants$0$i;
+
   var className = props.className;
   var product = useProduct();
   var form = useFormContext();
-
-  if (!product) {
-    throw new Error("This component must be within a product context.");
-  }
-
-  var watchProductVariant = form.watch("ProductVariant", product == null ? void 0 : product.variants[0].id);
+  var watchProductVariant = form == null ? void 0 : form.watch("ProductVariant", (_product$variants$0$i = product.variants[0].id) != null ? _product$variants$0$i : "");
 
   var _usePrice = usePrice({
     amount: product ? getProductPrice(product, watchProductVariant) : 0,
@@ -1521,7 +1842,7 @@ function registerProductPrice(loader, customProductPriceMeta) {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(ProductPrice, customProductPriceMeta != null ? customProductPriceMeta : productPriceMeta);
+  doRegisterComponent(ProductPriceComponent, customProductPriceMeta != null ? customProductPriceMeta : productPriceMeta);
 }
 
 var productQuantityMeta = {
@@ -1538,7 +1859,7 @@ var productQuantityMeta = {
       }]
     }
   },
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "ProductQuantity"
 };
 function ProductQuantity(props) {
@@ -1576,7 +1897,7 @@ var productTextFieldMeta = {
       options: ["id", "name", "description", "sku", "slug", "path"]
     }
   },
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "ProductTextField"
 };
 function ProductTextField(props) {
@@ -1627,13 +1948,15 @@ var productVariantPickerMeta = {
   name: "plasmic-commerce-product-variant-picker",
   displayName: "Product Variant Picker",
   props: {},
-  importPath: "commerce-providers/commerce",
+  importPath: "@plasmicpkgs/commerce",
   importName: "ProductVariantPicker"
 };
 function ProductVariantPicker(props) {
+  var _useFormContext;
+
   var className = props.className;
   var product = useProduct();
-  var form = useFormContext();
+  var form = (_useFormContext = useFormContext()) != null ? _useFormContext : useForm();
   return React.createElement(Controller, {
     name: "ProductVariant",
     control: form == null ? void 0 : form.control,
@@ -1648,7 +1971,7 @@ function ProductVariantPicker(props) {
         return React.createElement("option", {
           value: variant.id
         }, variant.name);
-      })) != null ? _product$variants$map : React.createElement("option", null, "Fake Product Variant"));
+      })) != null ? _product$variants$map : React.createElement("option", null, "Product Variant Placeholder"));
     }
   });
 }
@@ -1660,7 +1983,7 @@ function registerProductVariantPicker(loader, customProductVariantPickerMeta) {
   doRegisterComponent(ProductVariantPicker, customProductVariantPickerMeta != null ? customProductVariantPickerMeta : productVariantPickerMeta);
 }
 
-var fetcher$2 = /*#__PURE__*/function () {
+var fetcher$5 = /*#__PURE__*/function () {
   var _ref2 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee(_ref) {
     var options, cartId, fetch;
     return runtime_1.wrap(function _callee$(_context) {
@@ -1701,7 +2024,7 @@ var fetcher$2 = /*#__PURE__*/function () {
   };
 }();
 
-var fn$2 = function fn(provider) {
+var fn$5 = function fn(provider) {
   var _provider$cart;
 
   return (_provider$cart = provider.cart) == null ? void 0 : _provider$cart.useCart;
@@ -1710,12 +2033,12 @@ var fn$2 = function fn(provider) {
 var useCart = function useCart(input) {
   var _hook$fetcher;
 
-  var hook = useHook(fn$2);
+  var hook = useHook(fn$5);
 
   var _useCommerce = useCommerce(),
       cartCookie = _useCommerce.cartCookie;
 
-  var fetcherFn = (_hook$fetcher = hook.fetcher) != null ? _hook$fetcher : fetcher$2;
+  var fetcherFn = (_hook$fetcher = hook.fetcher) != null ? _hook$fetcher : fetcher$5;
 
   var wrapper = function wrapper(context) {
     context.input.cartId = Cookies.get(cartCookie);
@@ -1727,24 +2050,27 @@ var useCart = function useCart(input) {
   }))(input);
 };
 
-var useCartMeta = {
-  name: "plasmic-commerce-use-cart",
-  displayName: "Use Cart",
+var cartMeta = {
+  name: "plasmic-commerce-cart",
+  displayName: "Cart",
   props: {
     field: {
       type: "choice",
       options: ["Size", "Total Price"]
+    },
+    hideIfIsEmpty: {
+      type: "boolean"
     }
   },
-  importPath: "commerce-providers/commerce",
-  importName: "UseCart"
+  importPath: "@plasmicpkgs/commerce",
+  importName: "Cart"
 };
-
-function UseCartComponent(props) {
+function CartComponent(props) {
   var _data$totalPrice, _data$currency$code;
 
   var className = props.className,
-      field = props.field;
+      field = props.field,
+      hideIfIsEmpty = props.hideIfIsEmpty;
 
   var _useCart = useCart(),
       data = _useCart.data;
@@ -1764,91 +2090,214 @@ function UseCartComponent(props) {
   if (field === "Size") {
     var _data$lineItems$lengt;
 
-    value = "" + ((_data$lineItems$lengt = data == null ? void 0 : data.lineItems.length) != null ? _data$lineItems$lengt : 0);
+    value = (_data$lineItems$lengt = data == null ? void 0 : data.lineItems.length) != null ? _data$lineItems$lengt : 0;
   } else if (field === "Total Price") {
-    value = "" + price;
+    value = price != null ? price : 0;
   }
 
-  return React.createElement("span", {
+  return hideIfIsEmpty && value === 0 ? null : React.createElement("span", {
     className: className
   }, value);
 }
-
-function registerUseCart(loader, customUseCartMeta) {
+function registerCart(loader, customCartMeta) {
   var doRegisterComponent = function doRegisterComponent() {
     return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
   };
 
-  doRegisterComponent(UseCartComponent, customUseCartMeta != null ? customUseCartMeta : useCartMeta);
+  doRegisterComponent(CartComponent, customCartMeta != null ? customCartMeta : cartMeta);
 }
 
-var x = function x() {
-  return 2;
+var categoryCollectionMeta = {
+  name: "plasmic-commerce-category-collection",
+  displayName: "Category Collection",
+  props: {
+    children: {
+      type: "slot",
+      defaultValue: [{
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-category-field",
+          props: {
+            field: "name"
+          }
+        }, {
+          type: "component",
+          name: "plasmic-commerce-product-collection"
+        }],
+        styles: {
+          width: "100%",
+          minWidth: 0
+        }
+      }]
+    },
+    noLayout: {
+      type: "boolean"
+    },
+    emptyMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "No collection found!"
+      }
+    },
+    loadingMessage: {
+      type: "slot",
+      defaultValue: {
+        type: "text",
+        value: "Loading..."
+      }
+    },
+    category: {
+      type: "choice",
+      options: function options(props, ctx) {
+        var _ctx$categories$map;
+
+        return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
+          return {
+            label: category.name,
+            value: category.id
+          };
+        })) != null ? _ctx$categories$map : [];
+      }
+    }
+  },
+  defaultStyles: {
+    display: "grid",
+    gridTemplateColumns: "1fr",
+    gridRowGap: "8px",
+    padding: "8px",
+    maxWidth: "100%"
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "CategoryCollection"
 };
+function CategoryCollection(props) {
+  var children = props.children,
+      noLayout = props.noLayout,
+      className = props.className,
+      loadingMessage = props.loadingMessage,
+      emptyMessage = props.emptyMessage,
+      selectedCategory = props.category,
+      setControlContextData = props.setControlContextData;
+  var features = useCommerceExtraFeatures();
+  var inEditor = usePlasmicCanvasContext();
 
+  var _useCategories = useCategories(),
+      allCategories = _useCategories.data,
+      isAllCategoriesLoading = _useCategories.isLoading;
 
+  var _useCategories2 = useCategories({
+    categoryId: selectedCategory,
+    topologicalSort: !selectedCategory && (features == null ? void 0 : features.includeSubCategories),
+    addIsEmptyField: !!inEditor
+  }),
+      categories = _useCategories2.data,
+      isLoading = _useCategories2.isLoading;
 
-var product = {
-  __proto__: null
-};
+  if (allCategories) {
+    setControlContextData == null ? void 0 : setControlContextData({
+      categories: allCategories
+    });
+  }
 
-var fetcher$3 = SWRFetcher;
+  var firstCategoryNotEmpty = categories == null ? void 0 : categories.find(function (category) {
+    return !category.isEmpty;
+  });
+  var renderedData = categories == null ? void 0 : categories.map(function (category, i) {
+    return React.createElement(CategoryProvider, {
+      category: category,
+      key: category.id
+    }, repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
+  });
 
-var fn$3 = function fn(provider) {
-  var _provider$site;
+  if ([isAllCategoriesLoading, isLoading].includes(true)) {
+    return React.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
 
-  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useCategories;
-};
+  if (!categories || categories.length === 0) {
+    return React.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
 
-var useCategories = function useCategories(input) {
-  var hook = useHook(fn$3);
-  return useSWRHook(_extends({
-    fetcher: fetcher$3
-  }, hook))(input);
+  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
+    className: className
+  }, renderedData);
+}
+function registerCategoryCollection(loader, customCategoryCollectionMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(CategoryCollection, customCategoryCollectionMeta != null ? customCategoryCollectionMeta : categoryCollectionMeta);
+}
+
+var categoryFieldMeta = {
+  name: "plasmic-commerce-category-field",
+  displayName: "Category Field",
+  props: {
+    field: {
+      type: "choice",
+      options: ["id", "name", "slug", "path"]
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "CategoryField"
 };
+function CategoryField(props) {
+  var className = props.className,
+      field = props.field;
+  var category = useCategoryContext();
 
-var fetcher$4 = SWRFetcher;
+  if (!field) {
+    return React.createElement("span", null, "You must set the field prop");
+  }
 
-var fn$4 = function fn(provider) {
-  var _provider$site;
+  var data = category ? category[field] : "Category field placeholder";
+  return React.createElement("span", {
+    className: className
+  }, data);
+}
+function registerCategoryField(loader, customCategoryFieldMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
 
-  return (_provider$site = provider.site) == null ? void 0 : _provider$site.useBrands;
-};
+  doRegisterComponent(CategoryField, customCategoryFieldMeta != null ? customCategoryFieldMeta : categoryFieldMeta);
+}
 
-var useBrands = function useBrands(input) {
-  var hook = useHook(fn$4);
-  return useSWRHook(_extends({
-    fetcher: fetcher$4
-  }, hook))(input);
+
+
+var product = {
+  __proto__: null
 };
 
-var fetcher$5 = mutationFetcher;
+var fetcher$6 = mutationFetcher;
 
-var fn$5 = function fn(provider) {
+var fn$6 = function fn(provider) {
   var _provider$cart;
 
   return (_provider$cart = provider.cart) == null ? void 0 : _provider$cart.useRemoveItem;
 };
 
 var useRemoveItem = function useRemoveItem(input) {
-  var hook = useHook(fn$5);
+  var hook = useHook(fn$6);
   return useMutationHook(_extends({
-    fetcher: fetcher$5
+    fetcher: fetcher$6
   }, hook))(input);
 };
 
-var fetcher$6 = mutationFetcher;
+var fetcher$7 = mutationFetcher;
 
-var fn$6 = function fn(provider) {
+var fn$7 = function fn(provider) {
   var _provider$cart;
 
   return (_provider$cart = provider.cart) == null ? void 0 : _provider$cart.useUpdateItem;
 };
 
 var useUpdateItem = function useUpdateItem(input) {
-  var hook = useHook(fn$6);
+  var hook = useHook(fn$7);
   return useMutationHook(_extends({
-    fetcher: fetcher$6
+    fetcher: fetcher$7
   }, hook))(input);
 };
 
@@ -1869,11 +2318,15 @@ function registerAll(loader) {
   registerTextField(loader);
   registerProductPrice(loader);
   registerProductMedia(loader);
-  registerUseCart(loader);
+  registerCart(loader);
   registerAddToCartButton(loader);
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
+  registerProductBox(loader);
+  registerProductLink(loader);
+  registerCategoryCollection(loader);
+  registerCategoryField(loader);
 }
 
-export { cart as CartType, CommerceError, CoreCommerceProvider, FetcherError, product as ProductTypes, site as SiteTypes, ValidationError, fetcher$1 as fetcher, getCommerceProvider, registerAll, useAddItem, useBrands, useCart, useCategories, useCommerce, useRemoveItem, useSearch, useUpdateItem, x };
+export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, ProductPriceComponent, ProductQuantity, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, fetcher$2 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
 //# sourceMappingURL=commerce.esm.js.map