@plasmicpkgs/commerce 0.0.7 → 0.0.10

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) {
@@ -931,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;
@@ -941,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({});
@@ -1227,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;
@@ -1249,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,
@@ -1428,6 +1473,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",
@@ -1452,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",
@@ -1464,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: {
@@ -1493,31 +1570,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
     });
   }
 
@@ -1527,6 +1620,15 @@ 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);
@@ -1718,15 +1820,12 @@ var productPriceMeta = {
   importName: "ProductPrice"
 };
 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,
@@ -1853,9 +1952,11 @@ var productVariantPickerMeta = {
   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,
@@ -1870,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"));
     }
   });
 }
@@ -1956,6 +2057,9 @@ var cartMeta = {
     field: {
       type: "choice",
       options: ["Size", "Total Price"]
+    },
+    hideIfIsEmpty: {
+      type: "boolean"
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -1965,7 +2069,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;
@@ -1985,12 +2090,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.createElement("span", {
+  return hideIfIsEmpty && value === 0 ? null : React.createElement("span", {
     className: className
   }, value);
 }
@@ -2002,9 +2107,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 = 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.createElement(CategoryProvider, {
+      category: category,
+      key: category.id
+    }, repeatedElement(firstCategoryNotEmpty ? category === firstCategoryNotEmpty : i === 0, children));
+  });
+
+  if ([isAllCategoriesLoading, isLoading].includes(true)) {
+    return React.isValidElement(loadingMessage) ? loadingMessage : null;
+  }
+
+  if (!categories || categories.length === 0) {
+    return React.isValidElement(emptyMessage) ? emptyMessage : null;
+  }
+
+  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();
+
+  if (!field) {
+    return React.createElement("span", null, "You must set the field prop");
+  }
+
+  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);
+  };
+
+  doRegisterComponent(CategoryField, customCategoryFieldMeta != null ? customCategoryFieldMeta : categoryFieldMeta);
+}
 
 
 
@@ -2065,7 +2324,9 @@ function registerAll(loader) {
   registerProductVariantPicker(loader);
   registerProductBox(loader);
   registerProductLink(loader);
+  registerCategoryCollection(loader);
+  registerCategoryField(loader);
 }
 
-export { AddToCartButton, CartComponent, cart as CartType, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, ProductPriceComponent, ProductQuantity, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, fetcher$2 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, 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