@plasmicpkgs/commerce 0.0.13 → 0.0.16

package/dist/commerce.cjs.development.js

@@ -971,6 +971,7 @@ var defaultProduct = {
 
 var ProductContext = /*#__PURE__*/React__default.createContext(undefined);
 var CategoryContext = /*#__PURE__*/React__default.createContext(undefined);
+var SliderContext = /*#__PURE__*/React__default.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -995,6 +996,20 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return React.useContext(CategoryContext);
 };
+function ProductSliderProvider(_ref3) {
+  var mediaIndex = _ref3.mediaIndex,
+      onClick = _ref3.onClick,
+      children = _ref3.children;
+  return React__default.createElement(SliderContext.Provider, {
+    value: mediaIndex,
+    key: mediaIndex
+  }, React__default.cloneElement(React__default.isValidElement(children) ? children : React__default.createElement(React__default.Fragment, null), {
+    onClick: onClick
+  }));
+}
+var useProductSliderContext = function useProductSliderContext() {
+  return React.useContext(SliderContext);
+};
 
 var _excluded = ["children"];
 var Commerce = /*#__PURE__*/React.createContext({});
@@ -1546,13 +1561,6 @@ var useCategories = function useCategories(input) {
   }, hook))(input);
 };
 
-var useCommerceExtraFeatures = function useCommerceExtraFeatures() {
-  var _useCommerce = useCommerce(),
-      providerRef = _useCommerce.providerRef;
-
-  return providerRef.current.extraFeatures;
-};
-
 var categoryCollectionMeta = {
   name: "plasmic-commerce-category-collection",
   displayName: "Category Collection",
@@ -1600,8 +1608,10 @@ var categoryCollectionMeta = {
         var _ctx$categories$map;
 
         return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
+          var _category$depth;
+
           return {
-            label: category.name,
+            label: "" + "  ".repeat((_category$depth = category.depth) != null ? _category$depth : 0) + category.name,
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
@@ -1626,7 +1636,6 @@ function CategoryCollection(props) {
       emptyMessage = props.emptyMessage,
       selectedCategory = props.category,
       setControlContextData = props.setControlContextData;
-  var features = useCommerceExtraFeatures();
   var inEditor = React__default.useContext(host.PlasmicCanvasContext);
 
   var _useCategories = useCategories(),
@@ -1635,7 +1644,6 @@ function CategoryCollection(props) {
 
   var _useCategories2 = useCategories({
     categoryId: selectedCategory,
-    topologicalSort: !selectedCategory && (features == null ? void 0 : features.includeSubCategories),
     addIsEmptyField: !!inEditor
   }),
       categories = _useCategories2.data,
@@ -1774,6 +1782,61 @@ function registerCategoryLink(loader, customCategoryLinkMeta) {
   doRegisterComponent(CategoryLink, customCategoryLinkMeta != null ? customCategoryLinkMeta : categoryLinkMeta);
 }
 
+var categoryMediaMeta = {
+  name: "plasmic-commerce-category-media",
+  displayName: "Category Media",
+  props: {
+    mediaIndex: "number",
+    mediaSize: {
+      type: "choice",
+      options: [{
+        label: "Fill",
+        value: "fill"
+      }, {
+        label: "Container",
+        value: "contain"
+      }, {
+        label: "Cover",
+        value: "cover"
+      }, {
+        label: "None",
+        value: "none"
+      }, {
+        label: "Scale down",
+        value: "scale-down"
+      }]
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "CategoryMedia"
+};
+function CategoryMedia(props) {
+  var _image$url;
+
+  var className = props.className,
+      _props$mediaIndex = props.mediaIndex,
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
+      mediaSize = props.mediaSize;
+  var category = useCategoryContext();
+  var image = category != null && category.images ? category.images[mediaIndex] : undefined;
+  return React__default.createElement("img", {
+    alt: (category == null ? void 0 : category.name) || "Category Image",
+    src: (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "",
+    loading: "lazy",
+    className: className,
+    style: {
+      objectFit: mediaSize
+    }
+  });
+}
+function registerCategoryMedia(loader, customCategoryMediaMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(CategoryMedia, customCategoryMediaMeta != null ? customCategoryMediaMeta : categoryMediaMeta);
+}
+
 var fetcher$3 = SWRFetcher;
 
 var fn$3 = function fn(provider) {
@@ -1899,6 +1962,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",
@@ -1944,8 +2014,10 @@ var productCollectionMeta = {
         var _ctx$categories$map;
 
         return (_ctx$categories$map = ctx == null ? void 0 : ctx.categories.map(function (category) {
+          var _category$depth;
+
           return {
-            label: category.name,
+            label: "" + "  ".repeat((_category$depth = category.depth) != null ? _category$depth : 0) + category.name,
             value: category.id
           };
         })) != null ? _ctx$categories$map : [];
@@ -2151,7 +2223,26 @@ var productMediaMeta = {
   name: "plasmic-commerce-product-media",
   displayName: "Product Media",
   props: {
-    mediaIndex: "number"
+    mediaIndex: "number",
+    mediaSize: {
+      type: "choice",
+      options: [{
+        label: "Fill",
+        value: "fill"
+      }, {
+        label: "Container",
+        value: "contain"
+      }, {
+        label: "Cover",
+        value: "cover"
+      }, {
+        label: "None",
+        value: "none"
+      }, {
+        label: "Scale down",
+        value: "scale-down"
+      }]
+    }
   },
   importPath: "@plasmicpkgs/commerce",
   importName: "ProductMedia"
@@ -2161,14 +2252,19 @@ function ProductMedia(props) {
 
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
-      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
+      mediaSize = props.mediaSize;
   var product = useProduct();
-  var image = product == null ? void 0 : product.images[mediaIndex];
+  var sliderContext = useProductSliderContext();
+  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
   return React__default.createElement("img", {
-    alt: (product == null ? void 0 : product.name) || 'Product Image',
+    alt: (product == null ? void 0 : product.name) || "Product Image",
     src: product ? (_image$url = image == null ? void 0 : image.url) != null ? _image$url : "" : placeholderImage,
-    loading: 'lazy',
-    className: className
+    loading: "lazy",
+    className: className,
+    style: {
+      objectFit: mediaSize
+    }
   });
 }
 function registerProductMedia(loader, customProductMediaMeta) {
@@ -2263,6 +2359,90 @@ function registerProductQuantity(loader, customProductQuantityMeta) {
   doRegisterComponent(ProductQuantity, customProductQuantityMeta != null ? customProductQuantityMeta : productQuantityMeta);
 }
 
+var productSliderMeta = {
+  name: "plasmic-commerce-product-slider",
+  displayName: "Product Slider",
+  props: {
+    thumbsVisible: {
+      type: "number",
+      description: "Number of thumbs visible",
+      defaultValue: 4,
+      defaultValueHint: 4
+    },
+    slideContainer: {
+      type: "slot",
+      defaultValue: {
+        type: "vbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
+      }
+    },
+    thumbsContainer: {
+      type: "slot",
+      defaultValue: {
+        type: "hbox",
+        children: [{
+          type: "component",
+          name: "plasmic-commerce-product-media"
+        }]
+      }
+    },
+    slideSelected: {
+      type: "number",
+      defaultValue: 0,
+      defaultValueHint: 0,
+      description: "Current slide selected"
+    }
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductSlider"
+};
+function ProductSlider(props) {
+  var className = props.className,
+      slideContainer = props.slideContainer,
+      thumbsContainer = props.thumbsContainer,
+      _props$thumbsVisible = props.thumbsVisible,
+      thumbsVisible = _props$thumbsVisible === void 0 ? 4 : _props$thumbsVisible,
+      _props$slideSelected = props.slideSelected,
+      slideSelected = _props$slideSelected === void 0 ? 0 : _props$slideSelected;
+  var product = useProduct();
+
+  var _React$useState = React__default.useState(slideSelected),
+      selected = _React$useState[0],
+      setSelected = _React$useState[1];
+
+  var maximumRight = product.images.length - thumbsVisible;
+  var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
+  return React__default.createElement("div", {
+    className: className
+  }, React__default.createElement(ProductSliderProvider, {
+    mediaIndex: selected,
+    children: slideContainer
+  }), React__default.createElement("div", {
+    style: {
+      display: "grid",
+      gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
+    }
+  }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
+    return host.repeatedElement(i === 0, React__default.createElement(ProductSliderProvider, {
+      mediaIndex: leftIndex + i,
+      children: thumbsContainer,
+      onClick: function onClick() {
+        return setSelected(leftIndex + i);
+      }
+    }));
+  })));
+}
+function registerProductSlider(loader, customProductSliderMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductSlider, customProductSliderMeta != null ? customProductSliderMeta : productSliderMeta);
+}
+
 var productTextFieldMeta = {
   name: "plasmic-commerce-product-text-field",
   displayName: "Product Text Field",
@@ -2295,14 +2475,14 @@ function ProductTextField(props) {
   var value;
 
   if (field === "description") {
-    return product.descriptionHtml ? React__default.createElement("div", {
+    var _product$descriptionH;
+
+    return React__default.createElement("div", {
       className: className,
       dangerouslySetInnerHTML: {
-        __html: product.descriptionHtml
+        __html: (_product$descriptionH = product.descriptionHtml) != null ? _product$descriptionH : product.description
       }
-    }) : React__default.createElement("div", {
-      className: className
-    }, product.description);
+    });
   } else {
     value = product[field];
   }
@@ -2402,7 +2582,10 @@ var product = {
   __proto__: null
 };
 
-
+/*
+  Forked from https://github.com/vercel/commerce/tree/main/packages/commerce/src
+  Changes: Added CategoryImage and depth/children/parent_id to Category
+*/
 
 var site = {
   __proto__: null
@@ -2418,10 +2601,12 @@ function registerAll(loader) {
   registerProductQuantity(loader);
   registerProductVariantPicker(loader);
   registerProductBox(loader);
+  registerProductSlider(loader);
   registerProductLink(loader);
   registerCategoryCollection(loader);
   registerCategoryField(loader);
   registerCategoryLink(loader);
+  registerCategoryMedia(loader);
 }
 
 exports.AddToCartButton = AddToCartButton;
@@ -2430,6 +2615,7 @@ exports.CartType = cart;
 exports.CategoryCollection = CategoryCollection;
 exports.CategoryField = CategoryField;
 exports.CategoryLink = CategoryLink;
+exports.CategoryMedia = CategoryMedia;
 exports.CommerceError = CommerceError;
 exports.CoreCommerceProvider = CoreCommerceProvider;
 exports.FetcherError = FetcherError;
@@ -2440,6 +2626,7 @@ exports.ProductMedia = ProductMedia;
 exports.ProductPlaceholder = defaultProduct;
 exports.ProductPriceComponent = ProductPriceComponent;
 exports.ProductQuantity = ProductQuantity;
+exports.ProductSlider = ProductSlider;
 exports.ProductTextField = ProductTextField;
 exports.ProductTypes = product;
 exports.ProductVariantPicker = ProductVariantPicker;
@@ -2450,6 +2637,7 @@ exports.cartMeta = cartMeta;
 exports.categoryCollectionMeta = categoryCollectionMeta;
 exports.categoryFieldMeta = categoryFieldMeta;
 exports.categoryLinkMeta = categoryLinkMeta;
+exports.categoryMediaMeta = categoryMediaMeta;
 exports.fetcher = fetcher$4;
 exports.getCommerceProvider = getCommerceProvider;
 exports.productBoxMeta = productBoxMeta;
@@ -2458,6 +2646,7 @@ exports.productLinkMeta = productLinkMeta;
 exports.productMediaMeta = productMediaMeta;
 exports.productPriceMeta = productPriceMeta;
 exports.productQuantityMeta = productQuantityMeta;
+exports.productSliderMeta = productSliderMeta;
 exports.productTextFieldMeta = productTextFieldMeta;
 exports.productVariantPickerMeta = productVariantPickerMeta;
 exports.registerAddToCartButton = registerAddToCartButton;
@@ -2466,12 +2655,14 @@ exports.registerCart = registerCart;
 exports.registerCategoryCollection = registerCategoryCollection;
 exports.registerCategoryField = registerCategoryField;
 exports.registerCategoryLink = registerCategoryLink;
+exports.registerCategoryMedia = registerCategoryMedia;
 exports.registerProductBox = registerProductBox;
 exports.registerProductCollection = registerProductCollection;
 exports.registerProductLink = registerProductLink;
 exports.registerProductMedia = registerProductMedia;
 exports.registerProductPrice = registerProductPrice;
 exports.registerProductQuantity = registerProductQuantity;
+exports.registerProductSlider = registerProductSlider;
 exports.registerProductVariantPicker = registerProductVariantPicker;
 exports.registerTextField = registerTextField;
 exports.useAddItem = useAddItem;