@plasmicpkgs/commerce 0.0.17 → 0.0.20

package/dist/commerce.cjs.development.js

@@ -940,9 +940,9 @@ var runtime_1 = /*#__PURE__*/createCommonjsModule(function (module) {
 
 var defaultProduct = {
   id: "123456789",
-  name: "Product Placeholder",
+  name: "Product name",
   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  ",
+  descriptionHtml: "\n    <p>This is a <strong>placeholder</strong>.</p>\n  ",
   images: [{
     url: "https://static1.plasmic.app/commerce/lightweight-jacket-0.png",
     alt: "Lightweight Jacket"
@@ -954,12 +954,12 @@ var defaultProduct = {
     alt: "Lightweight Jacket"
   }],
   variants: [{
-    id: "variiant1",
-    name: "Variant Placeholder",
+    id: "variant1",
+    name: "Variant 1",
     options: []
   }, {
     id: "variant2",
-    name: "Variant Placeholder 2",
+    name: "Variant 2",
     options: []
   }],
   price: {
@@ -970,8 +970,6 @@ 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;
@@ -985,6 +983,9 @@ var useProduct = function useProduct() {
   var product = React.useContext(ProductContext);
   return product != null ? product : defaultProduct;
 };
+var CategoryContext = /*#__PURE__*/React__default.createContext(undefined);
+var PrimaryCategoryContext = /*#__PURE__*/React__default.createContext(undefined); //used to render correctly the defaultValueHint in ProductCollection
+
 function CategoryProvider(_ref2) {
   var category = _ref2.category,
       children = _ref2.children;
@@ -996,19 +997,23 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return React.useContext(CategoryContext);
 };
-function ProductSliderProvider(_ref3) {
+var usePrimaryCategory = function usePrimaryCategory() {
+  return React.useContext(PrimaryCategoryContext);
+};
+var ProductMediaContext = /*#__PURE__*/React__default.createContext(undefined);
+function ProductMediaProvider(_ref3) {
   var mediaIndex = _ref3.mediaIndex,
       onClick = _ref3.onClick,
       children = _ref3.children;
-  return React__default.createElement(SliderContext.Provider, {
+  return React__default.createElement(ProductMediaContext.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 useProductMediaContext = function useProductMediaContext() {
+  return React.useContext(ProductMediaContext);
 };
 
 var _excluded = ["children"];
@@ -1675,9 +1680,11 @@ function CategoryCollection(props) {
     return React__default.isValidElement(emptyMessage) ? emptyMessage : null;
   }
 
-  return noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.createElement("div", {
+  return React__default.createElement(PrimaryCategoryContext.Provider, {
+    value: firstCategoryNotEmpty != null ? firstCategoryNotEmpty : categories[0]
+  }, noLayout ? React__default.createElement(React__default.Fragment, null, renderedData) : React__default.createElement("div", {
     className: className
-  }, renderedData);
+  }, renderedData));
 }
 function registerCategoryCollection(loader, customCategoryCollectionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
@@ -1788,26 +1795,7 @@ 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"
-      }]
-    }
+    mediaIndex: "number"
   },
   importPath: "@plasmicpkgs/commerce",
   importName: "CategoryMedia"
@@ -1817,18 +1805,14 @@ function CategoryMedia(props) {
 
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
-      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
-      mediaSize = props.mediaSize;
+      mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex;
   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
-    }
+    className: className
   });
 }
 function registerCategoryMedia(loader, customCategoryMediaMeta) {
@@ -2024,8 +2008,13 @@ var productCollectionMeta = {
           };
         })) != null ? _ctx$categories$map : [];
       },
-      hidden: function hidden(props, ctx) {
-        return !!(ctx != null && ctx.hasCategoryCtx);
+      defaultValueHint: function defaultValueHint(props, ctx) {
+        var _ctx$categoryCtx;
+
+        return ctx == null ? void 0 : (_ctx$categoryCtx = ctx.categoryCtx) == null ? void 0 : _ctx$categoryCtx.name;
+      },
+      readOnly: function readOnly(props, ctx) {
+        return !!(ctx != null && ctx.categoryCtx);
       }
     },
     includeSubCategories: {
@@ -2120,13 +2109,14 @@ function ProductCollection(props) {
       isSearchLoading = _useSearch.isLoading;
 
   var features = useCommerceExtraFeatures();
+  var primaryCategory = usePrimaryCategory();
 
   if (categories && brands) {
     setControlContextData == null ? void 0 : setControlContextData({
       categories: categories,
       brands: brands,
       features: features,
-      hasCategoryCtx: !!categoryCtx
+      categoryCtx: primaryCategory
     });
   }
 
@@ -2225,25 +2215,12 @@ var productMediaMeta = {
   name: "plasmic-commerce-product-media",
   displayName: "Product 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"
-      }]
+    mediaIndex: {
+      type: "number",
+      min: 0,
+      hidden: function hidden(_, ctx) {
+        return !!(ctx != null && ctx.inMediaContext);
+      }
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -2255,18 +2232,18 @@ function ProductMedia(props) {
   var className = props.className,
       _props$mediaIndex = props.mediaIndex,
       mediaIndex = _props$mediaIndex === void 0 ? 0 : _props$mediaIndex,
-      mediaSize = props.mediaSize;
+      setControlContextData = props.setControlContextData;
   var product = useProduct();
-  var sliderContext = useProductSliderContext();
-  var image = product == null ? void 0 : product.images[sliderContext != null ? sliderContext : mediaIndex];
+  var mediaContext = useProductMediaContext();
+  setControlContextData == null ? void 0 : setControlContextData({
+    inMediaContext: mediaContext !== undefined
+  });
+  var image = product == null ? void 0 : product.images[mediaContext != null ? mediaContext : mediaIndex];
   return React__default.createElement("img", {
     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,
-    style: {
-      objectFit: mediaSize
-    }
+    className: className
   });
 }
 function registerProductMedia(loader, customProductMediaMeta) {
@@ -2277,6 +2254,51 @@ function registerProductMedia(loader, customProductMediaMeta) {
   doRegisterComponent(ProductMedia, customProductMediaMeta != null ? customProductMediaMeta : productMediaMeta);
 }
 
+var productMediaCollectionMeta = {
+  name: "plasmic-commerce-product-media-collection",
+  displayName: "Product Media Collection",
+  props: {
+    media: {
+      type: "slot",
+      defaultValue: {
+        type: "component",
+        name: "plasmic-commerce-product-media"
+      },
+      allowedComponents: ["plasmic-commerce-product-media"]
+    }
+  },
+  defaultStyles: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gridRowGap: "8px",
+    gridColumnGap: "8px",
+    padding: "8px",
+    maxWidth: "100%"
+  },
+  importPath: "@plasmicpkgs/commerce",
+  importName: "ProductMediaCollection"
+};
+function ProductMediaCollection(props) {
+  var media = props.media,
+      className = props.className;
+  var product = useProduct();
+  return React__default.createElement("div", {
+    className: className
+  }, product == null ? void 0 : product.images.map(function (image, i) {
+    return host.repeatedElement(i === 0, React__default.createElement(ProductMediaProvider, {
+      mediaIndex: i,
+      children: media
+    }));
+  }));
+}
+function registerProductMediaCollection(loader, customProductMediaCollectionMeta) {
+  var doRegisterComponent = function doRegisterComponent() {
+    return loader ? loader.registerComponent.apply(loader, arguments) : registerComponent.apply(void 0, arguments);
+  };
+
+  doRegisterComponent(ProductMediaCollection, customProductMediaCollectionMeta != null ? customProductMediaCollectionMeta : productMediaCollectionMeta);
+}
+
 var getProductPrice = function getProductPrice(product, variantId) {
   var _product$variants$fin, _product$variants$fin2;
 
@@ -2419,7 +2441,7 @@ function ProductSlider(props) {
   var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
   return React__default.createElement("div", {
     className: className
-  }, React__default.createElement(ProductSliderProvider, {
+  }, React__default.createElement(ProductMediaProvider, {
     mediaIndex: selected,
     children: slideContainer
   }), React__default.createElement("div", {
@@ -2428,7 +2450,7 @@ function ProductSlider(props) {
       gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
     }
   }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
-    return host.repeatedElement(i === 0, React__default.createElement(ProductSliderProvider, {
+    return host.repeatedElement(i === 0, React__default.createElement(ProductMediaProvider, {
       mediaIndex: leftIndex + i,
       children: thumbsContainer,
       onClick: function onClick() {
@@ -2598,6 +2620,7 @@ function registerAll(loader) {
   registerTextField(loader);
   registerProductPrice(loader);
   registerProductMedia(loader);
+  registerProductMediaCollection(loader);
   registerCart(loader);
   registerAddToCartButton(loader);
   registerProductQuantity(loader);
@@ -2625,6 +2648,7 @@ exports.ProductBox = ProductBox;
 exports.ProductCollection = ProductCollection;
 exports.ProductLink = ProductLink;
 exports.ProductMedia = ProductMedia;
+exports.ProductMediaCollection = ProductMediaCollection;
 exports.ProductPlaceholder = defaultProduct;
 exports.ProductPriceComponent = ProductPriceComponent;
 exports.ProductQuantity = ProductQuantity;
@@ -2645,6 +2669,7 @@ exports.getCommerceProvider = getCommerceProvider;
 exports.productBoxMeta = productBoxMeta;
 exports.productCollectionMeta = productCollectionMeta;
 exports.productLinkMeta = productLinkMeta;
+exports.productMediaCollectionMeta = productMediaCollectionMeta;
 exports.productMediaMeta = productMediaMeta;
 exports.productPriceMeta = productPriceMeta;
 exports.productQuantityMeta = productQuantityMeta;
@@ -2662,6 +2687,7 @@ exports.registerProductBox = registerProductBox;
 exports.registerProductCollection = registerProductCollection;
 exports.registerProductLink = registerProductLink;
 exports.registerProductMedia = registerProductMedia;
+exports.registerProductMediaCollection = registerProductMediaCollection;
 exports.registerProductPrice = registerProductPrice;
 exports.registerProductQuantity = registerProductQuantity;
 exports.registerProductSlider = registerProductSlider;