@builder.io/plugin-sfcc-commerce-api 0.0.3 → 0.0.6

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,6 +30331,582 @@ 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;
+
+      /** Detect free variable `global` from Node.js. */
+      var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+      var _freeGlobal = freeGlobal;
+
+      /** Detect free variable `self`. */
+      var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+      /** Used as a reference to the global object. */
+      var root = _freeGlobal || freeSelf || Function('return this')();
+
+      var _root = root;
+
+      /**
+       * 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 now_1 = now;
+
+      /** Used to match a single whitespace character. */
+      var reWhitespace = /\s/;
+
+      /**
+       * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+       * character of `string`.
+       *
+       * @private
+       * @param {string} string The string to inspect.
+       * @returns {number} Returns the index of the last non-whitespace character.
+       */
+      function trimmedEndIndex(string) {
+        var index = string.length;
+
+        while (index-- && reWhitespace.test(string.charAt(index))) {}
+        return index;
+      }
+
+      var _trimmedEndIndex = trimmedEndIndex;
+
+      /** Used to match leading whitespace. */
+      var reTrimStart = /^\s+/;
+
+      /**
+       * The base implementation of `_.trim`.
+       *
+       * @private
+       * @param {string} string The string to trim.
+       * @returns {string} Returns the trimmed string.
+       */
+      function baseTrim(string) {
+        return string
+          ? string.slice(0, _trimmedEndIndex(string) + 1).replace(reTrimStart, '')
+          : string;
+      }
+
+      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;
+
+      /** Used to check objects for own properties. */
+      var hasOwnProperty$9 = objectProto$b.hasOwnProperty;
+
+      /**
+       * Used to resolve the
+       * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+       * of values.
+       */
+      var nativeObjectToString$1 = objectProto$b.toString;
+
+      /** Built-in value references. */
+      var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
+
+      /**
+       * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+       *
+       * @private
+       * @param {*} value The value to query.
+       * @returns {string} Returns the raw `toStringTag`.
+       */
+      function getRawTag(value) {
+        var isOwn = hasOwnProperty$9.call(value, symToStringTag$1),
+            tag = value[symToStringTag$1];
+
+        try {
+          value[symToStringTag$1] = undefined;
+          var unmasked = true;
+        } catch (e) {}
+
+        var result = nativeObjectToString$1.call(value);
+        if (unmasked) {
+          if (isOwn) {
+            value[symToStringTag$1] = tag;
+          } else {
+            delete value[symToStringTag$1];
+          }
+        }
+        return result;
+      }
+
+      var _getRawTag = getRawTag;
+
+      /** Used for built-in method references. */
+      var objectProto$a = Object.prototype;
+
+      /**
+       * Used to resolve the
+       * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+       * of values.
+       */
+      var nativeObjectToString = objectProto$a.toString;
+
+      /**
+       * Converts `value` to a string using `Object.prototype.toString`.
+       *
+       * @private
+       * @param {*} value The value to convert.
+       * @returns {string} Returns the converted string.
+       */
+      function objectToString(value) {
+        return nativeObjectToString.call(value);
+      }
+
+      var _objectToString = objectToString;
+
+      /** `Object#toString` result references. */
+      var nullTag = '[object Null]',
+          undefinedTag = '[object Undefined]';
+
+      /** Built-in value references. */
+      var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
+
+      /**
+       * The base implementation of `getTag` without fallbacks for buggy environments.
+       *
+       * @private
+       * @param {*} value The value to query.
+       * @returns {string} Returns the `toStringTag`.
+       */
+      function baseGetTag(value) {
+        if (value == null) {
+          return value === undefined ? undefinedTag : nullTag;
+        }
+        return (symToStringTag && symToStringTag in Object(value))
+          ? _getRawTag(value)
+          : _objectToString(value);
+      }
+
+      var _baseGetTag = baseGetTag;
+
+      /**
+       * Checks if `value` is object-like. A value is object-like if it's not `null`
+       * and has a `typeof` result of "object".
+       *
+       * @static
+       * @memberOf _
+       * @since 4.0.0
+       * @category Lang
+       * @param {*} value The value to check.
+       * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+       * @example
+       *
+       * _.isObjectLike({});
+       * // => true
+       *
+       * _.isObjectLike([1, 2, 3]);
+       * // => true
+       *
+       * _.isObjectLike(_.noop);
+       * // => false
+       *
+       * _.isObjectLike(null);
+       * // => false
+       */
+      function isObjectLike(value) {
+        return value != null && typeof value == 'object';
+      }
+
+      var isObjectLike_1 = isObjectLike;
+
+      /** `Object#toString` result references. */
+      var symbolTag = '[object Symbol]';
+
+      /**
+       * Checks if `value` is classified as a `Symbol` primitive or object.
+       *
+       * @static
+       * @memberOf _
+       * @since 4.0.0
+       * @category Lang
+       * @param {*} value The value to check.
+       * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+       * @example
+       *
+       * _.isSymbol(Symbol.iterator);
+       * // => true
+       *
+       * _.isSymbol('abc');
+       * // => false
+       */
+      function isSymbol(value) {
+        return typeof value == 'symbol' ||
+          (isObjectLike_1(value) && _baseGetTag(value) == symbolTag);
+      }
+
+      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,
@@ -30347,34 +30923,31 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
               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*/];
-                          }
-                      });
+              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();
@@ -30465,38 +31038,41 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
                   },
                   showPickResouceModal: function (title) {
                       return __awaiter(this, void 0, void 0, function () {
-                          var close;
+                          var resourcePicker, rest, PickerCompnent, 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);
+                                  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 {
-                                                          props.onChange(props.api[props.resourceName].getRequestObject(_this.resourceId, value));
+                                                          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',
+                                                  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*/];
@@ -30551,24 +31127,6 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
           });
       };
 
-      /** Detect free variable `global` from Node.js. */
-      var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
-
-      var _freeGlobal = freeGlobal;
-
-      /** Detect free variable `self`. */
-      var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-      /** Used as a reference to the global object. */
-      var root = _freeGlobal || freeSelf || Function('return this')();
-
-      var _root = root;
-
-      /** Built-in value references. */
-      var Symbol$1 = _root.Symbol;
-
-      var _Symbol = Symbol$1;
-
       /**
        * A specialized version of `_.map` for arrays without support for iteratee
        * shorthands.
@@ -30618,156 +31176,6 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
 
       var isArray_1 = isArray;
 
-      /** Used for built-in method references. */
-      var objectProto$b = Object.prototype;
-
-      /** Used to check objects for own properties. */
-      var hasOwnProperty$9 = objectProto$b.hasOwnProperty;
-
-      /**
-       * Used to resolve the
-       * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-       * of values.
-       */
-      var nativeObjectToString$1 = objectProto$b.toString;
-
-      /** Built-in value references. */
-      var symToStringTag$1 = _Symbol ? _Symbol.toStringTag : undefined;
-
-      /**
-       * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
-       *
-       * @private
-       * @param {*} value The value to query.
-       * @returns {string} Returns the raw `toStringTag`.
-       */
-      function getRawTag(value) {
-        var isOwn = hasOwnProperty$9.call(value, symToStringTag$1),
-            tag = value[symToStringTag$1];
-
-        try {
-          value[symToStringTag$1] = undefined;
-          var unmasked = true;
-        } catch (e) {}
-
-        var result = nativeObjectToString$1.call(value);
-        if (unmasked) {
-          if (isOwn) {
-            value[symToStringTag$1] = tag;
-          } else {
-            delete value[symToStringTag$1];
-          }
-        }
-        return result;
-      }
-
-      var _getRawTag = getRawTag;
-
-      /** Used for built-in method references. */
-      var objectProto$a = Object.prototype;
-
-      /**
-       * Used to resolve the
-       * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-       * of values.
-       */
-      var nativeObjectToString = objectProto$a.toString;
-
-      /**
-       * Converts `value` to a string using `Object.prototype.toString`.
-       *
-       * @private
-       * @param {*} value The value to convert.
-       * @returns {string} Returns the converted string.
-       */
-      function objectToString(value) {
-        return nativeObjectToString.call(value);
-      }
-
-      var _objectToString = objectToString;
-
-      /** `Object#toString` result references. */
-      var nullTag = '[object Null]',
-          undefinedTag = '[object Undefined]';
-
-      /** Built-in value references. */
-      var symToStringTag = _Symbol ? _Symbol.toStringTag : undefined;
-
-      /**
-       * The base implementation of `getTag` without fallbacks for buggy environments.
-       *
-       * @private
-       * @param {*} value The value to query.
-       * @returns {string} Returns the `toStringTag`.
-       */
-      function baseGetTag(value) {
-        if (value == null) {
-          return value === undefined ? undefinedTag : nullTag;
-        }
-        return (symToStringTag && symToStringTag in Object(value))
-          ? _getRawTag(value)
-          : _objectToString(value);
-      }
-
-      var _baseGetTag = baseGetTag;
-
-      /**
-       * Checks if `value` is object-like. A value is object-like if it's not `null`
-       * and has a `typeof` result of "object".
-       *
-       * @static
-       * @memberOf _
-       * @since 4.0.0
-       * @category Lang
-       * @param {*} value The value to check.
-       * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
-       * @example
-       *
-       * _.isObjectLike({});
-       * // => true
-       *
-       * _.isObjectLike([1, 2, 3]);
-       * // => true
-       *
-       * _.isObjectLike(_.noop);
-       * // => false
-       *
-       * _.isObjectLike(null);
-       * // => false
-       */
-      function isObjectLike(value) {
-        return value != null && typeof value == 'object';
-      }
-
-      var isObjectLike_1 = isObjectLike;
-
-      /** `Object#toString` result references. */
-      var symbolTag = '[object Symbol]';
-
-      /**
-       * Checks if `value` is classified as a `Symbol` primitive or object.
-       *
-       * @static
-       * @memberOf _
-       * @since 4.0.0
-       * @category Lang
-       * @param {*} value The value to check.
-       * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
-       * @example
-       *
-       * _.isSymbol(Symbol.iterator);
-       * // => true
-       *
-       * _.isSymbol('abc');
-       * // => false
-       */
-      function isSymbol(value) {
-        return typeof value == 'symbol' ||
-          (isObjectLike_1(value) && _baseGetTag(value) == symbolTag);
-      }
-
-      var isSymbol_1 = isSymbol;
-
       /** 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) };
                           }
-                          _b.label = 2;
-                      case 2: return [2 /*return*/];
+                          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;
+                      }
                   }
-              });
-          }); });
-      }; };
+              }, 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.2";
+      var version = "0.0.5";
       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,47 @@ 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"
+        }
+      });
+      const transformRecommender = (rec) => ({
+        ...rec,
+        id: rec.name,
+        title: rec.name,
+        image: {
+          src: "https://cdn.builder.io/api/v1/image/assets%2Fd1ed12c3338144da8dd6b63b35d14c30%2Fe1439f0d991c4e2d968c84a38059f1d2"
+        }
+      });
+      const getRecommenders = (siteId, clientId) => {
+        const url = new URL("https://cdn.builder.io/api/v1/proxy-api");
+        url.searchParams.set("url", `https://api.cquotient.com/v3/personalization/recommenders/${siteId}`);
+        url.searchParams.set("headers.x-cq-client-id", clientId);
+        url.searchParams.set("apiKey", appState.user.apiKey);
+        return fetch(url).then((res) => res.json()).then((res) => res.recommenders.map(transformRecommender));
+      };
       class Api {
         constructor(apiKey, pluginId) {
           this.apiKey = apiKey;
@@ -33330,7 +33760,7 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
             pluginId: this.pluginId,
             apiKey: this.apiKey
           });
-          const root = appState.config.apiRoot();
+          const root = "https://qa.builder.io";
           const baseUrl = new URL(`${root}/api/v1/sfcc-commerce/${path}`);
           baseUrl.search = params.toString();
           return baseUrl.toString();
@@ -33344,22 +33774,45 @@ 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;
+          });
         }
       }
 
       registerCommercePlugin({
         name: "SFCommerce",
         id: pkg.name,
+        noPreviewTypes: true,
         settings: [
           {
             name: "clientId",
@@ -33385,44 +33838,47 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
             name: "siteId",
             type: "string",
             required: true
+          },
+          {
+            name: "einsteinId",
+            friendlyName: "Einstein API Client ID",
+            type: "string"
+          },
+          {
+            name: "einsteinSiteId",
+            friendlyName: "Einstein API Site ID",
+            type: "string"
           }
         ],
         ctaText: `Connect your Salesforce Commerce API`
-      }, async () => {
+      }, async (settings) => {
         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 = {
+        const einsteinId = settings.get("einsteinId");
+        const einsteinSiteId = settings.get("einsteinSiteId");
+        let recommendersType = {};
+        if (einsteinId && einsteinSiteId) {
+          const recommenders = await getRecommenders(einsteinSiteId, einsteinId);
+          recommendersType = {
+            recommender: {
+              search(search = "") {
+                return Promise.resolve(recommenders.filter((rec) => JSON.stringify(rec).includes(search)));
+              },
+              findById(id) {
+                return Promise.resolve(recommenders.find((rec) => rec.id === id));
+              },
+              getRequestObject(id) {
+                return id;
+              }
+            }
+          };
+        }
+        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 +33894,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 {
@@ -33456,9 +33910,9 @@ System.register(['@builder.io/react', '@emotion/core', '@material-ui/core', 'rea
                 }
               };
             }
-          }
+          },
+          ...recommendersType
         };
-        return service;
       });
 
     }