@plasmicpkgs/commerce 0.0.7 → 0.0.10

package/dist/commerce.cjs.development.js

@@ -938,7 +938,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__default.createContext(undefined);
+var CategoryContext = /*#__PURE__*/React__default.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -948,9 +980,21 @@ function ProductProvider(_ref) {
     key: product.id
   }, React__default.createElement(reactHookForm.FormProvider, Object.assign({}, methods), children));
 }
-function useProduct() {
-  return React.useContext(ProductContext);
+var useProduct = function useProduct() {
+  var product = React.useContext(ProductContext);
+  return product != null ? product : defaultProduct;
+};
+function CategoryProvider(_ref2) {
+  var category = _ref2.category,
+      children = _ref2.children;
+  return React__default.createElement(CategoryContext.Provider, {
+    value: category,
+    key: category.id
+  }, children);
 }
+var useCategoryContext = function useCategoryContext() {
+  return React.useContext(CategoryContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/React.createContext({});
@@ -1234,12 +1278,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;
@@ -1256,7 +1301,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,
@@ -1435,6 +1480,13 @@ var useBrands = function useBrands(input) {
   }, 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",
@@ -1459,6 +1511,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",
@@ -1471,6 +1537,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: {
@@ -1500,31 +1577,47 @@ var productCollectionMeta = {
   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;
+      data = _useSearch.data,
+      isSearchLoading = _useSearch.isLoading;
 
-  var _useCategories = useCategories(),
-      categories = _useCategories.data;
-
-  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
     });
   }
 
@@ -1534,6 +1627,15 @@ function ProductCollection(props) {
       key: product.id
     }, host.repeatedElement(i === 0, children));
   });
+
+  if ([isSearchLoading, isBrandsLoading, isCategoriesLoading].includes(true)) {
+    return React__default.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
+
+  if (!data || data.products.length === 0) {
+    return React__default.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
+
   return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.createElement("div", {
     className: className
   }, renderedData);
@@ -1725,15 +1827,12 @@ var productPriceMeta = {
   importName: "ProductPrice"
 };
 function ProductPriceComponent(props) {
+  var _product$variants$0$i;
+
   var className = props.className;
   var product = useProduct();
   var form = reactHookForm.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,
@@ -1860,9 +1959,11 @@ var productVariantPickerMeta = {
   importName: "ProductVariantPicker"
 };
 function ProductVariantPicker(props) {
+  var _useFormContext;
+
   var className = props.className;
   var product = useProduct();
-  var form = reactHookForm.useFormContext();
+  var form = (_useFormContext = reactHookForm.useFormContext()) != null ? _useFormContext : reactHookForm.useForm();
   return React__default.createElement(reactHookForm.Controller, {
     name: "ProductVariant",
     control: form == null ? void 0 : form.control,
@@ -1877,7 +1978,7 @@ function ProductVariantPicker(props) {
         return React__default.createElement("option", {
           value: variant.id
         }, variant.name);
-      })) != null ? _product$variants$map : React__default.createElement("option", null, "Fake Product Variant"));
+      })) != null ? _product$variants$map : React__default.createElement("option", null, "Product Variant Placeholder"));
     }
   });
 }
@@ -1963,6 +2064,9 @@ var cartMeta = {
     field: {
       type: "choice",
       options: ["Size", "Total Price"]
+    },
+    hideIfIsEmpty: {
+      type: "boolean"
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -1972,7 +2076,8 @@ 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;
@@ -1992,12 +2097,12 @@ function CartComponent(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__default.createElement("span", {
+  return hideIfIsEmpty && value === 0 ? null : React__default.createElement("span", {
     className: className
   }, value);
 }
@@ -2009,9 +2114,163 @@ function registerCart(loader, customCartMeta) {
   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 = host.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;
+
+  if (allCategories) {
+    setControlContextData == null ? void 0 : setControlContextData({
+      categories: allCategories
+    });
+  }
+
+  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__default.createElement(CategoryProvider, {
+      category: category,
+      key: category.id
+    }, host.repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
+  });
+
+  if ([isAllCategoriesLoading, isLoading].includes(true)) {
+    return React__default.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
+
+  if (!categories || categories.length === 0) {
+    return React__default.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
+
+  return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.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();
+
+  if (!field) {
+    return React__default.createElement("span", null, "You must set the field prop");
+  }
+
+  var data = category ? category[field] : "Category field placeholder";
+  return React__default.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);
+  };
+
+  doRegisterComponent(CategoryField, customCategoryFieldMeta != null ? customCategoryFieldMeta : categoryFieldMeta);
+}
 
 
 
@@ -2072,11 +2331,15 @@ function registerAll(loader) {
   registerProductVariantPicker(loader);
   registerProductBox(loader);
   registerProductLink(loader);
+  registerCategoryCollection(loader);
+  registerCategoryField(loader);
 }
 
 exports.AddToCartButton = AddToCartButton;
 exports.CartComponent = CartComponent;
 exports.CartType = cart;
+exports.CategoryCollection = CategoryCollection;
+exports.CategoryField = CategoryField;
 exports.CommerceError = CommerceError;
 exports.CoreCommerceProvider = CoreCommerceProvider;
 exports.FetcherError = FetcherError;
@@ -2093,6 +2356,8 @@ exports.SiteTypes = site;
 exports.ValidationError = ValidationError;
 exports.addToCartButtonMeta = addToCartButtonMeta;
 exports.cartMeta = cartMeta;
+exports.categoryCollectionMeta = categoryCollectionMeta;
+exports.categoryFieldMeta = categoryFieldMeta;
 exports.fetcher = fetcher$2;
 exports.getCommerceProvider = getCommerceProvider;
 exports.productBoxMeta = productBoxMeta;
@@ -2106,6 +2371,8 @@ exports.productVariantPickerMeta = productVariantPickerMeta;
 exports.registerAddToCartButton = registerAddToCartButton;
 exports.registerAll = registerAll;
 exports.registerCart = registerCart;
+exports.registerCategoryCollection = registerCategoryCollection;
+exports.registerCategoryField = registerCategoryField;
 exports.registerProductBox = registerProductBox;
 exports.registerProductCollection = registerProductCollection;
 exports.registerProductLink = registerProductLink;
@@ -2123,5 +2390,4 @@ exports.useProduct = useProduct$1;
 exports.useRemoveItem = useRemoveItem;
 exports.useSearch = useSearch;
 exports.useUpdateItem = useUpdateItem;
-exports.x = x;
 //# sourceMappingURL=commerce.cjs.development.js.map