ordering-ui-external 2.6.7 → 2.7.0

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/ProductForm/styles.js

@@ -72,7 +72,7 @@ var SectionTitle = _styledComponents.default.h3(_templateObject18 || (_templateO
 exports.SectionTitle = SectionTitle;
 var ProductComment = _styledComponents.default.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 130px;\n\n  textarea {\n    margin-top: 8px;\n  }\n\n  p {\n    font-weight: 300;\n    margin-bottom: 5px;\n  }\n\n  @media (min-width: 577px) {\n    margin-bottom: 62px;\n  }\n\n  @media (min-width: 769px) {\n    margin-bottom: 0px;\n    padding-bottom: 10px;\n  }\n"])));
 exports.ProductComment = ProductComment;
-var ProductActions = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 10px 0px;\n  width: 100%;\n  z-index: 9999997;\n\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  background-color: #FFF;\n\n  div.price {\n    padding-top: 10px;\n    color: ", ";\n    h4 {\n      margin: 0;\n      font-weight: 600;\n      font-size: 20px;\n      line-height: 20px;\n    }\n    span {\n      font-size: 13px;\n      color: #D83520;\n      line-height: 15px;\n    }\n  }\n\n  div.incdec-control {\n    width: 135px;\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n    position: relative;\n\n    svg {\n      width: 25px;\n      height: 25px;\n      cursor: pointer;\n    }\n  }\n\n  div.price-amount-block {\n    display: flex;\n    justify-content: space-between;\n    width: 70%\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  svg.disabled {\n    pointer-events: none;\n    color: #CED4DA;\n  }\n\n  button:disabled,\n  button.disabled {\n    background: #E9ECEF;\n    border: 1px solid #E9ECEF;\n    color: #B1BCCC;\n  }\n\n  button.add {\n    width: 90%;\n    padding: 5px 10px;\n    margin-top: 10px;\n    position: relative;\n\n    &.soldout {\n      width: 100%;\n      pointer-events: none;\n    }\n  }\n  .qty {\n    flex: 1;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    height: 38px;\n    min-width: 60px;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0 10px;\n  }\n\n  #address_control {\n    button.add {\n      width: calc(100% - 20px) !important;\n      margin: 10px 10px 0 10px;\n    }\n  }\n  \n  div#address_list {\n    padding: 0;\n  }\n\n  @media (min-width: 577px) {\n    position: sticky;\n  }\n\n  @media (min-width: 1200px) {\n    bottom: 0px;\n    flex-direction: row;\n    justify-content: space-between;\n    border-top: 1px solid #E9ECEF;\n    width: calc(100% + 40px);\n    transform: translateX(-20px);\n    padding: 10px 20px;\n    box-sizing: border-box;\n\n    ", "\n\n    div.price {\n      width: 25%;\n    }\n\n    button.add {\n      width: 35%;\n      margin-top: 0;\n    }\n\n    div.incdec-control {\n      padding-right: 18%;\n      &.show-weight-unit{\n        width: 30%;\n      }\n    }\n  }\n"])), function (props) {
+var ProductActions = _styledComponents.default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 10px 0px;\n  width: 100%;\n  z-index: 9999997;\n\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  background-color: #FFF;\n\n  div.price {\n    padding-top: 10px;\n    color: ", ";\n    h4 {\n      margin: 0;\n      font-weight: 600;\n      font-size: 20px;\n      line-height: 20px;\n    }\n    span {\n      font-size: 13px;\n      color: #D83520;\n      line-height: 15px;\n    }\n  }\n\n  div.incdec-control {\n    width: 135px;\n    display: flex;\n    justify-content: space-around;\n    align-items: center;\n    position: relative;\n\n    svg {\n      width: 25px;\n      height: 25px;\n      cursor: pointer;\n    }\n  }\n\n  div.price-amount-block {\n    display: flex;\n    justify-content: space-between;\n    width: 70%\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  svg.disabled {\n    pointer-events: none;\n    color: #CED4DA;\n  }\n\n  button:disabled,\n  button.disabled {\n    background: #E9ECEF;\n    border: 1px solid #E9ECEF;\n    color: #B1BCCC;\n  }\n\n  button.add {\n    width: 90%;\n    padding: 5px 10px;\n    margin-top: 10px;\n    position: relative;\n\n    &.soldout {\n      width: 100%;\n      pointer-events: none;\n    }\n  }\n  .qty {\n    flex: 1;\n    text-align: center;\n    display: flex;\n    align-items: center;\n    height: 38px;\n    min-width: 60px;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0 10px;\n  }\n\n  #address_control {\n    button.add {\n      width: calc(100% - 20px) !important;\n      margin: 10px 10px 0 10px;\n    }\n  }\n  \n  div#address_list {\n    padding: 0;\n  }\n\n  @media (min-width: 577px) {\n    position: sticky;\n  }\n\n  @media (min-width: 1200px) {\n    bottom: 0px;\n    flex-direction: row;\n    justify-content: space-between;\n    border-top: 1px solid #E9ECEF;\n    width: calc(100% + 40px);\n    transform: translateX(-20px);\n    padding: 10px 20px;\n    box-sizing: border-box;\n\n    ", "\n\n    div.price {\n      width: 25%;\n    }\n\n    button.add {\n      width: 35%;\n      margin-top: 0;\n    }\n\n    div.incdec-control {\n      margin-right: 18%;\n      &.show-weight-unit{\n        width: 30%;\n      }\n    }\n  }\n"])), function (props) {
   var _props$theme;
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.colors.darkTextColor;
 }, function (props) {

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

@@ -149,7 +149,7 @@ var RenderProductsLayout = function RenderProductsLayout(props) {
   }, [categoryClicked]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !isLoading && (business === null || business === void 0 ? void 0 : business.id) && /*#__PURE__*/_react.default.createElement(_styles.WrappLayout, {
     isCartOnProductsList: isCartOnProductsList
-  }, (!hideBusinessNearCity && !useKioskApp || props.forceShowNearBusiness) && /*#__PURE__*/_react.default.createElement(_styles.NearBusiness, null, /*#__PURE__*/_react.default.createElement(_BusinessesListing.BusinessesListing, {
+  }, (!hideBusinessNearCity && !useKioskApp || props.forceShowNearBusiness) && !isCustomLayout && /*#__PURE__*/_react.default.createElement(_styles.NearBusiness, null, /*#__PURE__*/_react.default.createElement(_BusinessesListing.BusinessesListing, {
     logosLayout: true,
     propsToFetch: ['id', 'logo', 'location', 'timezone', 'schedule', 'open', 'slug'],
     cityId: businessState === null || businessState === void 0 ? void 0 : (_businessState$busine = businessState.business) === null || _businessState$busine === void 0 ? void 0 : _businessState$busine.city_id,
@@ -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    "])));

package/_modules/themes/pwa/src/components/MomentPopover/styles.js

@@ -17,7 +17,7 @@ var HeaderItem = _styledComponents.default.div(_templateObject || (_templateObje
   return isBanner && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background: #F8F9FA;\n    border-radius: 7.6px;\n    padding: 4px 8px;\n  "])));
 });
 exports.HeaderItem = HeaderItem;
-var PopoverBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #FFF;\n  color: #333;\n  padding: 15px;\n  padding-top: 30px;\n  border-radius: 10px;\n  max-width: 500px;\n  z-index: 1001;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n  #moment_control h1{\n    margin-bottom: 30px;\n  }\n"])));
+var PopoverBody = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  background-color: #FFF;\n  color: #333;\n  padding: 15px;\n  padding-top: 30px;\n  border-radius: 10px;\n  max-width: 500px;\n  z-index: 10002;\n  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px;\n  #moment_control h1{\n    margin-bottom: 30px;\n  }\n  @media (min-width: 576px) {\n    z-index: 1001;\n  }\n"])));
 exports.PopoverBody = PopoverBody;
 var PopoverArrow = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 0; \n  height: 0; \n  border-left: 7px solid transparent;\n  border-right: 7px solid transparent;\n  border-bottom: 8px solid #FFF;\n  top: -8px;\n"])));
 exports.PopoverArrow = PopoverArrow;

package/index.html

@@ -13,7 +13,7 @@
   <style type="text/css" id="styles"></style>
   <style>
     .pac-container {
-      z-index: 10000 !important;
+      z-index: 100000 !important;
     }
     .smartbanner-show.smartbanner-margin-top{margin-top:80px}.smartbanner-show.smartbanner-margin-bottom{margin-bottom:80px}.smartbanner-show .smartbanner{display:block}.smartbanner{left:0;display:none;width:100%;height:80px;line-height:80px;font-family:Helvetica Neue,sans-serif;background:#f4f4f4;z-index:9998;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-text-size-adjust:none}.smartbanner-top{position:absolute;top:0}.smartbanner-bottom{position:fixed;bottom:0}.smartbanner-container{margin:0 auto;padding:0 5px}.smartbanner-close{display:inline-block;vertical-align:middle;margin:0 5px 0 0;font-family:ArialRoundedMTBold,Arial;font-size:20px;text-align:center;color:#888;text-decoration:none;border:0;border-radius:14px;padding:0 0 1px;background-color:transparent;-webkit-font-smoothing:subpixel-antialiased}.smartbanner-close:active,.smartbanner-close:hover{color:#aaa}.smartbanner-icon{width:57px;height:57px;margin-right:12px;background-size:cover;border-radius:10px}.smartbanner-icon,.smartbanner-info{display:inline-block;vertical-align:middle}.smartbanner-info{white-space:normal;width:calc(99% - 201px);font-size:11px;line-height:1.2em;font-weight:700}.smartbanner-wrapper{max-width:110px;display:inline-block;text-align:right;width:100%}.smartbanner-title{font-size:13px;line-height:18px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smartbanner-description{max-height:40px;overflow:hidden}.smartbanner-author{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smartbanner-author:empty+.smartbanner-description{max-height:50px}.smartbanner-button{margin:auto 0;height:24px;font-size:14px;line-height:24px;text-align:center;font-weight:700;color:#6a6a6a;text-transform:uppercase;text-decoration:none;display:inline-block;text-shadow:0 1px 0 hsla(0,0%,100%,.8)}.smartbanner-button:active,.smartbanner-button:hover{color:#aaa}.smartbanner-ios{background:#f2f2f2;box-shadow:0 1px 1px rgba(0,0,0,.2);line-height:80px}.smartbanner-ios .smartbanner-close{border:0;width:18px;height:18px;line-height:18px;font-family:Arial;color:#888;text-shadow:0 1px 0 #fff;-webkit-font-smoothing:none}.smartbanner-ios .smartbanner-close:active,.smartbanner-ios .smartbanner-close:hover{color:#888}.smartbanner-ios .smartbanner-icon{background-size:cover}.smartbanner-ios .smartbanner-info{color:#6a6a6a;text-shadow:0 1px 0 hsla(0,0%,100%,.8);font-weight:300}.smartbanner-ios .smartbanner-title{color:#4d4d4d;font-weight:500}.smartbanner-ios .smartbanner-button{padding:0 10px;font-size:15px;min-width:10%;font-weight:400;color:#0c71fd}.smartbanner-ios .smartbanner-button:active,.smartbanner-ios .smartbanner-button:hover{background:#f2f2f2}.smartbanner-android{background:#3d3d3d url("data:image/gif;base64,R0lGODlhCAAIAIABAFVVVf///yH5BAEHAAEALAAAAAAIAAgAAAINRG4XudroGJBRsYcxKAA7");box-shadow:inset 0 4px 0 #88b131;line-height:82px}.smartbanner-android .smartbanner-close{border:0;max-width:17px;width:100%;height:17px;line-height:17px;margin-right:7px;color:#b1b1b3;background:#1c1e21;text-shadow:0 1px 1px #000;text-decoration:none;box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 1px 1px hsla(0,0%,100%,.3);cursor:pointer}.smartbanner-android .smartbanner-close:active,.smartbanner-android .smartbanner-close:hover{color:#eee}.smartbanner-android .smartbanner-icon{background-color:transparent;box-shadow:none}.smartbanner-android .smartbanner-info{color:#ccc;text-shadow:0 1px 2px #000}.smartbanner-android .smartbanner-title{color:#fff;font-weight:700}.smartbanner-android .smartbanner-button{min-width:12%;color:#d1d1d1;font-weight:700;padding:0;background:none;border-radius:0;box-shadow:0 0 0 1px #333,0 0 0 2px #dddcdc}.smartbanner-android .smartbanner-button:active,.smartbanner-android .smartbanner-button:hover{background:none}.smartbanner-android .smartbanner-button-text{text-align:center;display:block;padding:0 10px;background:#42b6c9;background:linear-gradient(180deg,#42b6c9,#39a9bb);text-transform:none;text-shadow:none;box-shadow:none}.smartbanner-android .smartbanner-button-text:active,.smartbanner-android .smartbanner-button-text:hover{background:#2ac7e1}.smartbanner-kindle,.smartbanner-windows{background:#f4f4f4;background:linear-gradient(180deg,#f4f4f4,#cdcdcd);box-shadow:0 1px 2px rgba(0,0,0,.5);line-height:80px}.smartbanner-kindle .smartbanner-close,.smartbanner-windows .smartbanner-close{border:0;width:18px;height:18px;line-height:18px;color:#888;text-shadow:0 1px 0 #fff}.smartbanner-kindle .smartbanner-close:active,.smartbanner-kindle .smartbanner-close:hover,.smartbanner-windows .smartbanner-close:active,.smartbanner-windows .smartbanner-close:hover{color:#aaa}.smartbanner-kindle .smartbanner-icon,.smartbanner-windows .smartbanner-icon{background:rgba(0,0,0,.6);background-size:cover;box-shadow:0 1px 3px rgba(0,0,0,.3)}.smartbanner-kindle .smartbanner-info,.smartbanner-windows .smartbanner-info{color:#6a6a6a;text-shadow:0 1px 0 hsla(0,0%,100%,.8)}.smartbanner-kindle .smartbanner-title,.smartbanner-windows .smartbanner-title{color:#4d4d4d;font-weight:700}.smartbanner-kindle .smartbanner-button,.smartbanner-windows .smartbanner-button{padding:0 10px;min-width:10%;color:#6a6a6a;background:#efefef;background:linear-gradient(180deg,#efefef,#dcdcdc);border-radius:3px;box-shadow:inset 0 0 0 1px #bfbfbf,0 1px 0 hsla(0,0%,100%,.6),inset 0 2px 0 hsla(0,0%,100%,.7)}.smartbanner-kindle .smartbanner-button:active,.smartbanner-kindle .smartbanner-button:hover,.smartbanner-windows .smartbanner-button:active,.smartbanner-windows .smartbanner-button:hover{background:#dcdcdc;background:linear-gradient(180deg,#dcdcdc,#efefef)}
   </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "2.6.7",
+  "version": "2.7.0",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -87,10 +87,12 @@
     "lodash": "^4.17.19",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
-    "ordering-components-external": "2.7.4",
+    "ordering-components-external": "2.8.0",
+    "payment": "^2.4.6",
     "polished": "^3.6.6",
     "react-bootstrap-icons": "^1.7.2",
     "react-calendar": "^3.3.1",
+    "react-credit-cards-2": "^0.10.0",
     "react-datepicker": "^4.1.1",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^6.8.1",

package/src/components/LanguageSelector/index.js

@@ -22,6 +22,7 @@ const LanguageSelectorUI = (props) => {
   return (
     _languages && _languages.length > 1 ? (
       <Select
+        zIndex={10002}
         options={languagesState?.loading ? defaultLanguages : _languages}
         defaultValue={languagesState?.loading ? defaultCurrentLanguage : currentLanguage}
         onChange={(languageId) => handleChangeLanguage(languageId)}

package/src/components/OrderTypeSelectorHeader/index.js

@@ -14,7 +14,8 @@ const OrderTypeSelectorHeaderUI = (props) => {
     typeSelected,
     defaultValue,
     configTypes,
-    orderTypes
+    orderTypes,
+    autoCloseWhenScroll
   } = props
 
   const defaultType = configTypes?.includes(typeSelected) ? null : configTypes?.[0]
@@ -22,6 +23,7 @@ const OrderTypeSelectorHeaderUI = (props) => {
   return (
     <OrderTypeWrapper>
         <Select
+          autoCloseWhenScroll={autoCloseWhenScroll}
           options={configTypes
             ? orderTypes.filter(type => configTypes?.includes(type.value))
             : orderTypes

package/src/components/SmartAppBanner/index.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import { useLanguage, SmartAppBanner as SmartAppBannerController } from 'ordering-components-external'
 import SmartBanner from 'react-smartbanner'
+import { useTheme } from 'styled-components'
 
 const SmartAppBanneUI = (props) => {
   const [, t] = useLanguage()
+  const theme = useTheme()
 
   return (
     <>
       <SmartBanner
-        title={t('MOBILE_APPNAME', 'Ordering app')}
-        author={t('MOBILE_APPNAME_AUTHOR', 'Ordering, Inc.')}
+        title={t('MOBILE_APPNAME', theme?.defaultLanguages?.MOBILE_APPNAME || 'Ordering app')}
+        author={t('MOBILE_APPNAME_AUTHOR', theme?.defaultLanguages?.MOBILE_APPNAME_AUTHOR || 'Ordering, Inc.')}
         daysHidden={7}
         daysReminder={15}
         button={t('VIEW', 'View')}

package/src/contexts/ThemeContext/index.js

@@ -82,7 +82,7 @@ export const ThemeProvider = ({ children, ...props }) => {
       bottom: 0;
       left: 0;
       right: 0;
-      z-index: 2000;
+      z-index: 20002;
     }
     .popup-component {
       background-color: rgba(0, 0, 0, 0.3);

package/src/styles/Select/index.js

@@ -18,7 +18,9 @@ export const Select = (props) => {
     defaultValue,
     onChange,
     notAsync,
-    notReload
+    notReload,
+    autoCloseWhenScroll,
+    zIndex
   } = props
 
   const isHome = window.location.pathname === '/' || window.location.pathname === '/home'
@@ -49,9 +51,16 @@ export const Select = (props) => {
   }
 
   useEffect(() => {
+    const handleCloseSelect = () => setOpen(false)
     document.addEventListener('mouseup', closeSelect)
     document.addEventListener('keydown', handleKeyDown)
+    if (autoCloseWhenScroll) {
+      window.addEventListener('scroll', handleCloseSelect)
+    }
     return () => {
+      if (autoCloseWhenScroll) {
+        window.removeEventListener('scroll', handleCloseSelect)
+      }
       document.removeEventListener('mouseup', closeSelect)
       document.removeEventListener('keydown', handleKeyDown)
     }
@@ -100,7 +109,7 @@ export const Select = (props) => {
           </Selected>
         )}
         {open && options && (
-          <Options id='list' position='right' ref={dropdownReference}>
+          <Options id='list' position='right' ref={dropdownReference} zIndex={zIndex}>
             {
               options.map(option => (
                 <Option

package/src/styles/Selects/index.js

@@ -37,7 +37,7 @@ export const Options = styled.div`
   position: absolute;
   background-color: #CCC;
   margin-top: 7px;
-  z-index: 10000;
+  z-index: ${({ zIndex }) => zIndex || 10000};
   border-width: 1px;
   border-style: solid;
   border-color: #CCC;

package/src/themes/five/index.js

@@ -115,6 +115,9 @@ import { ActionsSection } from './src/components/OrderDetails/ActionsSection'
 import { ProductShare } from './src/components/ProductShare'
 import { MultiCart } from './src/components/MultiCart'
 import { QueryLoginSpoonity } from './src/components/QueryLoginSpoonity'
+import { Confirm } from './src/components/Confirm'
+import { TaxInformation } from './src/components/TaxInformation'
+import { SendGiftCard } from './src/components/GiftCard/SendGiftCard'
 
 import { Button } from './src/styles/Buttons'
 import { Input, TextArea } from './src/styles/Inputs'
@@ -241,6 +244,9 @@ export {
   ProductShare,
   MultiCart,
   QueryLoginSpoonity,
+  Confirm,
+  TaxInformation,
+  SendGiftCard,
   // styles
   Button,
   Input,