@plasmicpkgs/commerce 0.0.8 → 0.0.11

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({});
@@ -1467,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",
@@ -1479,6 +1537,9 @@ var productCollectionMeta = {
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
+      },
+      hidden: function hidden(props, ctx) {
+        return !!(ctx != null && ctx.hasCategoryCtx);
       }
     },
     includeSubCategories: {
@@ -1516,6 +1577,8 @@ var productCollectionMeta = {
   importName: "ProductCollection"
 };
 function ProductCollection(props) {
+  var _categoryCtx$id;
+
   var className = props.className,
       children = props.children,
       count = props.count,
@@ -1523,22 +1586,29 @@ function ProductCollection(props) {
       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;
+      categories = _useCategories.data,
+      isCategoriesLoading = _useCategories.isLoading;
 
   var _useBrands = useBrands(),
-      brands = _useBrands.data;
+      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,
     categories: categories != null ? categories : [],
     includeSubCategories: includeSubCategories
   }),
-      data = _useSearch.data;
+      data = _useSearch.data,
+      isSearchLoading = _useSearch.isLoading;
 
   var features = useCommerceExtraFeatures();
 
@@ -1546,7 +1616,8 @@ function ProductCollection(props) {
     setControlContextData == null ? void 0 : setControlContextData({
       categories: categories,
       brands: brands,
-      features: features
+      features: features,
+      hasCategoryCtx: !!categoryCtx
     });
   }
 
@@ -1556,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);
@@ -1747,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,
@@ -1882,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,
@@ -1899,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"));
     }
   });
 }
@@ -1985,6 +2064,9 @@ var cartMeta = {
     field: {
       type: "choice",
       options: ["Size", "Total Price"]
+    },
+    hideIfIsEmpty: {
+      type: "boolean"
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -1994,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;
@@ -2014,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);
 }
@@ -2031,6 +2114,164 @@ function registerCart(loader, customCartMeta) {
   doRegisterComponent(CartComponent, customCartMeta != null ? customCartMeta : cartMeta);
 }
 
+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);
+}
+
 
 
 var product = {
@@ -2090,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;
@@ -2111,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;
@@ -2124,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;