@plasmicpkgs/commerce 0.0.8 → 0.0.11

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({});
@@ -1460,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",
@@ -1472,6 +1530,9 @@ var productCollectionMeta = {
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
+      },
+      hidden: function hidden(props, ctx) {
+        return !!(ctx != null && ctx.hasCategoryCtx);
       }
     },
     includeSubCategories: {
@@ -1509,6 +1570,8 @@ var productCollectionMeta = {
   importName: "ProductCollection"
 };
 function ProductCollection(props) {
+  var _categoryCtx$id;
+
   var className = props.className,
       children = props.children,
       count = props.count,
@@ -1516,22 +1579,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();
 
@@ -1539,7 +1609,8 @@ function ProductCollection(props) {
     setControlContextData == null ? void 0 : setControlContextData({
       categories: categories,
       brands: brands,
-      features: features
+      features: features,
+      hasCategoryCtx: !!categoryCtx
     });
   }
 
@@ -1549,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);
@@ -1740,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,
@@ -1875,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,
@@ -1892,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"));
     }
   });
 }
@@ -1978,6 +2057,9 @@ var cartMeta = {
     field: {
       type: "choice",
       options: ["Size", "Total Price"]
+    },
+    hideIfIsEmpty: {
+      type: "boolean"
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -1987,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;
@@ -2007,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);
 }
@@ -2024,6 +2107,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 = 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);
+}
+
 
 
 var product = {
@@ -2083,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 };
+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