@builder.io/plugin-sfcc-commerce-api 0.0.4 → 0.0.5

package/dist/plugin.system.js

@@ -1,6 +1,6 @@
 System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'react', 'mobx', 'mobx-react', '@builder.io/app-context'], function () {
   'use strict';
-  var Builder, jsx, CircularProgress, Paper, IconButton, Button, ListItem, ListItemAvatar, Avatar, ListItemText, TextField, InputAdornment, Typography, Tooltip, React, createElement, Component, useEffect, action, runInAction, useLocalStore, useObserver, appState;
+  var Builder, jsx, CircularProgress, Paper, IconButton, Button, ListItem, ListItemAvatar, Avatar, ListItemText, Typography, Tooltip, TextField, InputAdornment, React, createElement, Component, useEffect, action, runInAction, useLocalStore, useObserver, appState;
   return {
     setters: [function (module) {
       Builder = module.Builder;
@@ -15,10 +15,10 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       ListItemAvatar = module.ListItemAvatar;
       Avatar = module.Avatar;
       ListItemText = module.ListItemText;
-      TextField = module.TextField;
-      InputAdornment = module.InputAdornment;
       Typography = module.Typography;
       Tooltip = module.Tooltip;
+      TextField = module.TextField;
+      InputAdornment = module.InputAdornment;
     }, function (module) {
       React = module.default;
       createElement = module.createElement;
@@ -35,7 +35,7 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
     }],
     execute: function () {
 
-      /*! *****************************************************************************
+      /******************************************************************************
       Copyright (c) Microsoft Corporation.
 
       Permission to use, copy, modify, and/or distribute this software for any
@@ -30331,225 +30331,37 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       });
       });
 
-      var ResourcePreviewCell = function (props) {
-          return useObserver(function () { return (jsx(ListItem, { className: props.className, button: props.button, selected: props.selected },
-              props.resource.image && (jsx(ListItemAvatar, null,
-                  jsx(Avatar, { css: { borderRadius: 4 }, src: props.resource.image.src }))),
-              jsx(ListItemText, { primary: jsx("div", { css: {
-                          maxWidth: 400,
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
-                      } }, props.resource.title) }))); });
-      };
-      var ResourcePicker = function (props) {
-          var store = useLocalStore(function () { return ({
-              searchInputText: '',
-              loading: false,
-              resources: [],
-              search: function () {
-                  return __awaiter(this, void 0, void 0, function () {
-                      var catchError, resourcesResponse;
-                      var _this = this;
-                      return __generator(this, function (_a) {
-                          switch (_a.label) {
-                              case 0:
-                                  this.loading = true;
-                                  catchError = function (err) {
-                                      console.error('search error:', err);
-                                      props.context.snackBar.show('Oh no! There was an error searching for resources');
-                                  };
-                                  return [4 /*yield*/, props.api[props.resourceName]
-                                          .search(store.searchInputText)
-                                          .catch(catchError)];
-                              case 1:
-                                  resourcesResponse = _a.sent();
-                                  runInAction(function () {
-                                      if (Array.isArray(resourcesResponse)) {
-                                          _this.resources = resourcesResponse.filter(function (resource) { return !(props.omitIds || []).includes(String(resource.id)); });
-                                      }
-                                      _this.loading = false;
-                                  });
-                                  return [2 /*return*/];
-                          }
-                      });
-                  });
-              },
-          }); });
-          useEffect(function () {
-              store.search();
-          }, [store.searchInputText]);
-          return useObserver(function () { return (jsx("div", { css: { display: 'flex', flexDirection: 'column', minWidth: 500 } },
-              jsx(TextField, { css: { margin: 15 }, value: store.searchInputText, placeholder: props.title || "Search " + pluralize.plural(props.resourceName) + "...", InputProps: {
-                      startAdornment: (jsx(InputAdornment, { position: "start" },
-                          jsx(Search$1, { css: { color: '#999', marginRight: -2, fontSize: 20 } }))),
-                  }, onChange: action(function (e) { return (store.searchInputText = e.target.value); }) }),
-              store.loading && jsx(CircularProgress, { disableShrink: true, css: { margin: '50px auto' } }),
-              jsx("div", { css: { maxHeight: '80vh', overflow: 'auto' } }, !store.loading &&
-                  (store.resources.length ? (store.resources.map(function (item) {
-                      var _a;
-                      return (jsx("div", { key: item.id, onClick: function (e) {
-                              props.onChange(item);
-                          } },
-                          jsx(ResourcePreviewCell, { selected: String(item.id) === String((_a = props.value) === null || _a === void 0 ? void 0 : _a.id), button: true, resource: item, key: item.id })));
-                  })) : (jsx("div", null,
-                      jsx(Typography, { css: {
-                              margin: '40px 20px',
-                              textAlign: 'center',
-                              fontSize: 17,
-                          }, variant: "caption" },
-                          "No ",
-                          pluralize.plural(props.resourceName),
-                          " found"))))))); });
-      };
-      var ResourcesPickerButton = function (props) {
-          var store = useLocalStore(function () {
-              var _a, _b;
-              return ({
-                  loading: false,
-                  error: null,
-                  resourceInfo: null,
-                  resourceHandle: props.handleOnly && typeof props.value === 'string' ? props.value : undefined,
-                  resourceId: props.handleOnly
-                      ? undefined
-                      : typeof props.value === 'string'
-                          ? props.value
-                          : (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get(props.resourceName),
-                  getResource: function () {
-                      return __awaiter(this, void 0, void 0, function () {
-                          var resourceService, value, _a, _b, _c, e_1;
-                          return __generator(this, function (_d) {
-                              switch (_d.label) {
-                                  case 0:
-                                      this.error = null;
-                                      this.loading = true;
-                                      _d.label = 1;
-                                  case 1:
-                                      _d.trys.push([1, 7, , 8]);
-                                      resourceService = props.api[props.resourceName];
-                                      _b = this.resourceId;
-                                      if (!_b) return [3 /*break*/, 3];
-                                      return [4 /*yield*/, resourceService.findById(this.resourceId)];
-                                  case 2:
-                                      _b = (_d.sent());
-                                      _d.label = 3;
-                                  case 3:
-                                      _a = (_b);
-                                      if (_a) return [3 /*break*/, 6];
-                                      _c = this.resourceHandle &&
-                                          resourceService.findByHandle;
-                                      if (!_c) return [3 /*break*/, 5];
-                                      return [4 /*yield*/, resourceService.findByHandle(this.resourceHandle)];
-                                  case 4:
-                                      _c = (_d.sent());
-                                      _d.label = 5;
-                                  case 5:
-                                      _a = (_c);
-                                      _d.label = 6;
-                                  case 6:
-                                      value = _a;
-                                      this.resourceInfo = value || null;
-                                      return [3 /*break*/, 8];
-                                  case 7:
-                                      e_1 = _d.sent();
-                                      console.error(e_1);
-                                      this.error = e_1;
-                                      props.context.snackBar.show("Oh no! There was an error fetching " + pluralize.plural(props.resourceName));
-                                      return [3 /*break*/, 8];
-                                  case 8:
-                                      this.loading = false;
-                                      return [2 /*return*/];
-                              }
-                          });
-                      });
-                  },
-                  showPickResouceModal: function (title) {
-                      return __awaiter(this, void 0, void 0, function () {
-                          var close;
-                          var _this = this;
-                          return __generator(this, function (_a) {
-                              switch (_a.label) {
-                                  case 0: return [4 /*yield*/, props.context.globalState.openDialog(jsx(ResourcePicker, __assign({ resourceName: props.resourceName, api: props.api, context: props.context }, (this.resourceInfo && { value: this.resourceInfo }), { title: title, onChange: action(function (value) {
-                                              var _a;
-                                              if (value) {
-                                                  _this.resourceHandle = value.handle;
-                                                  _this.resourceId = String(value.id);
-                                                  _this.getResource();
-                                                  if (props.handleOnly) {
-                                                      props.onChange(_this.resourceHandle);
-                                                  }
-                                                  else {
-                                                      if ((_a = props.field) === null || _a === void 0 ? void 0 : _a.isTargeting) {
-                                                          props.onChange(_this.resourceId);
-                                                      }
-                                                      else {
-                                                          props.onChange(props.api[props.resourceName].getRequestObject(_this.resourceId, value));
-                                                      }
-                                                  }
-                                              }
-                                              close();
-                                          }) })), true, {
-                                          PaperProps: {
-                                              // Align modal to top so doesn't jump around centering itself when
-                                              // grows and shrinks to show more/less resources or loading
-                                              style: {
-                                                  alignSelf: 'flex-start',
-                                              },
-                                          },
-                                      })];
-                                  case 1:
-                                      close = _a.sent();
-                                      return [2 /*return*/];
-                              }
-                          });
-                      });
-                  },
-              });
-          });
-          useEffect(function () {
-              store.getResource();
-          }, []);
-          useEffect(function () {
-              var _a, _b;
-              var hasPreviewFields = Boolean((_a = props.context.designerState.editingModel) === null || _a === void 0 ? void 0 : _a.fields.find(function (field) { return field.type === props.previewType; }));
-              if (hasPreviewFields &&
-                  props.context.globalState.globalDialogs.length === 0 && ((_b = props.context.designerState) === null || _b === void 0 ? void 0 : _b.editingContentModel) &&
-                  props.isPreview &&
-                  (!props.value || store.error)) {
-                  setTimeout(function () { return store.showPickResouceModal("Pick a " + props.resourceName + " to preview"); });
-              }
-          }, [store.error]);
-          return useObserver(function () {
-              var pluginSettings = props.context.user.organization.value.settings.plugins.get(props.pluginId);
-              if (!pluginSettings.get('hasConnected')) {
-                  return jsx(SetEcomKeysMessage, { pluginId: props.pluginId, pluginName: props.pluginName });
-              }
-              return (jsx("div", { css: { display: 'flex', flexDirection: 'column', padding: '10px 0' } },
-                  store.loading && (jsx(CircularProgress, { size: 20, disableShrink: true, css: { margin: '30px auto' } })),
-                  store.resourceInfo && (jsx(Paper, { css: {
-                          marginBottom: 15,
-                          position: 'relative',
-                      } },
-                      jsx(ResourcePreviewCell, { button: true, css: { paddingRight: 30 }, resource: store.resourceInfo }),
-                      jsx(IconButton, { css: {
-                              position: 'absolute',
-                              right: 2,
-                              top: 0,
-                              bottom: 0,
-                              height: 50,
-                              marginTop: 'auto',
-                              marginBottom: 'auto',
-                          }, onClick: function () {
-                              store.showPickResouceModal();
-                          } },
-                          jsx(Create$1, { css: { color: '#888' } })))),
-                  !store.resourceInfo && !store.loading && (jsx(Button, { color: "primary", variant: "contained", onClick: function () {
-                          store.showPickResouceModal();
-                      } },
-                      "Choose ",
-                      props.resourceName))));
-          });
-      };
+      /**
+       * Checks if `value` is the
+       * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+       * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+       *
+       * @static
+       * @memberOf _
+       * @since 0.1.0
+       * @category Lang
+       * @param {*} value The value to check.
+       * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+       * @example
+       *
+       * _.isObject({});
+       * // => true
+       *
+       * _.isObject([1, 2, 3]);
+       * // => true
+       *
+       * _.isObject(_.noop);
+       * // => true
+       *
+       * _.isObject(null);
+       * // => false
+       */
+      function isObject(value) {
+        var type = typeof value;
+        return value != null && (type == 'object' || type == 'function');
+      }
+
+      var isObject_1 = isObject;
 
       /** Detect free variable `global` from Node.js. */
       var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
@@ -30564,59 +30376,70 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
 
       var _root = root;
 
-      /** Built-in value references. */
-      var Symbol$1 = _root.Symbol;
+      /**
+       * Gets the timestamp of the number of milliseconds that have elapsed since
+       * the Unix epoch (1 January 1970 00:00:00 UTC).
+       *
+       * @static
+       * @memberOf _
+       * @since 2.4.0
+       * @category Date
+       * @returns {number} Returns the timestamp.
+       * @example
+       *
+       * _.defer(function(stamp) {
+       *   console.log(_.now() - stamp);
+       * }, _.now());
+       * // => Logs the number of milliseconds it took for the deferred invocation.
+       */
+      var now = function() {
+        return _root.Date.now();
+      };
 
-      var _Symbol = Symbol$1;
+      var now_1 = now;
+
+      /** Used to match a single whitespace character. */
+      var reWhitespace = /\s/;
 
       /**
-       * A specialized version of `_.map` for arrays without support for iteratee
-       * shorthands.
+       * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+       * character of `string`.
        *
        * @private
-       * @param {Array} [array] The array to iterate over.
-       * @param {Function} iteratee The function invoked per iteration.
-       * @returns {Array} Returns the new mapped array.
+       * @param {string} string The string to inspect.
+       * @returns {number} Returns the index of the last non-whitespace character.
        */
-      function arrayMap(array, iteratee) {
-        var index = -1,
-            length = array == null ? 0 : array.length,
-            result = Array(length);
+      function trimmedEndIndex(string) {
+        var index = string.length;
 
-        while (++index < length) {
-          result[index] = iteratee(array[index], index, array);
-        }
-        return result;
+        while (index-- && reWhitespace.test(string.charAt(index))) {}
+        return index;
       }
 
-      var _arrayMap = arrayMap;
+      var _trimmedEndIndex = trimmedEndIndex;
+
+      /** Used to match leading whitespace. */
+      var reTrimStart = /^\s+/;
 
       /**
-       * Checks if `value` is classified as an `Array` object.
-       *
-       * @static
-       * @memberOf _
-       * @since 0.1.0
-       * @category Lang
-       * @param {*} value The value to check.
-       * @returns {boolean} Returns `true` if `value` is an array, else `false`.
-       * @example
-       *
-       * _.isArray([1, 2, 3]);
-       * // => true
-       *
-       * _.isArray(document.body.children);
-       * // => false
-       *
-       * _.isArray('abc');
-       * // => false
+       * The base implementation of `_.trim`.
        *
-       * _.isArray(_.noop);
-       * // => false
+       * @private
+       * @param {string} string The string to trim.
+       * @returns {string} Returns the trimmed string.
        */
-      var isArray = Array.isArray;
+      function baseTrim(string) {
+        return string
+          ? string.slice(0, _trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+          : string;
+      }
 
-      var isArray_1 = isArray;
+      var _baseTrim = baseTrim;
+
+      /** Built-in value references. */
+      var Symbol$1 = _root.Symbol;
+
+      var _Symbol = Symbol$1;
 
       /** Used for built-in method references. */
       var objectProto$b = Object.prototype;
@@ -30768,6 +30591,591 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
 
       var isSymbol_1 = isSymbol;
 
+      /** Used as references for various `Number` constants. */
+      var NAN = 0 / 0;
+
+      /** Used to detect bad signed hexadecimal string values. */
+      var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+      /** Used to detect binary string values. */
+      var reIsBinary = /^0b[01]+$/i;
+
+      /** Used to detect octal string values. */
+      var reIsOctal = /^0o[0-7]+$/i;
+
+      /** Built-in method references without a dependency on `root`. */
+      var freeParseInt = parseInt;
+
+      /**
+       * Converts `value` to a number.
+       *
+       * @static
+       * @memberOf _
+       * @since 4.0.0
+       * @category Lang
+       * @param {*} value The value to process.
+       * @returns {number} Returns the number.
+       * @example
+       *
+       * _.toNumber(3.2);
+       * // => 3.2
+       *
+       * _.toNumber(Number.MIN_VALUE);
+       * // => 5e-324
+       *
+       * _.toNumber(Infinity);
+       * // => Infinity
+       *
+       * _.toNumber('3.2');
+       * // => 3.2
+       */
+      function toNumber(value) {
+        if (typeof value == 'number') {
+          return value;
+        }
+        if (isSymbol_1(value)) {
+          return NAN;
+        }
+        if (isObject_1(value)) {
+          var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+          value = isObject_1(other) ? (other + '') : other;
+        }
+        if (typeof value != 'string') {
+          return value === 0 ? value : +value;
+        }
+        value = _baseTrim(value);
+        var isBinary = reIsBinary.test(value);
+        return (isBinary || reIsOctal.test(value))
+          ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
+          : (reIsBadHex.test(value) ? NAN : +value);
+      }
+
+      var toNumber_1 = toNumber;
+
+      /** Error message constants. */
+      var FUNC_ERROR_TEXT$1 = 'Expected a function';
+
+      /* Built-in method references for those with the same name as other `lodash` methods. */
+      var nativeMax$1 = Math.max,
+          nativeMin = Math.min;
+
+      /**
+       * Creates a debounced function that delays invoking `func` until after `wait`
+       * milliseconds have elapsed since the last time the debounced function was
+       * invoked. The debounced function comes with a `cancel` method to cancel
+       * delayed `func` invocations and a `flush` method to immediately invoke them.
+       * Provide `options` to indicate whether `func` should be invoked on the
+       * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+       * with the last arguments provided to the debounced function. Subsequent
+       * calls to the debounced function return the result of the last `func`
+       * invocation.
+       *
+       * **Note:** If `leading` and `trailing` options are `true`, `func` is
+       * invoked on the trailing edge of the timeout only if the debounced function
+       * is invoked more than once during the `wait` timeout.
+       *
+       * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+       * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+       *
+       * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+       * for details over the differences between `_.debounce` and `_.throttle`.
+       *
+       * @static
+       * @memberOf _
+       * @since 0.1.0
+       * @category Function
+       * @param {Function} func The function to debounce.
+       * @param {number} [wait=0] The number of milliseconds to delay.
+       * @param {Object} [options={}] The options object.
+       * @param {boolean} [options.leading=false]
+       *  Specify invoking on the leading edge of the timeout.
+       * @param {number} [options.maxWait]
+       *  The maximum time `func` is allowed to be delayed before it's invoked.
+       * @param {boolean} [options.trailing=true]
+       *  Specify invoking on the trailing edge of the timeout.
+       * @returns {Function} Returns the new debounced function.
+       * @example
+       *
+       * // Avoid costly calculations while the window size is in flux.
+       * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+       *
+       * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+       * jQuery(element).on('click', _.debounce(sendMail, 300, {
+       *   'leading': true,
+       *   'trailing': false
+       * }));
+       *
+       * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+       * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+       * var source = new EventSource('/stream');
+       * jQuery(source).on('message', debounced);
+       *
+       * // Cancel the trailing debounced invocation.
+       * jQuery(window).on('popstate', debounced.cancel);
+       */
+      function debounce(func, wait, options) {
+        var lastArgs,
+            lastThis,
+            maxWait,
+            result,
+            timerId,
+            lastCallTime,
+            lastInvokeTime = 0,
+            leading = false,
+            maxing = false,
+            trailing = true;
+
+        if (typeof func != 'function') {
+          throw new TypeError(FUNC_ERROR_TEXT$1);
+        }
+        wait = toNumber_1(wait) || 0;
+        if (isObject_1(options)) {
+          leading = !!options.leading;
+          maxing = 'maxWait' in options;
+          maxWait = maxing ? nativeMax$1(toNumber_1(options.maxWait) || 0, wait) : maxWait;
+          trailing = 'trailing' in options ? !!options.trailing : trailing;
+        }
+
+        function invokeFunc(time) {
+          var args = lastArgs,
+              thisArg = lastThis;
+
+          lastArgs = lastThis = undefined;
+          lastInvokeTime = time;
+          result = func.apply(thisArg, args);
+          return result;
+        }
+
+        function leadingEdge(time) {
+          // Reset any `maxWait` timer.
+          lastInvokeTime = time;
+          // Start the timer for the trailing edge.
+          timerId = setTimeout(timerExpired, wait);
+          // Invoke the leading edge.
+          return leading ? invokeFunc(time) : result;
+        }
+
+        function remainingWait(time) {
+          var timeSinceLastCall = time - lastCallTime,
+              timeSinceLastInvoke = time - lastInvokeTime,
+              timeWaiting = wait - timeSinceLastCall;
+
+          return maxing
+            ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
+            : timeWaiting;
+        }
+
+        function shouldInvoke(time) {
+          var timeSinceLastCall = time - lastCallTime,
+              timeSinceLastInvoke = time - lastInvokeTime;
+
+          // Either this is the first call, activity has stopped and we're at the
+          // trailing edge, the system time has gone backwards and we're treating
+          // it as the trailing edge, or we've hit the `maxWait` limit.
+          return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
+            (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
+        }
+
+        function timerExpired() {
+          var time = now_1();
+          if (shouldInvoke(time)) {
+            return trailingEdge(time);
+          }
+          // Restart the timer.
+          timerId = setTimeout(timerExpired, remainingWait(time));
+        }
+
+        function trailingEdge(time) {
+          timerId = undefined;
+
+          // Only invoke if we have `lastArgs` which means `func` has been
+          // debounced at least once.
+          if (trailing && lastArgs) {
+            return invokeFunc(time);
+          }
+          lastArgs = lastThis = undefined;
+          return result;
+        }
+
+        function cancel() {
+          if (timerId !== undefined) {
+            clearTimeout(timerId);
+          }
+          lastInvokeTime = 0;
+          lastArgs = lastCallTime = lastThis = timerId = undefined;
+        }
+
+        function flush() {
+          return timerId === undefined ? result : trailingEdge(now_1());
+        }
+
+        function debounced() {
+          var time = now_1(),
+              isInvoking = shouldInvoke(time);
+
+          lastArgs = arguments;
+          lastThis = this;
+          lastCallTime = time;
+
+          if (isInvoking) {
+            if (timerId === undefined) {
+              return leadingEdge(lastCallTime);
+            }
+            if (maxing) {
+              // Handle invocations in a tight loop.
+              clearTimeout(timerId);
+              timerId = setTimeout(timerExpired, wait);
+              return invokeFunc(lastCallTime);
+            }
+          }
+          if (timerId === undefined) {
+            timerId = setTimeout(timerExpired, wait);
+          }
+          return result;
+        }
+        debounced.cancel = cancel;
+        debounced.flush = flush;
+        return debounced;
+      }
+
+      var debounce_1 = debounce;
+
+      /** Error message constants. */
+      var FUNC_ERROR_TEXT = 'Expected a function';
+
+      /**
+       * Creates a throttled function that only invokes `func` at most once per
+       * every `wait` milliseconds. The throttled function comes with a `cancel`
+       * method to cancel delayed `func` invocations and a `flush` method to
+       * immediately invoke them. Provide `options` to indicate whether `func`
+       * should be invoked on the leading and/or trailing edge of the `wait`
+       * timeout. The `func` is invoked with the last arguments provided to the
+       * throttled function. Subsequent calls to the throttled function return the
+       * result of the last `func` invocation.
+       *
+       * **Note:** If `leading` and `trailing` options are `true`, `func` is
+       * invoked on the trailing edge of the timeout only if the throttled function
+       * is invoked more than once during the `wait` timeout.
+       *
+       * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+       * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+       *
+       * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+       * for details over the differences between `_.throttle` and `_.debounce`.
+       *
+       * @static
+       * @memberOf _
+       * @since 0.1.0
+       * @category Function
+       * @param {Function} func The function to throttle.
+       * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+       * @param {Object} [options={}] The options object.
+       * @param {boolean} [options.leading=true]
+       *  Specify invoking on the leading edge of the timeout.
+       * @param {boolean} [options.trailing=true]
+       *  Specify invoking on the trailing edge of the timeout.
+       * @returns {Function} Returns the new throttled function.
+       * @example
+       *
+       * // Avoid excessively updating the position while scrolling.
+       * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+       *
+       * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+       * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+       * jQuery(element).on('click', throttled);
+       *
+       * // Cancel the trailing throttled invocation.
+       * jQuery(window).on('popstate', throttled.cancel);
+       */
+      function throttle(func, wait, options) {
+        var leading = true,
+            trailing = true;
+
+        if (typeof func != 'function') {
+          throw new TypeError(FUNC_ERROR_TEXT);
+        }
+        if (isObject_1(options)) {
+          leading = 'leading' in options ? !!options.leading : leading;
+          trailing = 'trailing' in options ? !!options.trailing : trailing;
+        }
+        return debounce_1(func, wait, {
+          'leading': leading,
+          'maxWait': wait,
+          'trailing': trailing
+        });
+      }
+
+      var throttle_1 = throttle;
+
+      var ResourcePreviewCell = function (props) {
+          return useObserver(function () { return (jsx(ListItem, { className: props.className, button: props.button, selected: props.selected },
+              props.resource.image && (jsx(ListItemAvatar, null,
+                  jsx(Avatar, { css: { borderRadius: 4 }, src: props.resource.image.src }))),
+              jsx(ListItemText, { primary: jsx("div", { css: {
+                          maxWidth: 400,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                      } }, props.resource.title) }))); });
+      };
+      var ResourcePicker = function (props) {
+          var store = useLocalStore(function () { return ({
+              searchInputText: '',
+              loading: false,
+              resources: [],
+              search: throttle_1(function () { return __awaiter(void 0, void 0, void 0, function () {
+                  var catchError, resourcesResponse;
+                  return __generator(this, function (_a) {
+                      switch (_a.label) {
+                          case 0:
+                              store.loading = true;
+                              catchError = function (err) {
+                                  console.error('search error:', err);
+                                  props.context.snackBar.show('Oh no! There was an error searching for resources');
+                              };
+                              return [4 /*yield*/, props.api[props.resourceName]
+                                      .search(store.searchInputText)
+                                      .catch(catchError)];
+                          case 1:
+                              resourcesResponse = _a.sent();
+                              runInAction(function () {
+                                  if (Array.isArray(resourcesResponse)) {
+                                      store.resources = resourcesResponse.filter(function (resource) { return !(props.omitIds || []).includes(String(resource.id)); });
+                                  }
+                                  store.loading = false;
+                              });
+                              return [2 /*return*/];
+                      }
+                  });
+              }); }, 400),
+          }); });
+          useEffect(function () {
+              store.search();
+          }, [store.searchInputText]);
+          return useObserver(function () { return (jsx("div", { css: { display: 'flex', flexDirection: 'column', minWidth: 500 } },
+              jsx(TextField, { css: { margin: 15 }, value: store.searchInputText, placeholder: props.title || "Search " + pluralize.plural(props.resourceName) + "...", InputProps: {
+                      startAdornment: (jsx(InputAdornment, { position: "start" },
+                          jsx(Search$1, { css: { color: '#999', marginRight: -2, fontSize: 20 } }))),
+                  }, onChange: action(function (e) { return (store.searchInputText = e.target.value); }) }),
+              store.loading && jsx(CircularProgress, { disableShrink: true, css: { margin: '50px auto' } }),
+              jsx("div", { css: { maxHeight: '80vh', overflow: 'auto' } }, !store.loading &&
+                  (store.resources.length ? (store.resources.map(function (item) {
+                      var _a;
+                      return (jsx("div", { key: item.id, onClick: function (e) {
+                              props.onChange(item);
+                          } },
+                          jsx(ResourcePreviewCell, { selected: String(item.id) === String((_a = props.value) === null || _a === void 0 ? void 0 : _a.id), button: true, resource: item, key: item.id })));
+                  })) : (jsx("div", null,
+                      jsx(Typography, { css: {
+                              margin: '40px 20px',
+                              textAlign: 'center',
+                              fontSize: 17,
+                          }, variant: "caption" },
+                          "No ",
+                          pluralize.plural(props.resourceName),
+                          " found"))))))); });
+      };
+      var ResourcesPickerButton = function (props) {
+          var store = useLocalStore(function () {
+              var _a, _b;
+              return ({
+                  loading: false,
+                  error: null,
+                  resourceInfo: null,
+                  resourceHandle: props.handleOnly && typeof props.value === 'string' ? props.value : undefined,
+                  resourceId: props.handleOnly
+                      ? undefined
+                      : typeof props.value === 'string'
+                          ? props.value
+                          : (_b = (_a = props.value) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.get(props.resourceName),
+                  getResource: function () {
+                      return __awaiter(this, void 0, void 0, function () {
+                          var resourceService, value, _a, _b, _c, e_1;
+                          return __generator(this, function (_d) {
+                              switch (_d.label) {
+                                  case 0:
+                                      this.error = null;
+                                      this.loading = true;
+                                      _d.label = 1;
+                                  case 1:
+                                      _d.trys.push([1, 7, , 8]);
+                                      resourceService = props.api[props.resourceName];
+                                      _b = this.resourceId;
+                                      if (!_b) return [3 /*break*/, 3];
+                                      return [4 /*yield*/, resourceService.findById(this.resourceId)];
+                                  case 2:
+                                      _b = (_d.sent());
+                                      _d.label = 3;
+                                  case 3:
+                                      _a = (_b);
+                                      if (_a) return [3 /*break*/, 6];
+                                      _c = this.resourceHandle &&
+                                          resourceService.findByHandle;
+                                      if (!_c) return [3 /*break*/, 5];
+                                      return [4 /*yield*/, resourceService.findByHandle(this.resourceHandle)];
+                                  case 4:
+                                      _c = (_d.sent());
+                                      _d.label = 5;
+                                  case 5:
+                                      _a = (_c);
+                                      _d.label = 6;
+                                  case 6:
+                                      value = _a;
+                                      this.resourceInfo = value || null;
+                                      return [3 /*break*/, 8];
+                                  case 7:
+                                      e_1 = _d.sent();
+                                      console.error(e_1);
+                                      this.error = e_1;
+                                      props.context.snackBar.show("Oh no! There was an error fetching " + pluralize.plural(props.resourceName));
+                                      return [3 /*break*/, 8];
+                                  case 8:
+                                      this.loading = false;
+                                      return [2 /*return*/];
+                              }
+                          });
+                      });
+                  },
+                  showPickResouceModal: function (title) {
+                      return __awaiter(this, void 0, void 0, function () {
+                          var resourcePicker, rest, PickerCompnent, close;
+                          var _this = this;
+                          return __generator(this, function (_a) {
+                              switch (_a.label) {
+                                  case 0:
+                                      props.value, resourcePicker = props.resourcePicker, rest = __rest(props, ["value", "resourcePicker"]);
+                                      PickerCompnent = resourcePicker || ResourcePicker;
+                                      return [4 /*yield*/, props.context.globalState.openDialog(jsx(PickerCompnent, __assign({}, rest, { resourceName: props.resourceName }, (this.resourceInfo && { value: this.resourceInfo }), { title: title, onChange: action(function (value) {
+                                                  var _a;
+                                                  if (value) {
+                                                      _this.resourceHandle = value.handle;
+                                                      _this.resourceId = String(value.id);
+                                                      _this.getResource();
+                                                      if (props.handleOnly) {
+                                                          props.onChange(_this.resourceHandle);
+                                                      }
+                                                      else {
+                                                          if ((_a = props.field) === null || _a === void 0 ? void 0 : _a.isTargeting) {
+                                                              props.onChange(_this.resourceId);
+                                                          }
+                                                          else {
+                                                              props.onChange(props.api[props.resourceName].getRequestObject(_this.resourceId, value));
+                                                          }
+                                                      }
+                                                  }
+                                                  close();
+                                              }) })), true, {
+                                              PaperProps: {
+                                                  // Align modal to top so doesn't jump around centering itself when
+                                                  // grows and shrinks to show more/less resources or loading
+                                                  style: {
+                                                      alignSelf: 'flex-start',
+                                                  },
+                                              },
+                                          })];
+                                  case 1:
+                                      close = _a.sent();
+                                      return [2 /*return*/];
+                              }
+                          });
+                      });
+                  },
+              });
+          });
+          useEffect(function () {
+              store.getResource();
+          }, []);
+          useEffect(function () {
+              var _a, _b;
+              var hasPreviewFields = Boolean((_a = props.context.designerState.editingModel) === null || _a === void 0 ? void 0 : _a.fields.find(function (field) { return field.type === props.previewType; }));
+              if (hasPreviewFields &&
+                  props.context.globalState.globalDialogs.length === 0 && ((_b = props.context.designerState) === null || _b === void 0 ? void 0 : _b.editingContentModel) &&
+                  props.isPreview &&
+                  (!props.value || store.error)) {
+                  setTimeout(function () { return store.showPickResouceModal("Pick a " + props.resourceName + " to preview"); });
+              }
+          }, [store.error]);
+          return useObserver(function () {
+              var pluginSettings = props.context.user.organization.value.settings.plugins.get(props.pluginId);
+              if (!pluginSettings.get('hasConnected')) {
+                  return jsx(SetEcomKeysMessage, { pluginId: props.pluginId, pluginName: props.pluginName });
+              }
+              return (jsx("div", { css: { display: 'flex', flexDirection: 'column', padding: '10px 0' } },
+                  store.loading && (jsx(CircularProgress, { size: 20, disableShrink: true, css: { margin: '30px auto' } })),
+                  store.resourceInfo && (jsx(Paper, { css: {
+                          marginBottom: 15,
+                          position: 'relative',
+                      } },
+                      jsx(ResourcePreviewCell, { button: true, css: { paddingRight: 30 }, resource: store.resourceInfo }),
+                      jsx(IconButton, { css: {
+                              position: 'absolute',
+                              right: 2,
+                              top: 0,
+                              bottom: 0,
+                              height: 50,
+                              marginTop: 'auto',
+                              marginBottom: 'auto',
+                          }, onClick: function () {
+                              store.showPickResouceModal();
+                          } },
+                          jsx(Create$1, { css: { color: '#888' } })))),
+                  !store.resourceInfo && !store.loading && (jsx(Button, { color: "primary", variant: "contained", onClick: function () {
+                          store.showPickResouceModal();
+                      } },
+                      "Choose ",
+                      props.resourceName))));
+          });
+      };
+
+      /**
+       * A specialized version of `_.map` for arrays without support for iteratee
+       * shorthands.
+       *
+       * @private
+       * @param {Array} [array] The array to iterate over.
+       * @param {Function} iteratee The function invoked per iteration.
+       * @returns {Array} Returns the new mapped array.
+       */
+      function arrayMap(array, iteratee) {
+        var index = -1,
+            length = array == null ? 0 : array.length,
+            result = Array(length);
+
+        while (++index < length) {
+          result[index] = iteratee(array[index], index, array);
+        }
+        return result;
+      }
+
+      var _arrayMap = arrayMap;
+
+      /**
+       * Checks if `value` is classified as an `Array` object.
+       *
+       * @static
+       * @memberOf _
+       * @since 0.1.0
+       * @category Lang
+       * @param {*} value The value to check.
+       * @returns {boolean} Returns `true` if `value` is an array, else `false`.
+       * @example
+       *
+       * _.isArray([1, 2, 3]);
+       * // => true
+       *
+       * _.isArray(document.body.children);
+       * // => false
+       *
+       * _.isArray('abc');
+       * // => false
+       *
+       * _.isArray(_.noop);
+       * // => false
+       */
+      var isArray = Array.isArray;
+
+      var isArray_1 = isArray;
+
       /** Used as references for various `Number` constants. */
       var INFINITY = 1 / 0;
 
@@ -31115,17 +31523,19 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
                                   marginLeft: 'auto',
                                   alignSelf: 'center',
                               }, onClick: function () {
-                                  var res = __spreadArrays(props.value).splice(props.value.indexOf(item) + 1, 1);
+                                  var res = __spreadArrays(props.value.slice(0, props.value.indexOf(item)), props.value.slice(props.value.indexOf(item) + 1));
                                   props.onChange(res);
                               } },
                               jsx(Close$1, null))))); })),
                   jsx(Button, { color: "primary", variant: "outlined", fullWidth: true, css: { marginTop: 10 }, onClick: function () {
-                          var close = appState.globalState.openDialog(jsx(ResourcePicker, { resourceName: props.resourceName, api: props.api, context: appState, omitIds: store.value, onChange: action(function (resource) {
+                          props.value; var resourcePicker = props.resourcePicker, rest = __rest(props, ["value", "resourcePicker"]);
+                          var PickerCompnent = resourcePicker || ResourcePicker;
+                          var close = appState.globalState.openDialog(jsx(PickerCompnent, __assign({}, rest, { context: appState, omitIds: store.value, onChange: action(function (resource) {
                                   if (resource) {
                                       props.onChange(__spreadArrays((store.value || []), [String(resource.id)]));
                                   }
                                   close();
-                              }) }));
+                              }) })));
                       } },
                       "+ ",
                       capitalize_1(props.resourceName)),
@@ -31156,38 +31566,6 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
           });
       }
 
-      /**
-       * Checks if `value` is the
-       * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
-       * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
-       *
-       * @static
-       * @memberOf _
-       * @since 0.1.0
-       * @category Lang
-       * @param {*} value The value to check.
-       * @returns {boolean} Returns `true` if `value` is an object, else `false`.
-       * @example
-       *
-       * _.isObject({});
-       * // => true
-       *
-       * _.isObject([1, 2, 3]);
-       * // => true
-       *
-       * _.isObject(_.noop);
-       * // => true
-       *
-       * _.isObject(null);
-       * // => false
-       */
-      function isObject(value) {
-        var type = typeof value;
-        return value != null && (type == 'object' || type == 'function');
-      }
-
-      var isObject_1 = isObject;
-
       /** `Object#toString` result references. */
       var asyncTag = '[object AsyncFunction]',
           funcTag$1 = '[object Function]',
@@ -32953,72 +33331,77 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
 
       var template_1 = template;
 
-      var onEditorLoad = function (config, apiOperations, resourceName) { return function (_a) {
-          var safeReaction = _a.safeReaction, updatePreviewUrl = _a.updatePreviewUrl;
-          // compile previewResource if any, to allow user to have templated editing urls for their models (e.g in cases of product page template)
-          safeReaction(function () {
-              var _a, _b, _c, _d, _e, _f, _g, _h;
-              var modelUrl = (_a = appState.designerState.editingModel) === null || _a === void 0 ? void 0 : _a.examplePageUrl;
-              if (!modelUrl) {
-                  return;
-              }
-              var previewField = (_c = (_b = appState.designerState.editingModel) === null || _b === void 0 ? void 0 : _b.fields.find(function (field) {
-                  return field.type === "" + config.name + capitalize_1(resourceName) + "Preview";
-              })) === null || _c === void 0 ? void 0 : _c.name;
-              if (previewField && appState.designerState.editingContentModel) {
-                  var resourceId = (_d = appState.designerState.editingContentModel.data
-                      .get(previewField)) === null || _d === void 0 ? void 0 : _d.options.get(resourceName);
-                  return apiOperations[resourceName].findById(resourceId);
-              }
-              var pluginSettings = appState.user.organization.value.settings.plugins.get(config.id);
-              var shouldSync = pluginSettings.get('syncPreviewUrlWithTargeting');
-              var query = (_f = (_e = appState.designerState.editingContentModel) === null || _e === void 0 ? void 0 : _e.query) === null || _f === void 0 ? void 0 : _f.toJSON();
-              var customAttributes = (_g = appState.user.organization.value.customTargetingAttributes) === null || _g === void 0 ? void 0 : _g.toJSON();
-              if (shouldSync && customAttributes && query) {
-                  var apiService = apiOperations[resourceName];
-                  var _loop_1 = function (key, value) {
-                      var targetingValue = (_h = query.find(function (q) { return q.property === key; })) === null || _h === void 0 ? void 0 : _h.value;
-                      if (targetingValue && value.type === "" + config.name + capitalize_1(resourceName)) {
-                          return { value: apiService.findById(targetingValue) };
-                      }
-                      if (apiService.findByHandle &&
-                          targetingValue &&
-                          value.type === "" + config.name + capitalize_1(resourceName) + "Handle") {
-                          return { value: apiService.findByHandle(targetingValue) };
-                      }
-                  };
-                  for (var _i = 0, _j = Object.entries(customAttributes); _i < _j.length; _i++) {
-                      var _k = _j[_i], key = _k[0], value = _k[1];
-                      var state_1 = _loop_1(key, value);
-                      if (typeof state_1 === "object")
-                          return state_1.value;
+      var onEditorLoad = function (config, apiOperations, resourceName) {
+          return function (_a) {
+              var safeReaction = _a.safeReaction, updatePreviewUrl = _a.updatePreviewUrl;
+              // compile previewResource if any, to allow user to have templated editing urls for their models (e.g in cases of product page template)
+              safeReaction(function () {
+                  var _a, _b, _c, _d, _e, _f, _g, _h;
+                  var modelUrl = (_a = appState.designerState.editingModel) === null || _a === void 0 ? void 0 : _a.examplePageUrl;
+                  if (!modelUrl) {
+                      return;
                   }
-              }
-          }, function (resourcePromise) { return __awaiter(void 0, void 0, void 0, function () {
-              var modelUrl, previewResource, compiled, previewUrl;
-              var _a;
-              return __generator(this, function (_b) {
-                  switch (_b.label) {
-                      case 0:
-                          modelUrl = (_a = appState.designerState.editingModel) === null || _a === void 0 ? void 0 : _a.examplePageUrl;
-                          if (!(resourcePromise && modelUrl)) return [3 /*break*/, 2];
-                          return [4 /*yield*/, resourcePromise];
-                      case 1:
-                          previewResource = _b.sent();
-                          compiled = template_1(modelUrl);
-                          previewUrl = compiled(withDefaults({
-                              previewResource: previewResource,
-                          }));
-                          if (modelUrl !== previewUrl) {
-                              updatePreviewUrl(previewUrl);
-                              appState.snackBar.show("Previewing " + previewUrl);
+                  var previewField = (_c = (_b = appState.designerState.editingModel) === null || _b === void 0 ? void 0 : _b.fields.find(function (field) {
+                      return field.type === "" + config.name + capitalize_1(resourceName) + "Preview";
+                  })) === null || _c === void 0 ? void 0 : _c.name;
+                  if (previewField && appState.designerState.editingContentModel) {
+                      var resourceId = (_d = appState.designerState.editingContentModel.data
+                          .get(previewField)) === null || _d === void 0 ? void 0 : _d.options.get(resourceName);
+                      return apiOperations[resourceName].findById(resourceId);
+                  }
+                  var pluginSettings = appState.user.organization.value.settings.plugins.get(config.id);
+                  var shouldSync = pluginSettings.get('syncPreviewUrlWithTargeting');
+                  var query = (_f = (_e = appState.designerState.editingContentModel) === null || _e === void 0 ? void 0 : _e.query) === null || _f === void 0 ? void 0 : _f.toJSON();
+                  var customAttributes = (_g = appState.user.organization.value.customTargetingAttributes) === null || _g === void 0 ? void 0 : _g.toJSON();
+                  if (shouldSync && customAttributes && query) {
+                      var apiService = apiOperations[resourceName];
+                      var _loop_1 = function (key, value) {
+                          var targetingValue = (_h = query.find(function (q) { return q.property === key; })) === null || _h === void 0 ? void 0 : _h.value;
+                          if (targetingValue && value.type === "" + config.name + capitalize_1(resourceName)) {
+                              return { value: apiService.findById(targetingValue) };
+                          }
+                          if (apiService.findByHandle &&
+                              targetingValue &&
+                              value.type === "" + config.name + capitalize_1(resourceName) + "Handle") {
+                              return { value: apiService.findByHandle(targetingValue) };
                           }
-                          _b.label = 2;
-                      case 2: return [2 /*return*/];
+                      };
+                      for (var _i = 0, _j = Object.entries(customAttributes); _i < _j.length; _i++) {
+                          var _k = _j[_i], key = _k[0], value = _k[1];
+                          var state_1 = _loop_1(key, value);
+                          if (typeof state_1 === "object")
+                              return state_1.value;
+                      }
                   }
-              });
-          }); });
-      }; };
+              }, function (resourcePromise) { return __awaiter(void 0, void 0, void 0, function () {
+                  var modelUrl, previewResource, compiled, previewUrl;
+                  var _a;
+                  var _b;
+                  return __generator(this, function (_c) {
+                      switch (_c.label) {
+                          case 0:
+                              modelUrl = (_b = appState.designerState.editingModel) === null || _b === void 0 ? void 0 : _b.examplePageUrl;
+                              if (!(resourcePromise && modelUrl)) return [3 /*break*/, 2];
+                              return [4 /*yield*/, resourcePromise];
+                          case 1:
+                              previewResource = _c.sent();
+                              compiled = template_1(modelUrl);
+                              previewUrl = compiled(withDefaults((_a = {
+                                      previewResource: previewResource
+                                  },
+                                  _a["preview" + capitalize_1(resourceName)] = previewResource,
+                                  _a)));
+                              if (modelUrl !== previewUrl) {
+                                  updatePreviewUrl(previewUrl);
+                                  appState.snackBar.show("Previewing " + previewUrl);
+                              }
+                              _c.label = 2;
+                          case 2: return [2 /*return*/];
+                      }
+                  });
+              }); });
+          };
+      };
       var withDefaults = function (obj) {
           var _a;
           return (__assign(__assign({}, obj), { space: {
@@ -33095,27 +33478,33 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
                                               api: apiOperations,
                                           };
                                           Builder.register('editor.onLoad', onEditorLoad(config, apiOperations, resourceName));
+                                          var resourcePicker = apiOperations[resourceName].resourcePicker;
                                           Builder.registerEditor({
                                               name: "" + config.name + capitalize_1(resourceName),
+                                              isDataResource: true,
+                                              pluginId: config.id,
                                               component: function (props) { return (React.createElement(ErrorBoundary, null,
-                                                  React.createElement(ResourcesPickerButton, __assign({}, props, contextProps)))); },
-                                          });
-                                          Builder.registerEditor({
-                                              name: "" + config.name + capitalize_1(resourceName) + "Preview",
-                                              component: function (props) { return (React.createElement(ErrorBoundary, null,
-                                                  React.createElement(ResourcesPickerButton, __assign({}, props, contextProps, { previewType: "" + config.name + capitalize_1(resourceName) + "Preview", isPreview: true })))); },
+                                                  React.createElement(ResourcesPickerButton, __assign({ resourcePicker: resourcePicker }, props, contextProps)))); },
                                           });
+                                          if (!config.noPreviewTypes) {
+                                              Builder.registerEditor({
+                                                  name: "" + config.name + capitalize_1(resourceName) + "Preview",
+                                                  component: function (props) { return (React.createElement(ErrorBoundary, null,
+                                                      React.createElement(ResourcesPickerButton, __assign({ resourcePicker: resourcePicker }, props, contextProps, { previewType: "" + config.name + capitalize_1(resourceName) + "Preview", isPreview: true })))); },
+                                              });
+                                          }
                                           if (apiOperations[resourceName].findByHandle) {
                                               Builder.registerEditor({
                                                   name: "" + config.name + capitalize_1(resourceName) + "Handle",
                                                   component: function (props) { return (React.createElement(ErrorBoundary, null,
-                                                      React.createElement(ResourcesPickerButton, __assign({}, props, contextProps, { handleOnly: true })))); },
+                                                      React.createElement(ResourcesPickerButton, __assign({ resourcePicker: resourcePicker }, props, contextProps, { handleOnly: true })))); },
                                               });
                                           }
                                           Builder.registerEditor({
                                               name: "" + config.name + capitalize_1(pluralize.plural(resourceName)) + "List",
+                                              enum: true,
                                               component: function (props) { return (React.createElement(ErrorBoundary, null,
-                                                  React.createElement(PickResourcesListButton, __assign({}, props, contextProps)))); },
+                                                  React.createElement(PickResourcesListButton, __assign({ resourcePicker: resourcePicker }, props, contextProps)))); },
                                           });
                                       });
                                       return [2 /*return*/];
@@ -33174,7 +33563,7 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       }); };
 
       var name = "@builder.io/plugin-sfcc-commerce-api";
-      var version = "0.0.3";
+      var version = "0.0.4";
       var description = "";
       var keywords = [
       ];
@@ -33290,7 +33679,7 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       	typescript: "^3.0.3"
       };
       var dependencies = {
-      	"@builder.io/commerce-plugin-tools": "^0.2.1-4",
+      	"@builder.io/commerce-plugin-tools": "^0.3.1-1",
       	"commerce-sdk-isomorphic": "^1.7.0"
       };
       var pkg = {
@@ -33319,6 +33708,32 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
       	dependencies: dependencies
       };
 
+      const basicCache = new Map();
+      const transformProduct = (resource) => ({
+        ...resource,
+        id: resource.id,
+        title: resource.name || "untitled",
+        handle: resource.id,
+        image: {
+          src: resource.imageGroups?.[0].images?.[0].link || "https://unpkg.com/css.gg@2.0.0/icons/svg/toolbox.svg"
+        }
+      });
+      const transformHit = (hit) => ({
+        id: hit.productId,
+        title: hit.productName || "untitled",
+        handle: hit.productId,
+        image: {
+          src: hit.image?.link || "https://unpkg.com/css.gg@2.0.0/icons/svg/toolbox.svg"
+        }
+      });
+      const transformCategory = (cat) => ({
+        id: cat.id,
+        title: cat.name,
+        handle: cat.id,
+        image: {
+          src: cat.image || "https://unpkg.com/css.gg@2.0.0/icons/svg/box.svg"
+        }
+      });
       class Api {
         constructor(apiKey, pluginId) {
           this.apiKey = apiKey;
@@ -33344,16 +33759,38 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
           }).then((res) => res.json());
         }
         getProduct(id) {
-          return this.request(`products/${id}`);
+          if (basicCache.get(id)) {
+            return Promise.resolve(basicCache.get(id));
+          }
+          return this.request(`products/${id}`).then((product) => {
+            const resource = transformProduct(product);
+            basicCache.set(resource.id, resource);
+            return resource;
+          });
         }
-        search(search, refine) {
-          return this.request("products-search", { method: "GET" }, { q: search });
+        search(search) {
+          return this.request("products-search", { method: "GET" }, { q: search }).then((search2) => {
+            const resources = search2.hits?.map(transformHit) || [];
+            resources.forEach((r) => basicCache.set(r.id, r));
+            return resources;
+          });
         }
         getCategory(id) {
-          return this.request(`categories/${id}`);
+          if (basicCache.get(id)) {
+            return Promise.resolve(basicCache.get(id));
+          }
+          return this.request(`categories/${id}`).then((cat) => {
+            const resource = transformProduct(cat);
+            basicCache.set(resource.id, resource);
+            return resource;
+          });
         }
         searchCategories(search) {
-          return this.request("categories-search", { method: "GET" }, { q: search });
+          return this.request("categories-search", { method: "GET" }, { q: search }).then((categories) => {
+            const resources = categories?.map(transformCategory) || [];
+            resources.forEach((r) => basicCache.set(r.id, r));
+            return resources;
+          });
         }
       }
 
@@ -33390,39 +33827,13 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
         ctaText: `Connect your Salesforce Commerce API`
       }, async () => {
         const api = new Api(appState.user.apiKey, pkg.name);
-        const transform = (resource) => ({
-          ...resource,
-          id: resource.id,
-          title: resource.name || "untitled",
-          handle: resource.id,
-          image: {
-            src: resource.imageGroups?.[0].images?.[0].link || "https://cdn.builder.io/api/v1/image/assets%2F979b06c19c1f41b0825d33993be6cdd4%2F478d9c03b7c24eaabbdb6346e67d5ed2"
-          }
-        });
-        const transformCat = (cat) => ({
-          id: cat.id,
-          title: cat.name,
-          handle: cat.id,
-          image: {
-            src: cat.image || "https://unpkg.com/css.gg@2.0.0/icons/svg/box.svg"
-          }
-        });
-        const service = {
+        return {
           product: {
             async findById(id) {
-              const product = await api.getProduct(id);
-              return transform(product);
+              return await api.getProduct(id);
             },
             async search(search) {
-              const searchResult = await api.search(search || "womens");
-              return searchResult.hits?.map((hit) => ({
-                id: hit.productId,
-                title: hit.productName || "untitled",
-                handle: hit.productId,
-                image: {
-                  src: hit.image?.link || "https://unpkg.com/css.gg@2.0.0/icons/svg/toolbox.svg"
-                }
-              })) || [];
+              return await api.search(search || "womens");
             },
             getRequestObject(id) {
               return {
@@ -33438,12 +33849,10 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
           },
           category: {
             async findById(id) {
-              const cat = await api.getCategory(id);
-              return transformCat(cat);
+              return await api.getCategory(id);
             },
             async search(search) {
-              const categories = await api.searchCategories(search || "");
-              return categories.map(transformCat);
+              return await api.searchCategories(search || "");
             },
             getRequestObject(id) {
               return {
@@ -33458,7 +33867,6 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
             }
           }
         };
-        return service;
       });
 
     }