@plasmicpkgs/commerce 0.0.17 → 0.0.20

package/dist/commerce.esm.js

@@ -933,9 +933,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"
@@ -947,12 +947,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: {
@@ -963,8 +963,6 @@ var defaultProduct = {
 };
 
 var ProductContext = /*#__PURE__*/React.createContext(undefined);
-var CategoryContext = /*#__PURE__*/React.createContext(undefined);
-var SliderContext = /*#__PURE__*/React.createContext(undefined);
 function ProductProvider(_ref) {
   var product = _ref.product,
       children = _ref.children;
@@ -978,6 +976,9 @@ var useProduct = function useProduct() {
   var product = useContext(ProductContext);
   return product != null ? product : defaultProduct;
 };
+var CategoryContext = /*#__PURE__*/React.createContext(undefined);
+var PrimaryCategoryContext = /*#__PURE__*/React.createContext(undefined); //used to render correctly the defaultValueHint in ProductCollection
+
 function CategoryProvider(_ref2) {
   var category = _ref2.category,
       children = _ref2.children;
@@ -989,19 +990,23 @@ function CategoryProvider(_ref2) {
 var useCategoryContext = function useCategoryContext() {
   return useContext(CategoryContext);
 };
-function ProductSliderProvider(_ref3) {
+var usePrimaryCategory = function usePrimaryCategory() {
+  return useContext(PrimaryCategoryContext);
+};
+var ProductMediaContext = /*#__PURE__*/React.createContext(undefined);
+function ProductMediaProvider(_ref3) {
   var mediaIndex = _ref3.mediaIndex,
       onClick = _ref3.onClick,
       children = _ref3.children;
-  return React.createElement(SliderContext.Provider, {
+  return React.createElement(ProductMediaContext.Provider, {
     value: mediaIndex,
     key: mediaIndex
   }, React.cloneElement(React.isValidElement(children) ? children : React.createElement(React.Fragment, null), {
     onClick: onClick
   }));
 }
-var useProductSliderContext = function useProductSliderContext() {
-  return useContext(SliderContext);
+var useProductMediaContext = function useProductMediaContext() {
+  return useContext(ProductMediaContext);
 };
 
 var _excluded = ["children"];
@@ -1668,9 +1673,11 @@ function CategoryCollection(props) {
     return React.isValidElement(emptyMessage) ? emptyMessage : null;
   }
 
-  return noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
+  return React.createElement(PrimaryCategoryContext.Provider, {
+    value: firstCategoryNotEmpty != null ? firstCategoryNotEmpty : categories[0]
+  }, noLayout ? React.createElement(React.Fragment, null, renderedData) : React.createElement("div", {
     className: className
-  }, renderedData);
+  }, renderedData));
 }
 function registerCategoryCollection(loader, customCategoryCollectionMeta) {
   var doRegisterComponent = function doRegisterComponent() {
@@ -1781,26 +1788,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"
@@ -1810,18 +1798,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.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) {
@@ -2017,8 +2001,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: {
@@ -2113,13 +2102,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
     });
   }
 
@@ -2218,25 +2208,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",
@@ -2248,18 +2225,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.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) {
@@ -2270,6 +2247,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.createElement("div", {
+    className: className
+  }, product == null ? void 0 : product.images.map(function (image, i) {
+    return repeatedElement(i === 0, React.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;
 
@@ -2412,7 +2434,7 @@ function ProductSlider(props) {
   var leftIndex = Math.min(maximumRight, Math.max(0, selected - 1));
   return React.createElement("div", {
     className: className
-  }, React.createElement(ProductSliderProvider, {
+  }, React.createElement(ProductMediaProvider, {
     mediaIndex: selected,
     children: slideContainer
   }), React.createElement("div", {
@@ -2421,7 +2443,7 @@ function ProductSlider(props) {
       gridTemplateColumns: "repeat(" + thumbsVisible + ", 1fr)"
     }
   }, product.images.slice(leftIndex, leftIndex + thumbsVisible).map(function (image, i) {
-    return repeatedElement(i === 0, React.createElement(ProductSliderProvider, {
+    return repeatedElement(i === 0, React.createElement(ProductMediaProvider, {
       mediaIndex: leftIndex + i,
       children: thumbsContainer,
       onClick: function onClick() {
@@ -2591,6 +2613,7 @@ function registerAll(loader) {
   registerTextField(loader);
   registerProductPrice(loader);
   registerProductMedia(loader);
+  registerProductMediaCollection(loader);
   registerCart(loader);
   registerAddToCartButton(loader);
   registerProductQuantity(loader);
@@ -2604,5 +2627,5 @@ function registerAll(loader) {
   registerCategoryMedia(loader);
 }
 
-export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CategoryMedia, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductSlider, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, categoryMediaMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productSliderMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerCategoryMedia, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductPrice, registerProductQuantity, registerProductSlider, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
+export { AddToCartButton, CartComponent, cart as CartType, CategoryCollection, CategoryField, CategoryLink, CategoryMedia, CommerceError, CoreCommerceProvider, FetcherError, ProductBox, ProductCollection, ProductLink, ProductMedia, ProductMediaCollection, defaultProduct as ProductPlaceholder, ProductPriceComponent, ProductQuantity, ProductSlider, ProductTextField, product as ProductTypes, ProductVariantPicker, site as SiteTypes, ValidationError, addToCartButtonMeta, cartMeta, categoryCollectionMeta, categoryFieldMeta, categoryLinkMeta, categoryMediaMeta, fetcher$4 as fetcher, getCommerceProvider, productBoxMeta, productCollectionMeta, productLinkMeta, productMediaCollectionMeta, productMediaMeta, productPriceMeta, productQuantityMeta, productSliderMeta, productTextFieldMeta, productVariantPickerMeta, registerAddToCartButton, registerAll, registerCart, registerCategoryCollection, registerCategoryField, registerCategoryLink, registerCategoryMedia, registerProductBox, registerProductCollection, registerProductLink, registerProductMedia, registerProductMediaCollection, registerProductPrice, registerProductQuantity, registerProductSlider, registerProductVariantPicker, registerTextField, useAddItem, useBrands, useCart, useCategories, useCommerce, useProduct$1 as useProduct, useRemoveItem, useSearch, useUpdateItem };
 //# sourceMappingURL=commerce.esm.js.map