ordering-components-external 13.2.18 → 13.2.20

package/_modules/components/PaymentOptionStripeLink/index.js

@@ -64,7 +64,7 @@ var PaymentOptionStripeLink = exports.PaymentOptionStripeLink = function Payment
   };
   var handleSendStripeLink = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(type, callback) {
-      var data, response, _yield$response$json, result, error;
+      var customProviders, data, response, _yield$response$json, result, error;
       return _regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -72,14 +72,15 @@ var PaymentOptionStripeLink = exports.PaymentOptionStripeLink = function Payment
             setStripeLinkState(_objectSpread(_objectSpread({}, stripeLinkState), {}, {
               loading: true
             }));
+            customProviders = ['pizzahutstaging', 'pizzahutmexico'];
             data = {
               type: type,
-              provider: (ordering === null || ordering === void 0 ? void 0 : ordering.project) === 'pizzahutmexico' ? 'custom' : 'twilio',
+              provider: customProviders.includes(ordering === null || ordering === void 0 ? void 0 : ordering.project) ? 'custom' : 'twilio',
               country_phone_code: userInfo.country_phone_code,
               cellphone: userInfo.cellphone,
               message: t('LINK_TO_PAY_MESSAGE', 'Hello there _name_ _lastname_, click on the following link to complete the payment: _link_').replace('_name_', userInfo === null || userInfo === void 0 ? void 0 : userInfo.name).replace('_lastname_', userInfo === null || userInfo === void 0 ? void 0 : userInfo.lastname).replace('_link_', paymentURL)
             };
-            _context.next = 5;
+            _context.next = 6;
             return fetch("".concat(ordering.root, "/text_messages/send"), {
               method: 'POST',
               headers: {
@@ -89,16 +90,16 @@ var PaymentOptionStripeLink = exports.PaymentOptionStripeLink = function Payment
               },
               body: JSON.stringify(data)
             });
-          case 5:
+          case 6:
             response = _context.sent;
-            _context.next = 8;
+            _context.next = 9;
             return response.json();
-          case 8:
+          case 9:
             _yield$response$json = _context.sent;
             result = _yield$response$json.result;
             error = _yield$response$json.error;
             if (!error) {
-              _context.next = 14;
+              _context.next = 15;
               break;
             }
             setStripeLinkState(_objectSpread(_objectSpread({}, stripeLinkState), {}, {
@@ -106,26 +107,26 @@ var PaymentOptionStripeLink = exports.PaymentOptionStripeLink = function Payment
               error: result
             }));
             return _context.abrupt("return");
-          case 14:
+          case 15:
             setStripeLinkState(_objectSpread(_objectSpread({}, stripeLinkState), {}, {
               loading: false
             }));
             callback && callback();
             showToast(_ToastContext.ToastType.Success, t('MESSAGE_SENT_SUCCESSFULLY', 'The link has been sent'));
-            _context.next = 22;
+            _context.next = 23;
             break;
-          case 19:
-            _context.prev = 19;
+          case 20:
+            _context.prev = 20;
             _context.t0 = _context["catch"](0);
             setStripeLinkState(_objectSpread(_objectSpread({}, stripeLinkState), {}, {
               loading: false,
               error: [_context.t0.message]
             }));
-          case 22:
+          case 23:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 19]]);
+      }, _callee, null, [[0, 20]]);
     }));
     return function handleSendStripeLink(_x, _x2) {
       return _ref.apply(this, arguments);

package/_modules/components/ProductForm/index.js

@@ -770,8 +770,9 @@ var ProductForm = exports.ProductForm = function ProductForm(props) {
     if (!(product !== null && product !== void 0 && product.product)) {
       return errors;
     }
-    (_product$product8 = product.product) === null || _product$product8 === void 0 || (_product$product8 = _product$product8.extras) === null || _product$product8 === void 0 || _product$product8.forEach(function (extra) {
-      extra.options.map(function (option) {
+    product === null || product === void 0 || (_product$product8 = product.product) === null || _product$product8 === void 0 || (_product$product8 = _product$product8.extras) === null || _product$product8 === void 0 || _product$product8.forEach(function (extra) {
+      var _extra$options2;
+      extra === null || extra === void 0 || (_extra$options2 = extra.options) === null || _extra$options2 === void 0 || _extra$options2.map(function (option) {
         var _productCart$options3, _pizzaState, _Object$keys2, _option$suboptions3;
         var suboptions = (_productCart$options3 = productCart.options["id:".concat(option.id)]) === null || _productCart$options3 === void 0 ? void 0 : _productCart$options3.suboptions;
         var quantity = suboptions ? option !== null && option !== void 0 && option.with_half_option ? pizzaState === null || pizzaState === void 0 || (_pizzaState = pizzaState["option:".concat(option === null || option === void 0 ? void 0 : option.id)]) === null || _pizzaState === void 0 ? void 0 : _pizzaState.value : option.limit_suboptions_by_max ? Object.values(suboptions).reduce(function (count, suboption) {
@@ -1144,39 +1145,42 @@ var ProductForm = exports.ProductForm = function ProductForm(props) {
   (0, _react.useEffect)(function () {
     var _product$product11;
     if (!(product !== null && product !== void 0 && product.loading) && product !== null && product !== void 0 && product.product && ((_product$product11 = product.product) === null || _product$product11 === void 0 || (_product$product11 = _product$product11.extras) === null || _product$product11 === void 0 ? void 0 : _product$product11.length) > 0) {
+      var _product$product12, _product$product13;
       var _selectedSuboptions = {};
       var _dependsSuboptions = {};
       var preselectedOptions = [];
       var preselectedSuboptions = [];
-      var _iterator9 = _createForOfIteratorHelper(product.product.extras),
+      var _iterator9 = _createForOfIteratorHelper(product === null || product === void 0 || (_product$product12 = product.product) === null || _product$product12 === void 0 ? void 0 : _product$product12.extras),
         _step9;
       try {
         for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
           var extra = _step9.value;
-          var _iterator11 = _createForOfIteratorHelper(extra.options),
-            _step11;
-          try {
-            for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
-              var option = _step11.value;
-              var _iterator12 = _createForOfIteratorHelper(option.suboptions),
-                _step12;
-              try {
-                for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
-                  var _option$suboptions6, _props$productCart12;
-                  var suboption = _step12.value;
-                  _selectedSuboptions["suboption:".concat(suboption.id)] = (suboption.preselected || (option === null || option === void 0 ? void 0 : option.max) === 1 && (option === null || option === void 0 ? void 0 : option.min) === 1 && (option === null || option === void 0 || (_option$suboptions6 = option.suboptions) === null || _option$suboptions6 === void 0 ? void 0 : _option$suboptions6.length) === 1) && (!editMode || !!((_props$productCart12 = props.productCart) !== null && _props$productCart12 !== void 0 && (_props$productCart12 = _props$productCart12.options["id:".concat(option === null || option === void 0 ? void 0 : option.id)]) !== null && _props$productCart12 !== void 0 && _props$productCart12.suboptions["id:".concat(suboption === null || suboption === void 0 ? void 0 : suboption.id)]));
-                  _dependsSuboptions["suboption:".concat(suboption.id)] = option !== null && option !== void 0 && option.conditioned && (option === null || option === void 0 ? void 0 : option.respect_to) !== null ? option === null || option === void 0 ? void 0 : option.respect_to : null;
+          if (extra !== null && extra !== void 0 && extra.options) {
+            var _iterator11 = _createForOfIteratorHelper(extra === null || extra === void 0 ? void 0 : extra.options),
+              _step11;
+            try {
+              for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
+                var option = _step11.value;
+                var _iterator12 = _createForOfIteratorHelper(option === null || option === void 0 ? void 0 : option.suboptions),
+                  _step12;
+                try {
+                  for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
+                    var _option$suboptions6, _props$productCart12;
+                    var suboption = _step12.value;
+                    _selectedSuboptions["suboption:".concat(suboption.id)] = (suboption.preselected || (option === null || option === void 0 ? void 0 : option.max) === 1 && (option === null || option === void 0 ? void 0 : option.min) === 1 && (option === null || option === void 0 || (_option$suboptions6 = option.suboptions) === null || _option$suboptions6 === void 0 ? void 0 : _option$suboptions6.length) === 1) && (!editMode || !!((_props$productCart12 = props.productCart) !== null && _props$productCart12 !== void 0 && (_props$productCart12 = _props$productCart12.options["id:".concat(option === null || option === void 0 ? void 0 : option.id)]) !== null && _props$productCart12 !== void 0 && _props$productCart12.suboptions["id:".concat(suboption === null || suboption === void 0 ? void 0 : suboption.id)]));
+                    _dependsSuboptions["suboption:".concat(suboption.id)] = option !== null && option !== void 0 && option.conditioned && (option === null || option === void 0 ? void 0 : option.respect_to) !== null ? option === null || option === void 0 ? void 0 : option.respect_to : null;
+                  }
+                } catch (err) {
+                  _iterator12.e(err);
+                } finally {
+                  _iterator12.f();
                 }
-              } catch (err) {
-                _iterator12.e(err);
-              } finally {
-                _iterator12.f();
               }
+            } catch (err) {
+              _iterator11.e(err);
+            } finally {
+              _iterator11.f();
             }
-          } catch (err) {
-            _iterator11.e(err);
-          } finally {
-            _iterator11.f();
           }
         }
       } catch (err) {
@@ -1193,36 +1197,38 @@ var ProductForm = exports.ProductForm = function ProductForm(props) {
           });
         });
       }
-      var _iterator10 = _createForOfIteratorHelper(product.product.extras),
+      var _iterator10 = _createForOfIteratorHelper(product === null || product === void 0 || (_product$product13 = product.product) === null || _product$product13 === void 0 ? void 0 : _product$product13.extras),
         _step10;
       try {
         for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
           var _extra4 = _step10.value;
-          var _iterator13 = _createForOfIteratorHelper(_extra4.options),
-            _step13;
-          try {
-            for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
-              var _option5 = _step13.value;
-              var _iterator14 = _createForOfIteratorHelper(_option5.suboptions),
-                _step14;
-              try {
-                for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
-                  var _suboption3 = _step14.value;
-                  if (_checkSuboptionsSelected(_suboption3 === null || _suboption3 === void 0 ? void 0 : _suboption3.id, _selectedSuboptions, _dependsSuboptions)) {
-                    preselectedOptions.push(_option5);
-                    preselectedSuboptions.push(_suboption3);
+          if (_extra4 !== null && _extra4 !== void 0 && _extra4.options) {
+            var _iterator13 = _createForOfIteratorHelper(_extra4 === null || _extra4 === void 0 ? void 0 : _extra4.options),
+              _step13;
+            try {
+              for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
+                var _option5 = _step13.value;
+                var _iterator14 = _createForOfIteratorHelper(_option5 === null || _option5 === void 0 ? void 0 : _option5.suboptions),
+                  _step14;
+                try {
+                  for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
+                    var _suboption3 = _step14.value;
+                    if (_checkSuboptionsSelected(_suboption3 === null || _suboption3 === void 0 ? void 0 : _suboption3.id, _selectedSuboptions, _dependsSuboptions)) {
+                      preselectedOptions.push(_option5);
+                      preselectedSuboptions.push(_suboption3);
+                    }
                   }
+                } catch (err) {
+                  _iterator14.e(err);
+                } finally {
+                  _iterator14.f();
                 }
-              } catch (err) {
-                _iterator14.e(err);
-              } finally {
-                _iterator14.f();
               }
+            } catch (err) {
+              _iterator13.e(err);
+            } finally {
+              _iterator13.f();
             }
-          } catch (err) {
-            _iterator13.e(err);
-          } finally {
-            _iterator13.f();
           }
         }
       } catch (err) {
@@ -1298,9 +1304,10 @@ var ProductForm = exports.ProductForm = function ProductForm(props) {
   if (isStarbucks) {
     (0, _react.useEffect)(function () {
       if (product !== null && product !== void 0 && product.product && Object.keys(product === null || product === void 0 ? void 0 : product.product).length) {
-        var _ref7, _ref8;
-        var options = (_ref7 = []).concat.apply(_ref7, _toConsumableArray(product.product.extras.map(function (extra) {
-          return extra.options.filter(function (option) {
+        var _ref7, _product$product14, _ref8;
+        var options = (_ref7 = []).concat.apply(_ref7, _toConsumableArray((_product$product14 = product.product) === null || _product$product14 === void 0 || (_product$product14 = _product$product14.extras) === null || _product$product14 === void 0 ? void 0 : _product$product14.map(function (extra) {
+          var _extra$options3;
+          return extra === null || extra === void 0 || (_extra$options3 = extra.options) === null || _extra$options3 === void 0 ? void 0 : _extra$options3.filter(function (option) {
             return option.name === 'Tamaño' && option.suboptions.filter(function (suboption) {
               return suboption.name === 'Grande (16oz - 437ml)';
             }).length === 1;

package/_modules/components/UpsellingPage/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ApiContext = require("../../contexts/ApiContext");
 var _OrderContext = require("../../contexts/OrderContext");
+var _SessionContext = require("../../contexts/SessionContext");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -30,6 +31,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var UpsellingPage = exports.UpsellingPage = function UpsellingPage(props) {
   var _Object$values$find$b, _Object$values$find;
   var UIComponent = props.UIComponent,
+    useSuggestiveUpselling = props.useSuggestiveUpselling,
     products = props.products,
     cartProducts = props.cartProducts,
     onSave = props.onSave;
@@ -51,6 +53,10 @@ var UpsellingPage = exports.UpsellingPage = function UpsellingPage(props) {
   var _useOrder = (0, _OrderContext.useOrder)(),
     _useOrder2 = _slicedToArray(_useOrder, 1),
     orderState = _useOrder2[0];
+  var _useSession = (0, _SessionContext.useSession)(),
+    _useSession2 = _slicedToArray(_useSession, 1),
+    token = _useSession2[0].token;
+  var currentCart = orderState.carts["businessId:".concat(props.businessId)];
   var businessId = props.uuid ? (_Object$values$find$b = (_Object$values$find = Object.values(orderState.carts).find(function (_cart) {
     return (_cart === null || _cart === void 0 ? void 0 : _cart.uuid) === props.uuid;
   })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.business_id) !== null && _Object$values$find$b !== void 0 ? _Object$values$find$b : {} : props.businessId;
@@ -59,7 +65,13 @@ var UpsellingPage = exports.UpsellingPage = function UpsellingPage(props) {
       if (products !== null && products !== void 0 && products.length && !props.uuid) {
         getUpsellingProducts(products);
       } else {
-        getProducts();
+        if (useSuggestiveUpselling) {
+          setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
+            loading: false
+          }));
+        } else {
+          getProducts();
+        }
       }
     } else {
       setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
@@ -69,10 +81,15 @@ var UpsellingPage = exports.UpsellingPage = function UpsellingPage(props) {
     }
   }, [businessId]);
   (0, _react.useEffect)(function () {
-    if (!upsellingProducts.loading) {
+    if (useSuggestiveUpselling) return;
+    if (!upsellingProducts.loading && !orderState.loading) {
       getUpsellingProducts(businessProducts);
     }
-  }, [orderState.loading]);
+  }, [orderState.loading, upsellingProducts.loading]);
+  (0, _react.useEffect)(function () {
+    if (!(cartProducts !== null && cartProducts !== void 0 && cartProducts.length) || !useSuggestiveUpselling || upsellingProducts.loading || orderState.loading) return;
+    getSuggestiveProducts();
+  }, [cartProducts === null || cartProducts === void 0 ? void 0 : cartProducts.length, orderState.loading, upsellingProducts.loading]);
 
   /**
    * getting products if array of product is not defined
@@ -113,35 +130,82 @@ var UpsellingPage = exports.UpsellingPage = function UpsellingPage(props) {
       return _ref.apply(this, arguments);
     };
   }();
+
+  /**
+   * getting suggestive products if useSuggestiveUpselling is true
+   */
+  var getSuggestiveProducts = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _yield$ordering$setAc, _yield$ordering$setAc2, error, result;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (currentCart !== null && currentCart !== void 0 && currentCart.uuid) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            _context2.prev = 2;
+            _context2.next = 5;
+            return ordering.setAccessToken(token).carts(currentCart === null || currentCart === void 0 ? void 0 : currentCart.uuid).getUpselling();
+          case 5:
+            _yield$ordering$setAc = _context2.sent;
+            _yield$ordering$setAc2 = _yield$ordering$setAc.content;
+            error = _yield$ordering$setAc2.error;
+            result = _yield$ordering$setAc2.result;
+            if (!error) {
+              setBusinessProducts(result);
+              getUpsellingProducts(result, true);
+            } else {
+              setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
+                loading: false,
+                error: error
+              }));
+            }
+            _context2.next = 15;
+            break;
+          case 12:
+            _context2.prev = 12;
+            _context2.t0 = _context2["catch"](2);
+            setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
+              loading: false,
+              error: _context2.t0
+            }));
+          case 15:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[2, 12]]);
+    }));
+    return function getSuggestiveProducts() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
   /**
    *
    * filt products if they are already in the cart
    * @param {array} cartProducts
    */
   var getUpsellingProducts = function getUpsellingProducts(result) {
+    var allowAll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var upsellingProductsfiltered = result.filter(function (product) {
-      return product.upselling;
+      return product.upselling || allowAll;
     });
-    var repeatProducts = cartProducts && (cartProducts === null || cartProducts === void 0 ? void 0 : cartProducts.filter(function (cartProduct) {
+    var repeatProducts = cartProducts !== null && cartProducts !== void 0 && cartProducts.length ? cartProducts === null || cartProducts === void 0 ? void 0 : cartProducts.filter(function (cartProduct) {
       return upsellingProductsfiltered.find(function (product) {
         return product.id === cartProduct.id;
       });
+    }) : [];
+    setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
+      loading: false,
+      products: repeatProducts !== null && repeatProducts !== void 0 && repeatProducts.length ? upsellingProductsfiltered === null || upsellingProductsfiltered === void 0 ? void 0 : upsellingProductsfiltered.filter(function (product) {
+        return !product.inventoried && !repeatProducts.find(function (repeatProduct) {
+          return repeatProduct.id === product.id;
+        });
+      }) : upsellingProductsfiltered
     }));
-    if (repeatProducts.length) {
-      setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
-        loading: false,
-        products: upsellingProductsfiltered.filter(function (product) {
-          return !product.inventoried && !repeatProducts.find(function (repeatProduct) {
-            return repeatProduct.id === product.id;
-          });
-        })
-      }));
-    } else {
-      setUpsellingProducts(_objectSpread(_objectSpread({}, upsellingProducts), {}, {
-        loading: false,
-        products: upsellingProductsfiltered
-      }));
-    }
   };
 
   /**
@@ -153,7 +217,8 @@ var UpsellingPage = exports.UpsellingPage = function UpsellingPage(props) {
   };
   return /*#__PURE__*/_react.default.createElement(UIComponent, _extends({}, props, {
     upsellingProducts: upsellingProducts,
-    handleFormProduct: handleFormProduct
+    handleFormProduct: handleFormProduct,
+    businessId: businessId
   }));
 };
 UpsellingPage.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-components-external",
-  "version": "13.2.18",
+  "version": "13.2.20",
   "description": "Ordering Internal Dashboard",
   "main": "./_modules/index.js",
   "scripts": {

package/src/components/PaymentOptionStripeLink/index.js

@@ -29,9 +29,10 @@ export const PaymentOptionStripeLink = (props) => {
   const handleSendStripeLink = async (type, callback) => {
     try {
       setStripeLinkState({ ...stripeLinkState, loading: true })
+      const customProviders = ['pizzahutstaging', 'pizzahutmexico']
       const data = {
         type,
-        provider: ordering?.project === 'pizzahutmexico' ? 'custom' : 'twilio',
+        provider: customProviders.includes(ordering?.project) ? 'custom' : 'twilio',
         country_phone_code: userInfo.country_phone_code,
         cellphone: userInfo.cellphone,
         message: t('LINK_TO_PAY_MESSAGE',

package/src/components/ProductForm/index.js

@@ -533,8 +533,8 @@ export const ProductForm = (props) => {
     if (!product?.product) {
       return errors
     }
-    product.product?.extras?.forEach(extra => {
-      extra.options.map(option => {
+    product?.product?.extras?.forEach(extra => {
+      extra?.options?.map(option => {
         const suboptions = productCart.options[`id:${option.id}`]?.suboptions
         const quantity = suboptions
           ? option?.with_half_option
@@ -844,14 +844,16 @@ export const ProductForm = (props) => {
       const _dependsSuboptions = {}
       const preselectedOptions = []
       const preselectedSuboptions = []
-      for (const extra of product.product.extras) {
-        for (const option of extra.options) {
-          for (const suboption of option.suboptions) {
-            _selectedSuboptions[`suboption:${suboption.id}`] =
-              (suboption.preselected ||
-                (option?.max === 1 && option?.min === 1 && option?.suboptions?.length === 1)) &&
-              (!editMode || !!props.productCart?.options[`id:${option?.id}`]?.suboptions[`id:${suboption?.id}`])
-            _dependsSuboptions[`suboption:${suboption.id}`] = option?.conditioned && option?.respect_to !== null ? option?.respect_to : null
+      for (const extra of product?.product?.extras) {
+        if (extra?.options) {
+          for (const option of extra?.options) {
+            for (const suboption of option?.suboptions) {
+              _selectedSuboptions[`suboption:${suboption.id}`] =
+                (suboption.preselected ||
+                  (option?.max === 1 && option?.min === 1 && option?.suboptions?.length === 1)) &&
+                (!editMode || !!props.productCart?.options[`id:${option?.id}`]?.suboptions[`id:${suboption?.id}`])
+              _dependsSuboptions[`suboption:${suboption.id}`] = option?.conditioned && option?.respect_to !== null ? option?.respect_to : null
+            }
           }
         }
       }
@@ -862,12 +864,14 @@ export const ProductForm = (props) => {
         }))
       }
 
-      for (const extra of product.product.extras) {
-        for (const option of extra.options) {
-          for (const suboption of option.suboptions) {
-            if (checkSuboptionsSelected(suboption?.id, _selectedSuboptions, _dependsSuboptions)) {
-              preselectedOptions.push(option)
-              preselectedSuboptions.push(suboption)
+      for (const extra of product?.product?.extras) {
+        if (extra?.options) {
+          for (const option of extra?.options) {
+            for (const suboption of option?.suboptions) {
+              if (checkSuboptionsSelected(suboption?.id, _selectedSuboptions, _dependsSuboptions)) {
+                preselectedOptions.push(option)
+                preselectedSuboptions.push(suboption)
+              }
             }
           }
         }
@@ -948,7 +952,7 @@ export const ProductForm = (props) => {
   if (isStarbucks) {
     useEffect(() => {
       if (product?.product && Object.keys(product?.product).length) {
-        const options = [].concat(...product.product.extras.map(extra => extra.options.filter(
+        const options = [].concat(...product.product?.extras?.map(extra => extra?.options?.filter(
           option => (
             option.name === 'Tamaño' &&
             option.suboptions.filter(suboption => suboption.name === 'Grande (16oz - 437ml)').length === 1

package/src/components/UpsellingPage/index.js

@@ -3,14 +3,16 @@ import PropTypes from 'prop-types'
 
 import { useApi } from '../../contexts/ApiContext'
 import { useOrder } from '../../contexts/OrderContext'
+import { useSession } from '../../contexts/SessionContext'
 
 export const UpsellingPage = (props) => {
-  const { UIComponent, products, cartProducts, onSave } = props
-
+  const { UIComponent, useSuggestiveUpselling, products, cartProducts, onSave } = props
   const [upsellingProducts, setUpsellingProducts] = useState({ products: [], loading: true, error: false })
   const [businessProducts, setBusinessProducts] = useState([])
   const [ordering] = useApi()
   const [orderState] = useOrder()
+  const [{ token }] = useSession()
+  const currentCart = orderState.carts[`businessId:${props.businessId}`]
 
   const businessId = props.uuid
     ? Object.values(orderState.carts).find(_cart => _cart?.uuid === props.uuid)?.business_id ?? {}
@@ -21,7 +23,14 @@ export const UpsellingPage = (props) => {
       if (products?.length && !props.uuid) {
         getUpsellingProducts(products)
       } else {
-        getProducts()
+        if (useSuggestiveUpselling) {
+          setUpsellingProducts({
+            ...upsellingProducts,
+            loading: false
+          })
+        } else {
+          getProducts()
+        }
       }
     } else {
       setUpsellingProducts({
@@ -33,10 +42,16 @@ export const UpsellingPage = (props) => {
   }, [businessId])
 
   useEffect(() => {
-    if (!upsellingProducts.loading) {
+    if (useSuggestiveUpselling) return
+    if (!upsellingProducts.loading && !orderState.loading) {
       getUpsellingProducts(businessProducts)
     }
-  }, [orderState.loading])
+  }, [orderState.loading, upsellingProducts.loading])
+
+  useEffect(() => {
+    if (!cartProducts?.length || !useSuggestiveUpselling || upsellingProducts.loading || orderState.loading) return
+    getSuggestiveProducts()
+  }, [cartProducts?.length, orderState.loading, upsellingProducts.loading])
 
   /**
    * getting products if array of product is not defined
@@ -58,31 +73,51 @@ export const UpsellingPage = (props) => {
       })
     }
   }
+
   /**
-   *
-   * filt products if they are already in the cart
-   * @param {array} cartProducts
+   * getting suggestive products if useSuggestiveUpselling is true
    */
-  const getUpsellingProducts = (result) => {
-    const upsellingProductsfiltered = result.filter(product => product.upselling)
-
-    const repeatProducts = cartProducts && cartProducts?.filter(cartProduct => upsellingProductsfiltered.find(product => product.id === cartProduct.id))
-
-    if (repeatProducts.length) {
-      setUpsellingProducts({
-        ...upsellingProducts,
-        loading: false,
-        products: upsellingProductsfiltered.filter(product => !product.inventoried && !repeatProducts.find(repeatProduct => repeatProduct.id === product.id))
-      })
-    } else {
+  const getSuggestiveProducts = async () => {
+    if (!currentCart?.uuid) return
+    try {
+      const { content: { error, result } } = await ordering.setAccessToken(token).carts(currentCart?.uuid).getUpselling()
+      if (!error) {
+        setBusinessProducts(result)
+        getUpsellingProducts(result, true)
+      } else {
+        setUpsellingProducts({
+          ...upsellingProducts,
+          loading: false,
+          error
+        })
+      }
+    } catch (error) {
       setUpsellingProducts({
         ...upsellingProducts,
         loading: false,
-        products: upsellingProductsfiltered
+        error
       })
     }
   }
 
+  /**
+   *
+   * filt products if they are already in the cart
+   * @param {array} cartProducts
+   */
+  const getUpsellingProducts = (result, allowAll = false) => {
+    const upsellingProductsfiltered = result.filter(product => product.upselling || allowAll)
+    const repeatProducts = cartProducts?.length ? cartProducts?.filter(cartProduct => upsellingProductsfiltered.find(product => product.id === cartProduct.id)) : []
+
+    setUpsellingProducts({
+      ...upsellingProducts,
+      loading: false,
+      products: repeatProducts?.length
+        ? upsellingProductsfiltered?.filter(product => !product.inventoried && !repeatProducts.find(repeatProduct => repeatProduct.id === product.id))
+        : upsellingProductsfiltered
+    })
+  }
+
   /**
    * Function for confirm that the productForm now can be displayed
    * @param {product} product
@@ -96,6 +131,7 @@ export const UpsellingPage = (props) => {
       {...props}
       upsellingProducts={upsellingProducts}
       handleFormProduct={handleFormProduct}
+      businessId={businessId}
     />
   )
 }