ordering-ui-external 2.6.7 → 2.6.8

package/_modules/themes/five/src/components/OrderDetails/index.js

@@ -57,7 +57,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var OrderDetailsUI = function OrderDetailsUI(props) {
-  var _configs$google_maps_, _configs$powered_by_o, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _theme$confirmation, _theme$confirmation$c, _theme$confirmation$c2, _theme$confirmation$c3, _theme$confirmation$c4, _theme$confirmation2, _theme$confirmation2$, _theme$confirmation2$2, _theme$confirmation2$3, _theme$confirmation2$4, _theme$confirmation3, _theme$confirmation3$, _theme$confirmation3$2, _theme$confirmation3$3, _theme$confirmation3$4, _theme$confirmation4, _theme$confirmation4$, _theme$confirmation4$2, _theme$confirmation4$3, _theme$confirmation4$4, _theme$confirmation5, _theme$confirmation5$, _theme$confirmation5$2, _theme$confirmation5$3, _theme$confirmation5$4, _theme$confirmation6, _theme$confirmation6$, _theme$confirmation6$2, _theme$confirmation6$3, _theme$confirmation6$4, _theme$confirmation7, _theme$confirmation7$, _theme$confirmation7$2, _theme$confirmation7$3, _theme$confirmation7$4, _theme$confirmation8, _theme$confirmation8$, _theme$confirmation8$2, _theme$confirmation8$3, _theme$confirmation8$4, _theme$confirmation9, _theme$confirmation9$, _theme$confirmation9$2, _theme$confirmation9$3, _theme$confirmation9$4, _theme$confirmation10, _theme$confirmation11, _theme$confirmation12, _theme$confirmation13, _theme$confirmation14, _theme$confirmation15, _theme$confirmation16, _theme$confirmation17, _theme$confirmation18, _theme$confirmation19, _theme$confirmation20, _theme$confirmation21, _theme$confirmation22, _theme$confirmation23, _theme$confirmation24, _theme$confirmation25, _theme$confirmation26, _theme$confirmation27, _theme$confirmation28, _theme$confirmation29, _theme$confirmation30, _theme$confirmation31, _theme$confirmation32, _theme$confirmation33, _theme$confirmation34, _theme$confirmation35, _theme$confirmation36, _theme$confirmation37, _theme$confirmation38, _theme$confirmation39, _theme$confirmation40, _theme$confirmation41, _theme$confirmation42, _theme$confirmation43, _theme$confirmation44, _theme$confirmation45, _theme$confirmation46, _theme$confirmation47, _theme$confirmation48, _theme$confirmation49, _order$driver, _order$driver2, _theme$images, _theme$images$dummies, _order$business2, _order$business3, _theme$images2, _theme$images2$dummie, _order$customer, _order$customer2, _theme$images3, _theme$images3$dummie, _order$driver3, _order$driver3$locati, _order$driver4, _order$driver4$locati, _order$driver4$locati2, _theme$defaultLanguag, _configs$guest_uuid_a, _order$business4, _order$business5, _orderTypes$find, _order$reporting_data, _getOrderStatus, _getOrderStatus2, _theme$defaultLanguag2, _order$business6, _order$business7, _order$business8, _order$business9, _order$business10, _order$place, _order$place2, _getOrderStatus3, _getOrderStatus4, _order$business12, _order$customer3, _order$customer4, _order$customer5, _order$customer6, _order$customer7, _order$customer8, _order$customer9, _order$customer10, _theme$defaultLanguag3, _order$driver5, _order$driver6, _order$driver7, _order$driver8, _order$driver9, _order$driver10, _order$driver11, _order$driver12, _order$driver13, _order$driver13$locat, _order$driver14, _configs$google_maps_2, _order$products$, _order$products$$gift, _order$products$2, _order$products$2$gif, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6, _openTaxModal$data, _openTaxModal$data2, _openTaxModal$data3, _openTaxModal$data4, _openTaxModal$data$fi, _openTaxModal$data5, _openTaxModal$data6;
+  var _configs$google_maps_, _configs$powered_by_o, _orderingTheme$theme, _orderingTheme$theme$, _orderingTheme$theme$2, _orderingTheme$theme$3, _theme$confirmation, _theme$confirmation$c, _theme$confirmation$c2, _theme$confirmation$c3, _theme$confirmation$c4, _theme$confirmation2, _theme$confirmation2$, _theme$confirmation2$2, _theme$confirmation2$3, _theme$confirmation2$4, _theme$confirmation3, _theme$confirmation3$, _theme$confirmation3$2, _theme$confirmation3$3, _theme$confirmation3$4, _theme$confirmation4, _theme$confirmation4$, _theme$confirmation4$2, _theme$confirmation4$3, _theme$confirmation4$4, _theme$confirmation5, _theme$confirmation5$, _theme$confirmation5$2, _theme$confirmation5$3, _theme$confirmation5$4, _theme$confirmation6, _theme$confirmation6$, _theme$confirmation6$2, _theme$confirmation6$3, _theme$confirmation6$4, _theme$confirmation7, _theme$confirmation7$, _theme$confirmation7$2, _theme$confirmation7$3, _theme$confirmation7$4, _theme$confirmation8, _theme$confirmation8$, _theme$confirmation8$2, _theme$confirmation8$3, _theme$confirmation8$4, _theme$confirmation9, _theme$confirmation9$, _theme$confirmation9$2, _theme$confirmation9$3, _theme$confirmation9$4, _theme$confirmation10, _theme$confirmation11, _theme$confirmation12, _theme$confirmation13, _theme$confirmation14, _theme$confirmation15, _theme$confirmation16, _theme$confirmation17, _theme$confirmation18, _theme$confirmation19, _theme$confirmation20, _theme$confirmation21, _theme$confirmation22, _theme$confirmation23, _theme$confirmation24, _theme$confirmation25, _theme$confirmation26, _theme$confirmation27, _theme$confirmation28, _theme$confirmation29, _theme$confirmation30, _theme$confirmation31, _theme$confirmation32, _theme$confirmation33, _theme$confirmation34, _theme$confirmation35, _theme$confirmation36, _theme$confirmation37, _theme$confirmation38, _theme$confirmation39, _theme$confirmation40, _theme$confirmation41, _theme$confirmation42, _theme$confirmation43, _theme$confirmation44, _theme$confirmation45, _theme$confirmation46, _theme$confirmation47, _theme$confirmation48, _theme$confirmation49, _order$driver, _order$driver2, _theme$images, _theme$images$dummies, _order$business2, _order$business3, _theme$images2, _theme$images2$dummie, _order$customer, _order$customer2, _theme$images3, _theme$images3$dummie, _order$driver3, _order$driver3$locati, _order$driver4, _order$driver4$locati, _order$driver4$locati2, _theme$defaultLanguag, _configs$guest_uuid_a, _order$business4, _order$business5, _orderTypes$find, _order$reporting_data, _configs$general_hour, _getOrderStatus, _getOrderStatus2, _theme$defaultLanguag2, _order$business6, _order$business7, _order$business8, _order$business9, _order$business10, _order$place, _order$place2, _getOrderStatus3, _getOrderStatus4, _order$business12, _order$customer3, _order$customer4, _order$customer5, _order$customer6, _order$customer7, _order$customer8, _order$customer9, _order$customer10, _theme$defaultLanguag3, _order$driver5, _order$driver6, _order$driver7, _order$driver8, _order$driver9, _order$driver10, _order$driver11, _order$driver12, _order$driver13, _order$driver13$locat, _order$driver14, _configs$google_maps_2, _order$products$, _order$products$$gift, _order$products$2, _order$products$2$gif, _theme$defaultLanguag4, _theme$defaultLanguag5, _theme$defaultLanguag6, _openTaxModal$data, _openTaxModal$data2, _openTaxModal$data3, _openTaxModal$data4, _openTaxModal$data$fi, _openTaxModal$data5, _openTaxModal$data6;
   var userCustomerId = props.userCustomerId,
     handleChangeOrderStatus = props.handleChangeOrderStatus,
     handleBusinessRedirect = props.handleBusinessRedirect,
@@ -528,7 +528,9 @@ var OrderDetailsUI = function OrderDetailsUI(props) {
     className: "date"
   }, activeStatus.includes(order === null || order === void 0 ? void 0 : order.status) ? /*#__PURE__*/_react.default.createElement(_OrderEta.OrderEta, {
     order: order
-  }) : parseDate(order === null || order === void 0 ? void 0 : (_order$reporting_data = order.reporting_data) === null || _order$reporting_data === void 0 ? void 0 : _order$reporting_data.at["status:".concat(order.status)])), (acceptedStatus.includes(parseInt(order === null || order === void 0 ? void 0 : order.status, 10)) || !isOriginalLayout) && !isGiftCardOrder && /*#__PURE__*/_react.default.createElement(_styles.ReOrder, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }) : parseDate(order === null || order === void 0 ? void 0 : (_order$reporting_data = order.reporting_data) === null || _order$reporting_data === void 0 ? void 0 : _order$reporting_data.at["status:".concat(order.status)], {
+    outputFormat: "YYYY-MM-DD ".concat(configs === null || configs === void 0 ? void 0 : (_configs$general_hour = configs.general_hour_format) === null || _configs$general_hour === void 0 ? void 0 : _configs$general_hour.value)
+  })), (acceptedStatus.includes(parseInt(order === null || order === void 0 ? void 0 : order.status, 10)) || !isOriginalLayout) && !isGiftCardOrder && /*#__PURE__*/_react.default.createElement(_styles.ReOrder, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     outline: true,
     onClick: function onClick() {

package/_modules/themes/five/src/components/PaymentOptionCard/index.js

@@ -0,0 +1,84 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaymentOptionCard = void 0;
+var _orderingComponentsExternal = require("ordering-components-external");
+var _react = _interopRequireWildcard(require("react"));
+var _CardFormCustom = require("../CardFormCustom");
+var _Modal = _interopRequireDefault(require("../Modal"));
+var _PaymentOptionStripe = require("../PaymentOptionStripe");
+var _styles = require("../PaymentOptionStripe/styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var PaymentOptionCardUI = function PaymentOptionCardUI(props) {
+  var deleteCard = props.deleteCard,
+    cardsList = props.cardsList,
+    handleCardClick = props.handleCardClick,
+    handleNewCard = props.handleNewCard,
+    paymethodSelected = props.paymethodSelected,
+    cardSelected = props.cardSelected,
+    gateway = props.gateway,
+    paymethodsWithoutSaveCards = props.paymethodsWithoutSaveCards,
+    onSelectCard = props.onSelectCard;
+  var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
+    _useLanguage2 = _slicedToArray(_useLanguage, 2),
+    t = _useLanguage2[1];
+  var _useSession = (0, _orderingComponentsExternal.useSession)(),
+    _useSession2 = _slicedToArray(_useSession, 1),
+    token = _useSession2[0].token;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    addCardOpen = _useState2[0],
+    setAddCardOpen = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var _cardsList$cards;
+    if ((cardsList === null || cardsList === void 0 ? void 0 : (_cardsList$cards = cardsList.cards) === null || _cardsList$cards === void 0 ? void 0 : _cardsList$cards.length) > 0) {
+      setAddCardOpen(true);
+    }
+  }, [cardsList === null || cardsList === void 0 ? void 0 : cardsList.cards]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PaymentOptionStripe.PaymentOptionStripeUI, {
+    deleteCard: deleteCard,
+    cardsList: cardsList,
+    handleCardClick: handleCardClick,
+    handleNewCard: handleNewCard,
+    paymethodSelected: paymethodSelected,
+    cardSelected: cardSelected,
+    gateway: gateway,
+    onSelectCard: onSelectCard
+  }), token && !cardsList.loading && (!cardSelected || !paymethodsWithoutSaveCards.includes(gateway)) && /*#__PURE__*/_react.default.createElement(_styles.AddNewCard, null, /*#__PURE__*/_react.default.createElement("span", {
+    onClick: function onClick() {
+      return setAddCardOpen(true);
+    }
+  }, t('ADD_NEW_CARD', 'Add new card'))), /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    open: addCardOpen,
+    onClose: function onClose() {
+      return setAddCardOpen(false);
+    },
+    title: t('ADD_NEW_CARD', 'Add new card')
+  }, /*#__PURE__*/_react.default.createElement(_CardFormCustom.CardFormCustom, {
+    handleNewCard: handleNewCard,
+    setAddCardOpen: setAddCardOpen
+  })));
+};
+var PaymentOptionCard = function PaymentOptionCard(props) {
+  var paymentOptionStripeProps = _objectSpread(_objectSpread({}, props), {}, {
+    UIComponent: PaymentOptionCardUI
+  });
+  return /*#__PURE__*/_react.default.createElement(_orderingComponentsExternal.PaymentOptionStripe, paymentOptionStripeProps);
+};
+exports.PaymentOptionCard = PaymentOptionCard;

package/_modules/themes/five/src/components/PaymentOptionStripe/index.js

@@ -4,11 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PaymentOptionStripe = exports.PaymentCard = void 0;
+exports.PaymentOptionStripeUI = exports.PaymentOptionStripe = exports.PaymentCard = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _orderingComponentsExternal = require("ordering-components-external");
-var _FiMoreVertical = _interopRequireDefault(require("@meronex/icons/fi/FiMoreVertical"));
+var _IosRadioButtonOn = _interopRequireDefault(require("@meronex/icons/ios/IosRadioButtonOn"));
+var _IosRadioButtonOff = _interopRequireDefault(require("@meronex/icons/ios/IosRadioButtonOff"));
+var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styledComponents = require("styled-components");
 var _Modal = require("../Modal");
 var _Confirm = require("../Confirm");
@@ -36,11 +38,14 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var PaymentOptionStripeUI = function PaymentOptionStripeUI(props) {
-  var _props$beforeElements, _props$beforeComponen, _cardsList$error$, _cardsList$cards, _props$afterComponent, _props$afterElements;
+  var _props$beforeElements, _props$beforeComponen, _cardsList$error$, _cardsList$cards2, _props$afterComponent, _props$afterElements;
   var deleteCard = props.deleteCard,
     cardsList = props.cardsList,
     _handleCardClick = props.handleCardClick,
-    handleNewCard = props.handleNewCard;
+    handleNewCard = props.handleNewCard,
+    paymethodSelected = props.paymethodSelected,
+    cardSelected = props.cardSelected,
+    gateway = props.gateway;
   var _useSession = (0, _orderingComponentsExternal.useSession)(),
     _useSession2 = _slicedToArray(_useSession, 1),
     token = _useSession2[0].token;
@@ -59,6 +64,7 @@ var PaymentOptionStripeUI = function PaymentOptionStripeUI(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     addCartOpen = _useState4[0],
     setAddCardOpen = _useState4[1];
+  var paymethodsWithoutSaveCards = ['credomatic'];
   var _handleNewCard = function _handleNewCard(card) {
     setAddCardOpen(false);
     handleNewCard(card);
@@ -75,6 +81,12 @@ var PaymentOptionStripeUI = function PaymentOptionStripeUI(props) {
       }
     });
   };
+  (0, _react.useEffect)(function () {
+    var _cardsList$cards;
+    if (!(cardsList !== null && cardsList !== void 0 && cardsList.loading) && (cardsList === null || cardsList === void 0 ? void 0 : (_cardsList$cards = cardsList.cards) === null || _cardsList$cards === void 0 ? void 0 : _cardsList$cards.length) === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
+      setAddCardOpen(true);
+    }
+  }, [cardsList === null || cardsList === void 0 ? void 0 : cardsList.loading]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -85,7 +97,7 @@ var PaymentOptionStripeUI = function PaymentOptionStripeUI(props) {
     }, props));
   }), /*#__PURE__*/_react.default.createElement(_styles.OptionStripeContainer, null, !token && /*#__PURE__*/_react.default.createElement(_styles.WarningMessage, null, t('NEED_LOGIN_TO_USE', 'Sorry, you need to login to use this method')), token && !cardsList.loading && cardsList.cards && cardsList.cards.length === 0 && /*#__PURE__*/_react.default.createElement(_styles.CardItem, null, /*#__PURE__*/_react.default.createElement("span", null, t('NO_CARDS', 'No cards'))), token && cardsList.error && cardsList.error.length > 0 && /*#__PURE__*/_react.default.createElement(_NotFoundSource.NotFoundSource, {
     content: (cardsList === null || cardsList === void 0 ? void 0 : (_cardsList$error$ = cardsList.error[0]) === null || _cardsList$error$ === void 0 ? void 0 : _cardsList$error$.message) || (cardsList === null || cardsList === void 0 ? void 0 : cardsList.error[0])
-  }), token && cardsList.cards && cardsList.cards.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cardsList === null || cardsList === void 0 ? void 0 : (_cardsList$cards = cardsList.cards) === null || _cardsList$cards === void 0 ? void 0 : _cardsList$cards.map(function (card, i) {
+  }), token && cardsList.cards && cardsList.cards.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cardsList === null || cardsList === void 0 ? void 0 : (_cardsList$cards2 = cardsList.cards) === null || _cardsList$cards2 === void 0 ? void 0 : _cardsList$cards2.map(function (card, i) {
     return /*#__PURE__*/_react.default.createElement(PaymentCard, _extends({}, props, {
       key: i,
       handleCardClick: function handleCardClick() {
@@ -95,9 +107,12 @@ var PaymentOptionStripeUI = function PaymentOptionStripeUI(props) {
         return _handleDeleteCard(card);
       },
       card: card,
-      defaultSelected: i === 0
+      defaultSelected: i === 0,
+      active: (paymethodSelected || (cardSelected === null || cardSelected === void 0 ? void 0 : cardSelected.id)) === card.id,
+      cardSelected: cardSelected,
+      paymethodSelected: paymethodSelected
     }));
-  })), token && !cardsList.loading && /*#__PURE__*/_react.default.createElement(_styles.AddNewCard, null, /*#__PURE__*/_react.default.createElement("span", {
+  })), token && !cardsList.loading && !paymethodsWithoutSaveCards.includes(gateway) && /*#__PURE__*/_react.default.createElement(_styles.AddNewCard, null, /*#__PURE__*/_react.default.createElement("span", {
     onClick: function onClick() {
       return setAddCardOpen(true);
     }
@@ -151,21 +166,21 @@ var PaymentOptionStripeUI = function PaymentOptionStripeUI(props) {
     }, AfterElement);
   }));
 };
+exports.PaymentOptionStripeUI = PaymentOptionStripeUI;
 var PaymentCard = function PaymentCard(props) {
   var handleDeleteCard = props.handleDeleteCard,
     card = props.card,
     handleCardClick = props.handleCardClick,
-    onSelectCard = props.onSelectCard;
-  var _useLanguage3 = (0, _orderingComponentsExternal.useLanguage)(),
-    _useLanguage4 = _slicedToArray(_useLanguage3, 2),
-    t = _useLanguage4[1];
-  var theme = (0, _styledComponents.useTheme)();
+    onSelectCard = props.onSelectCard,
+    active = props.active,
+    cardSelected = props.cardSelected;
   var _useState5 = (0, _react.useState)(false),
     _useState6 = _slicedToArray(_useState5, 2),
     isShowActions = _useState6[0],
     setIsShowActions = _useState6[1];
   var cardActionsRef = (0, _react.useRef)(null);
   var actionWrapperRef = (0, _react.useRef)(null);
+  var theme = (0, _styledComponents.useTheme)();
   var handleClickOutside = function handleClickOutside(e) {
     var _cardActionsRef$curre;
     if (!isShowActions) return;
@@ -178,15 +193,26 @@ var PaymentCard = function PaymentCard(props) {
     var _actionWrapperRef$cur;
     if ((_actionWrapperRef$cur = actionWrapperRef.current) !== null && _actionWrapperRef$cur !== void 0 && _actionWrapperRef$cur.contains(e.target)) return;
     handleCardClick(card);
-    onSelectCard({
+    onSelectCard && onSelectCard(_objectSpread(_objectSpread({}, cardSelected), {}, {
       id: card.id,
       type: 'card',
       card: {
         brand: card.brand,
         last4: card.last4
       }
-    });
+    }));
   };
+  (0, _react.useEffect)(function () {
+    if (!cardSelected) return;
+    onSelectCard && onSelectCard(_objectSpread(_objectSpread({}, cardSelected), {}, {
+      id: cardSelected === null || cardSelected === void 0 ? void 0 : cardSelected.id,
+      type: 'card',
+      card: {
+        brand: cardSelected === null || cardSelected === void 0 ? void 0 : cardSelected.brand,
+        last4: cardSelected === null || cardSelected === void 0 ? void 0 : cardSelected.last4
+      }
+    }));
+  }, [cardSelected]);
   (0, _react.useEffect)(function () {
     window.addEventListener('click', handleClickOutside);
     return function () {
@@ -196,21 +222,21 @@ var PaymentCard = function PaymentCard(props) {
   return /*#__PURE__*/_react.default.createElement(_styles.CardItem, {
     onClick: handleChangeDefaultCard,
     isCursor: true
-  }, /*#__PURE__*/_react.default.createElement(_styles.CardItemContent, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
+  }, /*#__PURE__*/_react.default.createElement(_styles.CardItemContent, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "checks"
+  }, active ? /*#__PURE__*/_react.default.createElement(_IosRadioButtonOn.default, null) : /*#__PURE__*/_react.default.createElement(_IosRadioButtonOff.default, null)), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
     src: (0, _utils.getIconCard)(card === null || card === void 0 ? void 0 : card.brand),
     alt: card === null || card === void 0 ? void 0 : card.brand
-  })), /*#__PURE__*/_react.default.createElement("span", null, card === null || card === void 0 ? void 0 : card.brand, " ", card.last4)), /*#__PURE__*/_react.default.createElement(_styles.CardItemActions, null, /*#__PURE__*/_react.default.createElement(_styles.CardItemActionsWrapper, {
+  })), /*#__PURE__*/_react.default.createElement("span", null, "XXXX-XXXX-XXXX-", card === null || card === void 0 ? void 0 : card.last4)), /*#__PURE__*/_react.default.createElement(_styles.CardItemActions, null, /*#__PURE__*/_react.default.createElement(_styles.CardItemActionsWrapper, {
     ref: actionWrapperRef
   }, /*#__PURE__*/_react.default.createElement("span", {
     ref: cardActionsRef
-  }, /*#__PURE__*/_react.default.createElement(_FiMoreVertical.default, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Trash, {
+    color: theme.colors.lightGray,
     onClick: function onClick() {
-      return setIsShowActions(true);
+      return handleDeleteCard();
     }
-  })), isShowActions && /*#__PURE__*/_react.default.createElement(_styles.ActionsContent, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "delete",
-    onClick: handleDeleteCard
-  }, t('DELETE', 'Delete'))))));
+  })))));
 };
 exports.PaymentCard = PaymentCard;
 var PaymentOptionStripe = function PaymentOptionStripe(props) {

package/_modules/themes/five/src/components/PaymentOptionStripe/styles.js

@@ -22,7 +22,9 @@ var CardItem = _styledComponents.default.div(_templateObject4 || (_templateObjec
   return isCursor && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    &:hover {\n      background-color: #F8F9FA;\n    }\n  "])));
 });
 exports.CardItem = CardItem;
-var CardItemContent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  > div {\n    display: flex;\n    align-items: center;\n    margin-right: 13px;\n    ", "\n\n    img {\n      width: 24px;\n      height: 20px;\n    }\n  }\n\n  span {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (props) {
+var CardItemContent = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  .checks svg {\n    color: ", ";\n    font-size: 22px;\n  }\n\n  > div {\n    display: flex;\n    align-items: center;\n    margin: 0 13px 0 5px;\n    ", "\n\n    img {\n      width: 24px;\n      height: 20px;\n    }\n  }\n\n  span {\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (props) {
+  return props.theme.colors.primary;
+}, function (props) {
   var _props$theme2;
   return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      margin-left: 13px;\n      margin-right: 0;\n    "])));
 }, function (props) {

package/_modules/themes/five/src/components/PaymentOptions/index.js

@@ -8,6 +8,7 @@ exports.PaymentOptions = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _IosRadioButtonOn = _interopRequireDefault(require("@meronex/icons/ios/IosRadioButtonOn"));
+var _BilStripe = _interopRequireDefault(require("@meronex/icons/bi/BilStripe"));
 var _FaCcStripe = _interopRequireDefault(require("@meronex/icons/fa/FaCcStripe"));
 var _FaStripeS = _interopRequireDefault(require("@meronex/icons/fa/FaStripeS"));
 var _GrStripe = _interopRequireDefault(require("@meronex/icons/gr/GrStripe"));
@@ -19,6 +20,7 @@ var _Confirm = require("../Confirm");
 var _PaymentOptionCash = require("../PaymentOptionCash");
 var _PaymentOptionStripe = require("../PaymentOptionStripe");
 var _PaymentOptionPaypal = require("../../../../../components/PaymentOptionPaypal");
+var _PaymentOptionCard = require("../PaymentOptionCard");
 var _StripeElementsForm = require("../StripeElementsForm");
 var _StripeRedirectForm = require("../StripeRedirectForm");
 var _NotFoundSource = require("../NotFoundSource");
@@ -58,6 +60,7 @@ var stripeRedirectOptions = [{
   name: 'iDEAL',
   value: 'ideal'
 }];
+var cardsPaymethods = ['credomatic'];
 var getPayIcon = function getPayIcon(method) {
   switch (method) {
     case 1:
@@ -97,7 +100,7 @@ var paypalBtnStyle = {
   size: 'responsive'
 };
 var PaymentOptionsUI = function PaymentOptionsUI(props) {
-  var _list$filter, _props$beforeElements, _props$beforeComponen, _paymethodsList$error, _cart$balance, _paymethodSelected$da2, _isOpenMethod$paymeth2, _isOpenMethod$paymeth3, _isOpenMethod$paymeth4, _isOpenMethod$paymeth5, _isOpenMethod$paymeth6, _paymethodData$card, _paymethodData$card2, _paymethodData$card3, _isOpenMethod$paymeth7, _isOpenMethod$paymeth8, _isOpenMethod$paymeth9, _isOpenMethod$paymeth10, _isOpenMethod$paymeth11, _cart$balance2, _isOpenMethod$paymeth12, _isOpenMethod$paymeth13, _isOpenMethod$paymeth14, _isOpenMethod$paymeth15, _isOpenMethod$paymeth16, _isOpenMethod$paymeth17, _isOpenMethod$paymeth18, _isOpenMethod$paymeth19, _isOpenMethod$paymeth20, _isOpenMethod$paymeth21, _isOpenMethod$paymeth22, _isOpenMethod$paymeth23, _isOpenMethod$paymeth24, _isOpenMethod$paymeth25, _isOpenMethod$paymeth26, _isOpenMethod$paymeth27, _isOpenMethod$paymeth28, _isOpenMethod$paymeth29, _isOpenMethod$paymeth30, _isOpenMethod$paymeth31, _isOpenMethod$paymeth32, _isOpenMethod$paymeth33, _props$afterComponent, _props$afterElements;
+  var _list$filter, _props$beforeElements, _props$beforeComponen, _paymethodsList$error, _cart$balance, _paymethodSelected$da2, _isOpenMethod$paymeth2, _isOpenMethod$paymeth3, _isOpenMethod$paymeth4, _isOpenMethod$paymeth5, _paymethodSelected$da3, _isOpenMethod$paymeth6, _isOpenMethod$paymeth7, _isOpenMethod$paymeth8, _isOpenMethod$paymeth9, _isOpenMethod$paymeth10, _paymethodSelected$da4, _paymethodData$card, _paymethodData$card2, _paymethodData$card3, _isOpenMethod$paymeth11, _isOpenMethod$paymeth12, _isOpenMethod$paymeth13, _isOpenMethod$paymeth14, _isOpenMethod$paymeth15, _cart$balance2, _isOpenMethod$paymeth16, _isOpenMethod$paymeth17, _isOpenMethod$paymeth18, _isOpenMethod$paymeth19, _isOpenMethod$paymeth20, _isOpenMethod$paymeth21, _isOpenMethod$paymeth22, _isOpenMethod$paymeth23, _isOpenMethod$paymeth24, _isOpenMethod$paymeth25, _isOpenMethod$paymeth26, _isOpenMethod$paymeth27, _isOpenMethod$paymeth28, _isOpenMethod$paymeth29, _isOpenMethod$paymeth30, _isOpenMethod$paymeth31, _isOpenMethod$paymeth32, _isOpenMethod$paymeth33, _isOpenMethod$paymeth34, _isOpenMethod$paymeth35, _isOpenMethod$paymeth36, _isOpenMethod$paymeth37, _props$afterComponent, _props$afterElements;
   var cart = props.cart,
     errorCash = props.errorCash,
     isLoading = props.isLoading,
@@ -115,7 +118,8 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     setCreateOrder = props.setCreateOrder,
     onPlaceOrderClick = props.onPlaceOrderClick,
     handlePlaceOrder = props.handlePlaceOrder,
-    paymethods = props.paymethods;
+    paymethods = props.paymethods,
+    setCardList = props.setCardList;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -245,17 +249,34 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     defaultValue: paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$da2 = paymethodSelected.data) === null || _paymethodSelected$da2 === void 0 ? void 0 : _paymethodSelected$da2.cash,
     onChangeData: handlePaymethodDataChange,
     setErrorCash: props.setErrorCash
-  }), (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth2 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth2 === void 0 ? void 0 : _isOpenMethod$paymeth2.gateway) === 'stripe' && ((_isOpenMethod$paymeth3 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth3 === void 0 ? void 0 : _isOpenMethod$paymeth3.gateway) === 'stripe' && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripe.PaymentOptionStripe, {
+  }), ((isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth2 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth2 === void 0 ? void 0 : _isOpenMethod$paymeth2.gateway) === 'stripe' || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) === 'stripe') && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripe.PaymentOptionStripe, {
+    setCardList: setCardList,
     paymethod: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : isOpenMethod.paymethod,
     businessId: props.businessId,
-    publicKey: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth4 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth4 === void 0 ? void 0 : (_isOpenMethod$paymeth5 = _isOpenMethod$paymeth4.credentials) === null || _isOpenMethod$paymeth5 === void 0 ? void 0 : _isOpenMethod$paymeth5.publishable,
+    publicKey: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth3 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth3 === void 0 ? void 0 : (_isOpenMethod$paymeth4 = _isOpenMethod$paymeth3.credentials) === null || _isOpenMethod$paymeth4 === void 0 ? void 0 : _isOpenMethod$paymeth4.publishable,
     onPaymentChange: onPaymentChange,
-    payType: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth6 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth6 === void 0 ? void 0 : _isOpenMethod$paymeth6.name,
+    payType: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth5 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth5 === void 0 ? void 0 : _isOpenMethod$paymeth5.name,
     onSelectCard: handlePaymethodDataChange,
     onCancel: function onCancel() {
       return handlePaymethodClick(null);
-    }
-  }), stripeOptions.includes(paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) && (paymethodData === null || paymethodData === void 0 ? void 0 : paymethodData.card) && !isCustomerMode && /*#__PURE__*/_react.default.createElement(_styles.PayCardSelected, null, /*#__PURE__*/_react.default.createElement(_styles.CardItemContent, null, /*#__PURE__*/_react.default.createElement("span", {
+    },
+    paymethodSelected: paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$da3 = paymethodSelected.data) === null || _paymethodSelected$da3 === void 0 ? void 0 : _paymethodSelected$da3.id,
+    handlePaymentMethodClick: handlePaymentMethodClick
+  }), (cardsPaymethods.includes(isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth6 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth6 === void 0 ? void 0 : _isOpenMethod$paymeth6.gateway) || cardsPaymethods.includes(paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway)) && /*#__PURE__*/_react.default.createElement(_PaymentOptionCard.PaymentOptionCard, {
+    setCardList: setCardList,
+    paymethod: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : isOpenMethod.paymethod,
+    businessId: props.businessId,
+    publicKey: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth7 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth7 === void 0 ? void 0 : (_isOpenMethod$paymeth8 = _isOpenMethod$paymeth7.credentials) === null || _isOpenMethod$paymeth8 === void 0 ? void 0 : _isOpenMethod$paymeth8.publishable,
+    gateway: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth9 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth9 === void 0 ? void 0 : _isOpenMethod$paymeth9.gateway) || (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway),
+    onPaymentChange: onPaymentChange,
+    payType: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth10 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth10 === void 0 ? void 0 : _isOpenMethod$paymeth10.name,
+    onSelectCard: handlePaymethodDataChange,
+    onCancel: function onCancel() {
+      return handlePaymethodClick(null);
+    },
+    paymethodSelected: paymethodSelected === null || paymethodSelected === void 0 ? void 0 : (_paymethodSelected$da4 = paymethodSelected.data) === null || _paymethodSelected$da4 === void 0 ? void 0 : _paymethodSelected$da4.id,
+    handlePaymentMethodClick: handlePaymentMethodClick
+  }), stripeOptions.includes(paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) && (paymethodData === null || paymethodData === void 0 ? void 0 : paymethodData.card) && !isCustomerMode && (paymethodSelected === null || paymethodSelected === void 0 ? void 0 : paymethodSelected.gateway) !== 'stripe' && /*#__PURE__*/_react.default.createElement(_styles.PayCardSelected, null, /*#__PURE__*/_react.default.createElement(_styles.CardItemContent, null, /*#__PURE__*/_react.default.createElement("span", {
     className: "checks"
   }, /*#__PURE__*/_react.default.createElement(_IosRadioButtonOn.default, null)), /*#__PURE__*/_react.default.createElement("span", {
     className: "brand"
@@ -264,15 +285,15 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     alt: paymethodData === null || paymethodData === void 0 ? void 0 : (_paymethodData$card2 = paymethodData.card) === null || _paymethodData$card2 === void 0 ? void 0 : _paymethodData$card2.brand
   })), /*#__PURE__*/_react.default.createElement("span", null, "XXXX-XXXX-XXXX-", paymethodData === null || paymethodData === void 0 ? void 0 : (_paymethodData$card3 = paymethodData.card) === null || _paymethodData$card3 === void 0 ? void 0 : _paymethodData$card3.last4))), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     className: "modal-info",
-    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth7 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth7 === void 0 ? void 0 : _isOpenMethod$paymeth7.gateway) === 'paypal' && !paymethodData.id,
+    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth11 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth11 === void 0 ? void 0 : _isOpenMethod$paymeth11.gateway) === 'paypal' && !paymethodData.id,
     onClose: function onClose() {
       return handlePaymethodClick(null);
     },
     title: t('PAY_WITH_PAYPAL', 'Pay with PayPal')
-  }, (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth8 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth8 === void 0 ? void 0 : _isOpenMethod$paymeth8.gateway) === 'paypal' && /*#__PURE__*/_react.default.createElement(_PaymentOptionPaypal.PaymentOptionPaypal, {
-    clientId: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth9 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth9 === void 0 ? void 0 : (_isOpenMethod$paymeth10 = _isOpenMethod$paymeth9.credentials) === null || _isOpenMethod$paymeth10 === void 0 ? void 0 : _isOpenMethod$paymeth10.client_id,
+  }, (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth12 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth12 === void 0 ? void 0 : _isOpenMethod$paymeth12.gateway) === 'paypal' && /*#__PURE__*/_react.default.createElement(_PaymentOptionPaypal.PaymentOptionPaypal, {
+    clientId: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth13 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth13 === void 0 ? void 0 : (_isOpenMethod$paymeth14 = _isOpenMethod$paymeth13.credentials) === null || _isOpenMethod$paymeth14 === void 0 ? void 0 : _isOpenMethod$paymeth14.client_id,
     body: {
-      paymethod_id: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth11 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth11 === void 0 ? void 0 : _isOpenMethod$paymeth11.id,
+      paymethod_id: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth15 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth15 === void 0 ? void 0 : _isOpenMethod$paymeth15.id,
       amount: (_cart$balance2 = cart === null || cart === void 0 ? void 0 : cart.balance) !== null && _cart$balance2 !== void 0 ? _cart$balance2 : cart.total,
       delivery_zone_id: cart.delivery_zone_id,
       cartUuid: cart.uuid
@@ -284,34 +305,35 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     }
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     title: t('SELECT_A_CARD', 'Select a card'),
-    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth12 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth12 === void 0 ? void 0 : _isOpenMethod$paymeth12.gateway) === 'stripe_connect' && !paymethodData.id,
+    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth16 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth16 === void 0 ? void 0 : _isOpenMethod$paymeth16.gateway) === 'stripe_connect' && !paymethodData.id,
     className: "modal-info",
     onClose: function onClose() {
       return handlePaymethodClick(null);
     }
-  }, (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth13 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth13 === void 0 ? void 0 : _isOpenMethod$paymeth13.gateway) === 'stripe_connect' && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripe.PaymentOptionStripe, {
+  }, (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth17 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth17 === void 0 ? void 0 : _isOpenMethod$paymeth17.gateway) === 'stripe_connect' && /*#__PURE__*/_react.default.createElement(_PaymentOptionStripe.PaymentOptionStripe, {
     paymethod: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : isOpenMethod.paymethod,
     businessId: props.businessId,
-    publicKey: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth14 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth14 === void 0 ? void 0 : (_isOpenMethod$paymeth15 = _isOpenMethod$paymeth14.credentials) === null || _isOpenMethod$paymeth15 === void 0 ? void 0 : (_isOpenMethod$paymeth16 = _isOpenMethod$paymeth15.stripe) === null || _isOpenMethod$paymeth16 === void 0 ? void 0 : _isOpenMethod$paymeth16.publishable,
-    clientSecret: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth17 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth17 === void 0 ? void 0 : (_isOpenMethod$paymeth18 = _isOpenMethod$paymeth17.credentials) === null || _isOpenMethod$paymeth18 === void 0 ? void 0 : _isOpenMethod$paymeth18.publishable,
+    publicKey: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth18 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth18 === void 0 ? void 0 : (_isOpenMethod$paymeth19 = _isOpenMethod$paymeth18.credentials) === null || _isOpenMethod$paymeth19 === void 0 ? void 0 : (_isOpenMethod$paymeth20 = _isOpenMethod$paymeth19.stripe) === null || _isOpenMethod$paymeth20 === void 0 ? void 0 : _isOpenMethod$paymeth20.publishable,
+    clientSecret: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth21 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth21 === void 0 ? void 0 : (_isOpenMethod$paymeth22 = _isOpenMethod$paymeth21.credentials) === null || _isOpenMethod$paymeth22 === void 0 ? void 0 : _isOpenMethod$paymeth22.publishable,
     payType: paymethodsList === null || paymethodsList === void 0 ? void 0 : paymethodsList.name,
     onSelectCard: handlePaymethodDataChange,
     onCancel: function onCancel() {
       return handlePaymethodClick(null);
-    }
+    },
+    paymethodSelected: paymethodSelected
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     title: t('ADD_CARD', 'Add card'),
-    open: (stripeDirectMethods === null || stripeDirectMethods === void 0 ? void 0 : stripeDirectMethods.includes(isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth19 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth19 === void 0 ? void 0 : _isOpenMethod$paymeth19.gateway)) && !paymethodData.id,
+    open: (stripeDirectMethods === null || stripeDirectMethods === void 0 ? void 0 : stripeDirectMethods.includes(isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth23 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth23 === void 0 ? void 0 : _isOpenMethod$paymeth23.gateway)) && !paymethodData.id,
     className: "modal-info",
     onClose: function onClose() {
       return handlePaymethodClick(null);
     }
-  }, !(isOpenMethod !== null && isOpenMethod !== void 0 && (_isOpenMethod$paymeth20 = isOpenMethod.paymethod) !== null && _isOpenMethod$paymeth20 !== void 0 && (_isOpenMethod$paymeth21 = _isOpenMethod$paymeth20.credentials) !== null && _isOpenMethod$paymeth21 !== void 0 && _isOpenMethod$paymeth21.publishable) && /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("p", null, t('ADD_PUBLISHABLE_KEY', 'Please add a publishable key'))), (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth22 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth22 === void 0 ? void 0 : (_isOpenMethod$paymeth23 = _isOpenMethod$paymeth22.credentials) === null || _isOpenMethod$paymeth23 === void 0 ? void 0 : _isOpenMethod$paymeth23.publishable) && (stripeDirectMethods === null || stripeDirectMethods === void 0 ? void 0 : stripeDirectMethods.includes(isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth24 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth24 === void 0 ? void 0 : _isOpenMethod$paymeth24.gateway)) && /*#__PURE__*/_react.default.createElement(_StripeElementsForm.StripeElementsForm, {
+  }, !(isOpenMethod !== null && isOpenMethod !== void 0 && (_isOpenMethod$paymeth24 = isOpenMethod.paymethod) !== null && _isOpenMethod$paymeth24 !== void 0 && (_isOpenMethod$paymeth25 = _isOpenMethod$paymeth24.credentials) !== null && _isOpenMethod$paymeth25 !== void 0 && _isOpenMethod$paymeth25.publishable) && /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("p", null, t('ADD_PUBLISHABLE_KEY', 'Please add a publishable key'))), (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth26 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth26 === void 0 ? void 0 : (_isOpenMethod$paymeth27 = _isOpenMethod$paymeth26.credentials) === null || _isOpenMethod$paymeth27 === void 0 ? void 0 : _isOpenMethod$paymeth27.publishable) && (stripeDirectMethods === null || stripeDirectMethods === void 0 ? void 0 : stripeDirectMethods.includes(isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth28 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth28 === void 0 ? void 0 : _isOpenMethod$paymeth28.gateway)) && /*#__PURE__*/_react.default.createElement(_StripeElementsForm.StripeElementsForm, {
     methodsPay: methodsPay,
-    paymethod: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth25 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth25 === void 0 ? void 0 : _isOpenMethod$paymeth25.gateway,
+    paymethod: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth29 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth29 === void 0 ? void 0 : _isOpenMethod$paymeth29.gateway,
     businessId: props.businessId,
     cart: cart,
-    publicKey: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth26 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth26 === void 0 ? void 0 : (_isOpenMethod$paymeth27 = _isOpenMethod$paymeth26.credentials) === null || _isOpenMethod$paymeth27 === void 0 ? void 0 : _isOpenMethod$paymeth27.publishable) || (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth28 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth28 === void 0 ? void 0 : (_isOpenMethod$paymeth29 = _isOpenMethod$paymeth28.credentials) === null || _isOpenMethod$paymeth29 === void 0 ? void 0 : _isOpenMethod$paymeth29.publishable_key),
+    publicKey: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth30 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth30 === void 0 ? void 0 : (_isOpenMethod$paymeth31 = _isOpenMethod$paymeth30.credentials) === null || _isOpenMethod$paymeth31 === void 0 ? void 0 : _isOpenMethod$paymeth31.publishable) || (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth32 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth32 === void 0 ? void 0 : (_isOpenMethod$paymeth33 = _isOpenMethod$paymeth32.credentials) === null || _isOpenMethod$paymeth33 === void 0 ? void 0 : _isOpenMethod$paymeth33.publishable_key),
     handleSource: handlePaymethodDataChange,
     onCancel: function onCancel() {
       return handlePaymethodClick(null);
@@ -319,7 +341,7 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     handlePlaceOrder: handlePlaceOrder
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     title: t('STRIPE_REDIRECT', 'Stripe Redirect'),
-    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth30 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth30 === void 0 ? void 0 : _isOpenMethod$paymeth30.gateway) === 'stripe_redirect' && !paymethodData.type,
+    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth34 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth34 === void 0 ? void 0 : _isOpenMethod$paymeth34.gateway) === 'stripe_redirect' && !paymethodData.type,
     className: "modal-info",
     onClose: function onClose() {
       return handlePaymethodClick(null);
@@ -331,16 +353,16 @@ var PaymentOptionsUI = function PaymentOptionsUI(props) {
     handleStripeRedirect: handlePaymethodDataChange
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     title: t('SQUARE', 'Square'),
-    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth31 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth31 === void 0 ? void 0 : _isOpenMethod$paymeth31.gateway) === 'square' && !paymethodData.token,
+    open: (isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth35 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth35 === void 0 ? void 0 : _isOpenMethod$paymeth35.gateway) === 'square' && !paymethodData.token,
     onClose: function onClose() {
       return handlePaymethodClick(null);
     }
   }, /*#__PURE__*/_react.default.createElement(_PaymentOptionSquare.PaymentOptionSquare, {
     businessId: props.businessId,
     cartTotal: cart === null || cart === void 0 ? void 0 : cart.total,
-    data: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth32 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth32 === void 0 ? void 0 : _isOpenMethod$paymeth32.credentials,
+    data: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth36 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth36 === void 0 ? void 0 : _isOpenMethod$paymeth36.credentials,
     body: {
-      paymethod_id: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth33 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth33 === void 0 ? void 0 : _isOpenMethod$paymeth33.id,
+      paymethod_id: isOpenMethod === null || isOpenMethod === void 0 ? void 0 : (_isOpenMethod$paymeth37 = isOpenMethod.paymethod) === null || _isOpenMethod$paymeth37 === void 0 ? void 0 : _isOpenMethod$paymeth37.id,
       amount: cart.total,
       delivery_zone_id: cart.delivery_zone_id,
       cartUuid: cart.uuid

package/_modules/themes/five/src/components/RenderProductsLayout/index.js

@@ -157,7 +157,7 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
     actualSlug: businessState === null || businessState === void 0 ? void 0 : (_businessState$busine2 = businessState.business) === null || _businessState$busine2 === void 0 ? void 0 : _businessState$busine2.slug
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "bp-list"
-  }, !isCustomLayout && !useKioskApp && /*#__PURE__*/_react.default.createElement(BusinessBasicInformationComponent, _extends({}, props, {
+  }, !useKioskApp && /*#__PURE__*/_react.default.createElement(BusinessBasicInformationComponent, _extends({}, props, {
     businessState: businessState,
     setOpenBusinessInformation: setOpenBusinessInformation,
     openBusinessInformation: openBusinessInformation,

package/_modules/themes/five/src/components/SearchProducts/styles.js

@@ -10,7 +10,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 2000;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  width: 100vw;\n  height: 100vh;\n  z-index: 10002;\n"])));
 exports.Container = Container;
 var BackDropContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: rgba(0,0,0,0.3);\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  height: 100%;\n  width: 100%;\n  z-index: -1;\n"])));
 exports.BackDropContainer = BackDropContainer;

package/_modules/themes/five/src/components/UserDetails/index.js

@@ -181,7 +181,7 @@ var UserDetailsUI = function UserDetailsUI(props) {
     }
   }))), !isEdit ? /*#__PURE__*/_react.default.createElement(_styles.UserData, null, ((userData === null || userData === void 0 ? void 0 : userData.name) || (userData === null || userData === void 0 ? void 0 : userData.middle_name) || (userData === null || userData === void 0 ? void 0 : userData.lastname) || (userData === null || userData === void 0 ? void 0 : userData.second_lastname)) && /*#__PURE__*/_react.default.createElement(_styles.UserName, null, userData === null || userData === void 0 ? void 0 : userData.name, " ", userData === null || userData === void 0 ? void 0 : userData.middle_name, " ", userData === null || userData === void 0 ? void 0 : userData.lastname, " ", userData === null || userData === void 0 ? void 0 : userData.second_lastname), (userData === null || userData === void 0 ? void 0 : userData.email) && /*#__PURE__*/_react.default.createElement("p", null, userData === null || userData === void 0 ? void 0 : userData.email), ((userData === null || userData === void 0 ? void 0 : userData.cellphone) || (user === null || user === void 0 ? void 0 : user.cellphone)) && /*#__PURE__*/_react.default.createElement(_styles.PhoneContainer, null, /*#__PURE__*/_react.default.createElement(_styles.CountryFlag, null, (userData === null || userData === void 0 ? void 0 : userData.country_phone_code) && /*#__PURE__*/_react.default.createElement(_reactPhoneNumberInput.default, {
     onChange: function onChange() {},
-    defaultCountry: (_parsePhoneNumber = (0, _libphonenumberJs.parsePhoneNumber)("+".concat(userData === null || userData === void 0 ? void 0 : (_userData$country_pho = userData.country_phone_code) === null || _userData$country_pho === void 0 ? void 0 : _userData$country_pho.replace('+', ''), " ").concat(userData === null || userData === void 0 ? void 0 : userData.cellphone))) === null || _parsePhoneNumber === void 0 ? void 0 : _parsePhoneNumber.country
+    defaultCountry: (_parsePhoneNumber = (0, _libphonenumberJs.parsePhoneNumber)("+".concat(userData === null || userData === void 0 ? void 0 : (_userData$country_pho = userData.country_phone_code) === null || _userData$country_pho === void 0 ? void 0 : _userData$country_pho.replace('+', ''), " ").concat(userData === null || userData === void 0 ? void 0 : userData.cellphone.replace("+".concat(userData === null || userData === void 0 ? void 0 : userData.country_phone_code), '')))) === null || _parsePhoneNumber === void 0 ? void 0 : _parsePhoneNumber.country
   })), /*#__PURE__*/_react.default.createElement("p", null, userData === null || userData === void 0 ? void 0 : userData.cellphone))) : /*#__PURE__*/_react.default.createElement(_styles.SideForm, null, /*#__PURE__*/_react.default.createElement(_UserFormDetails.UserFormDetailsUI, _extends({}, props, {
     userData: userData,
     isCustomerMode: isCustomerMode,

package/_modules/themes/five/src/components/UserPopover/styles.js

@@ -24,7 +24,7 @@ var HeaderItem = _styledComponents.default.div(_templateObject || (_templateObje
   return props.isChew ? props.theme.colors.backgroundPage : props.theme.colors.darkTextColor;
 });
 exports.HeaderItem = HeaderItem;
-var PopoverBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #FFF;\n  color: #333;\n  padding: 20px 15px;\n  border-radius: 10px;\n  max-width: 500px;\n  min-width: 300px !important;\n  z-index: 1001;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n"])));
+var PopoverBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #FFF;\n  color: #333;\n  padding: 20px 15px;\n  border-radius: 10px;\n  max-width: 500px;\n  min-width: 300px !important;\n  z-index: 10002;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n"])));
 exports.PopoverBody = PopoverBody;
 var PopoverList = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.PopoverList = PopoverList;

package/_modules/themes/five/src/styles/Select/index.js

@@ -28,7 +28,8 @@ var Select = function Select(props) {
     notReload = props.notReload,
     CustomArrow = props.CustomArrow,
     isHomeStyle = props.isHomeStyle,
-    disableOneOption = props.disableOneOption;
+    disableOneOption = props.disableOneOption,
+    zIndex = props.zIndex;
   var isHome = window.location.pathname === '/' || window.location.pathname === '/home' || isHomeStyle;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -106,7 +107,8 @@ var Select = function Select(props) {
     id: "list",
     position: "right",
     ref: dropdownReference,
-    isHome: isHome
+    isHome: isHome,
+    zIndex: zIndex
   }, options.map(function (option, i) {
     return /*#__PURE__*/_react.default.createElement(_Selects.Option, {
       id: "item",

package/_modules/themes/five/src/styles/Selects/index.js

@@ -21,14 +21,17 @@ var Option = _styledComponents.default.div(_templateObject || (_templateObject =
   });
 });
 exports.Option = Option;
-var Options = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  background-color: #CCC;\n  margin-top: 7px;\n  z-index: 10000;\n  border-width: 1px;\n  border-style: solid;\n  border-color: #CCC;\n  border-radius: 15px;\n  overflow: hidden;\n\n  ", "\n  ", "\n"])), function (_ref2) {
-  var position = _ref2.position;
+var Options = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  background-color: #CCC;\n  margin-top: 7px;\n  z-index: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: #CCC;\n  border-radius: 15px;\n  overflow: hidden;\n\n  ", "\n  ", "\n"])), function (_ref2) {
+  var zIndex = _ref2.zIndex;
+  return zIndex || 10002;
+}, function (_ref3) {
+  var position = _ref3.position;
   return (position === null || position === void 0 ? void 0 : position.toLowerCase()) === 'left' && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    left: 0;\n    margin-left: -1px;\n    ", "\n  "])), function (props) {
     var _props$theme2;
     return ((_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.rtl) && (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        margin-right: -1px;\n        margin-left: 0px;\n        right: 0;\n        left: initial\n    "])));
   });
-}, function (_ref3) {
-  var position = _ref3.position;
+}, function (_ref4) {
+  var position = _ref4.position;
   return (position === null || position === void 0 ? void 0 : position.toLowerCase()) === 'right' && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    right: 0;\n    margin-right: -1px;\n    ", "\n  "])), function (props) {
     var _props$theme3;
     return ((_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        margin-left: -1px;\n        margin-right: 0px;\n        left: 0;\n        right: initial;\n    "])));