@plasmicpkgs/commerce 0.0.49 → 0.0.50

package/dist/commerce.esm.js

@@ -4,6 +4,7 @@ import { useSelector, DataProvider, PlasmicCanvasContext, repeatedElement } from
 import { useForm, FormProvider, useFormContext, Controller } from 'react-hook-form';
 import { useMutablePlasmicQueryData } from '@plasmicapp/query';
 import Cookies from 'js-cookie';
+import debounce from 'lodash.debounce';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1841,6 +1842,21 @@ var useProduct$1 = function useProduct(input) {
   }, hook))(input);
 };
 
+var fetcher$4 = SWRFetcher;
+
+var fn$4 = function fn(provider) {
+  var _provider$products;
+
+  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
+};
+
+var useSearch = function useSearch(input) {
+  var hook = useHook(fn$4);
+  return useSWRHook(_extends({
+    fetcher: fetcher$4
+  }, hook))(input);
+};
+
 var productBoxMeta = {
   name: "plasmic-commerce-product-box",
   displayName: "Product Box",
@@ -1867,8 +1883,24 @@ var productBoxMeta = {
     },
     noLayout: "boolean",
     id: {
-      type: "string",
-      description: "Fetch a product by its slug or ID"
+      type: "cardPicker",
+      modalTitle: "Product",
+      onSearch: function onSearch(props, ctx) {
+        return ctx == null ? void 0 : ctx.onSearch;
+      },
+      options: function options(props, ctx) {
+        var _ctx$products$map;
+
+        return (_ctx$products$map = ctx == null ? void 0 : ctx.products.map(function (product) {
+          var _product$slug;
+
+          return {
+            imgUrl: product.images[0].url,
+            value: (_product$slug = product.slug) != null ? _product$slug : product.name,
+            footer: React.createElement("div", null, React.createElement("div", null, React.createElement("strong", null, product.name)), React.createElement("div", null, product.slug))
+          };
+        })) != null ? _ctx$products$map : [];
+      }
     }
   },
   importPath: "@plasmicpkgs/commerce",
@@ -1879,7 +1911,28 @@ function ProductBox(props) {
   var className = props.className,
       children = props.children,
       noLayout = props.noLayout,
-      id = props.id;
+      id = props.id,
+      setControlContextData = props.setControlContextData;
+
+  var _React$useState = React.useState(""),
+      productSearch = _React$useState[0],
+      setProductSearch = _React$useState[1];
+
+  var _useSearch = useSearch({
+    search: productSearch !== "" ? productSearch : undefined
+  }),
+      allProducts = _useSearch.data;
+
+  var onSearch = React.useCallback(debounce(function (value) {
+    return setProductSearch(value);
+  }, 300), []);
+
+  if (allProducts) {
+    setControlContextData == null ? void 0 : setControlContextData({
+      products: allProducts.products,
+      onSearch: onSearch
+    });
+  }
 
   var _useProduct = useProduct$1({
     id: id
@@ -1922,21 +1975,6 @@ function registerProductBox(loader, customProductBoxMeta) {
   doRegisterComponent(ProductBox, customProductBoxMeta != null ? customProductBoxMeta : productBoxMeta);
 }
 
-var fetcher$4 = SWRFetcher;
-
-var fn$4 = function fn(provider) {
-  var _provider$products;
-
-  return (_provider$products = provider.products) == null ? void 0 : _provider$products.useSearch;
-};
-
-var useSearch = function useSearch(input) {
-  var hook = useHook(fn$4);
-  return useSWRHook(_extends({
-    fetcher: fetcher$4
-  }, hook))(input);
-};
-
 var fetcher$5 = SWRFetcher;
 
 var fn$5 = function fn(provider) {