ordering-ui-admin-external 1.14.3 → 1.15.1

package/_modules/components/Settings/Settings/index.js

@@ -18,6 +18,7 @@ var _Shared = require("../../Shared");
 var _CheckoutFieldsSetting = require("../CheckoutFieldsSetting");
 var _AddressFieldsSetting = require("../AddressFieldsSetting");
 var _LanguageSetting = require("../LanguageSetting");
+var _SitesAuthSettings = require("../SitesAuthSettings");
 var _MultiCountrySettings = require("../MultiCountrySettings");
 var _styles2 = require("./styles");
 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); }
@@ -39,10 +40,12 @@ 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 SettingsUI = function SettingsUI(props) {
-  var _configs$multicountry, _categoryList$categor2, _theme$images, _theme$images$dummies;
+  var _configs$multicountry, _categoryList$categor, _theme$images, _theme$images$dummies;
   var categoryList = props.categoryList,
     settingsType = props.settingsType,
     handChangeConfig = props.handChangeConfig;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -55,8 +58,6 @@ var SettingsUI = function SettingsUI(props) {
     _useInfoShare2 = _slicedToArray(_useInfoShare, 2),
     isCollapse = _useInfoShare2[0].isCollapse,
     handleMenuCollapse = _useInfoShare2[1].handleMenuCollapse;
-  var _useLocation = (0, _reactRouterDom.useLocation)(),
-    search = _useLocation.search;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpenDescription = _useState2[0],
@@ -71,18 +72,16 @@ var SettingsUI = function SettingsUI(props) {
     setIsOpenSettingDetails = _useState6[1];
   var _useState7 = (0, _react.useState)(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    openMultiCountrySettings = _useState8[0],
-    setOpenMultiCountrySettings = _useState8[1];
-  var _useState9 = (0, _react.useState)(0),
+    openSitesAuthSettings = _useState8[0],
+    setOpenSitesAuthSettings = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = _slicedToArray(_useState9, 2),
-    moveDistance = _useState10[0],
-    setMoveDistance = _useState10[1];
-  var category;
-  if (search) {
-    var data = search.substring(1).split('&');
-    category = data[0];
-  }
-  var categoryId = category && category.split('=')[1];
+    openMultiCountrySettings = _useState10[0],
+    setOpenMultiCountrySettings = _useState10[1];
+  var _useState11 = (0, _react.useState)(0),
+    _useState12 = _slicedToArray(_useState11, 2),
+    moveDistance = _useState12[0],
+    setMoveDistance = _useState12[1];
   var _useEvent = (0, _orderingComponentsAdminExternal.useEvent)(),
     _useEvent2 = _slicedToArray(_useEvent, 1),
     events = _useEvent2[0];
@@ -107,48 +106,74 @@ var SettingsUI = function SettingsUI(props) {
       });
     }
   };
-  var handleOpenDescription = function handleOpenDescription(category) {
+  var handleOpenDescription = function handleOpenDescription(category, isInitialRender) {
     setIsOpenSettingDetails(null);
+    setOpenSitesAuthSettings(false);
     setOpenMultiCountrySettings(false);
     setIsOpenDescription(true);
     setSelectedCategory(category);
-    onBasicSettingsRedirect({
-      category: category === null || category === void 0 ? void 0 : category.id
-    });
     handChangeConfig && handChangeConfig(false);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=").concat(category === null || category === void 0 ? void 0 : category.id));
+    }
   };
-  var handleOpenSettingDetails = function handleOpenSettingDetails(item) {
+  var handleOpenSettingDetails = function handleOpenSettingDetails(item, isInitialRender) {
     setIsOpenDescription(false);
+    setOpenSitesAuthSettings(false);
     setOpenMultiCountrySettings(false);
     setSelectedCategory(null);
     setIsOpenSettingDetails(item);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=").concat(item));
+    }
+  };
+  var handleOpenSites = function handleOpenSites(isInitialRender) {
+    setIsOpenDescription(false);
+    setIsOpenSettingDetails(null);
+    setOpenSitesAuthSettings(true);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=sites"));
+    }
+  };
+  var handleOpenMultiCountry = function handleOpenMultiCountry(isInitialRender) {
+    setIsOpenDescription(false);
+    setIsOpenSettingDetails(null);
+    setOpenMultiCountrySettings(true);
+    if (!isInitialRender) {
+      history.replace("".concat(location.pathname, "?category=multi_country"));
+    }
   };
   var handleBackRedirect = function handleBackRedirect() {
     setIsOpenDescription(false);
     setSelectedCategory(null);
-    onBasicSettingsRedirect({
-      category: null
-    });
+    setIsOpenSettingDetails(null);
+    setMoveDistance(0);
+    setOpenMultiCountrySettings(false);
+    setOpenSitesAuthSettings(false);
+    history.replace("".concat(location.pathname));
   };
   (0, _react.useEffect)(function () {
+    if (categoryList.loading) return;
+    var categoryId = query.get('category');
     if (categoryId) {
-      onBasicSettingsRedirect({
-        category: categoryId
-      });
-      setIsOpenDescription(true);
-    } else {
-      setIsOpenDescription(false);
-    }
-  }, []);
-  (0, _react.useEffect)(function () {
-    var _categoryList$categor;
-    if (categoryId && (categoryList === null || categoryList === void 0 ? void 0 : (_categoryList$categor = categoryList.categories) === null || _categoryList$categor === void 0 ? void 0 : _categoryList$categor.length) > 0) {
-      var categorySelected = categoryList === null || categoryList === void 0 ? void 0 : categoryList.categories.find(function (item) {
-        return (item === null || item === void 0 ? void 0 : item.id) === parseInt(categoryId);
-      });
-      setSelectedCategory(categorySelected);
+      if (isNaN(Number(categoryId))) {
+        if (categoryId === 'sites') {
+          handleOpenSites(true);
+        } else if (categoryId === 'multi_country') {
+          handleOpenMultiCountry(true);
+        } else {
+          handleOpenSettingDetails(categoryId, true);
+        }
+      } else {
+        var categorySelected = categoryList === null || categoryList === void 0 ? void 0 : categoryList.categories.find(function (item) {
+          return (item === null || item === void 0 ? void 0 : item.id) === parseInt(categoryId);
+        });
+        if (categorySelected) {
+          handleOpenDescription(categorySelected, true);
+        }
+      }
     }
-  }, [categoryList === null || categoryList === void 0 ? void 0 : categoryList.categories]);
+  }, [categoryList.loading]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.BasicSettingsContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.HeaderTitleContainer, null, isCollapse && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {
     color: "black",
     onClick: function onClick() {
@@ -195,12 +220,20 @@ var SettingsUI = function SettingsUI(props) {
     description: t('ADDRESS_FIELDS_DESC'),
     icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.GeoAltFill, null),
     active: isOpenSettingDetails === 'address'
+  })), /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
+    className: "col-md-4 col-sm-6",
+    onClick: function onClick() {
+      return handleOpenSites();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SettingItemUI.SettingItemUI, {
+    title: t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings'),
+    description: t('SITES_LOGIN_SIGNUP_SETTINGS_DESC', 'Advanced sites login/sign up settings'),
+    icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.GearFill, null),
+    active: openSitesAuthSettings
   })), isMulticountryEnabled && /*#__PURE__*/_react.default.createElement(_styles2.SettingItemWrapper, {
     className: "col-md-4 col-sm-6",
     onClick: function onClick() {
-      setIsOpenDescription(false);
-      setIsOpenSettingDetails(null);
-      setOpenMultiCountrySettings(true);
+      return handleOpenMultiCountry();
     }
   }, /*#__PURE__*/_react.default.createElement(_SettingItemUI.SettingItemUI, {
     title: t('MULTI_COUNTRY_SETTINGS', 'Multi country settings'),
@@ -230,7 +263,7 @@ var SettingsUI = function SettingsUI(props) {
       }) : /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.GearFill, null),
       active: (selectedCategory === null || selectedCategory === void 0 ? void 0 : selectedCategory.id) === (category === null || category === void 0 ? void 0 : category.id)
     })));
-  })), !categoryList.loading && ((_categoryList$categor2 = categoryList.categories) === null || _categoryList$categor2 === void 0 ? void 0 : _categoryList$categor2.length) === 0 && settingsType !== 'key_basic' && /*#__PURE__*/_react.default.createElement(_styles2.WrapperNoneConfigs, null, /*#__PURE__*/_react.default.createElement(_styles2.InnerNoneConfigsContainer, null, /*#__PURE__*/_react.default.createElement("img", {
+  })), !categoryList.loading && ((_categoryList$categor = categoryList.categories) === null || _categoryList$categor === void 0 ? void 0 : _categoryList$categor.length) === 0 && settingsType !== 'key_basic' && /*#__PURE__*/_react.default.createElement(_styles2.WrapperNoneConfigs, null, /*#__PURE__*/_react.default.createElement(_styles2.InnerNoneConfigsContainer, null, /*#__PURE__*/_react.default.createElement("img", {
     src: theme === null || theme === void 0 ? void 0 : (_theme$images = theme.images) === null || _theme$images === void 0 ? void 0 : (_theme$images$dummies = _theme$images.dummies) === null || _theme$images$dummies === void 0 ? void 0 : _theme$images$dummies.noOrders,
     alt: "none"
   }), /*#__PURE__*/_react.default.createElement("p", null, t('NO_SETTINGS', 'No Settings yet.'))))), isOpenDescription && /*#__PURE__*/_react.default.createElement(_SettingsDetail.SettingsDetail, _extends({}, props, {
@@ -238,13 +271,21 @@ var SettingsUI = function SettingsUI(props) {
     category: selectedCategory,
     onClose: handleBackRedirect,
     onBasicSettingsRedirect: onBasicSettingsRedirect
+  })), openSitesAuthSettings && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
+    defaultSideBarWidth: 500 + moveDistance,
+    moveDistance: moveDistance,
+    open: openSitesAuthSettings,
+    onClose: function onClose() {
+      return handleBackRedirect();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_SitesAuthSettings.SitesAuthSettings, {
+    setMoveDistance: setMoveDistance
   })), openMultiCountrySettings && /*#__PURE__*/_react.default.createElement(_Shared.SideBar, {
     defaultSideBarWidth: 500 + moveDistance,
     moveDistance: moveDistance,
     open: openMultiCountrySettings,
     onClose: function onClose() {
-      setMoveDistance(0);
-      setOpenMultiCountrySettings(false);
+      return handleBackRedirect();
     }
   }, /*#__PURE__*/_react.default.createElement(_MultiCountrySettings.MultiCountrySettings, {
     setMoveDistance: setMoveDistance
@@ -253,7 +294,7 @@ var SettingsUI = function SettingsUI(props) {
     defaultSideBarWidth: 550,
     open: isOpenSettingDetails,
     onClose: function onClose() {
-      return setIsOpenSettingDetails(null);
+      return handleBackRedirect();
     },
     showExpandIcon: true
   }, isOpenSettingDetails === 'checkout' && /*#__PURE__*/_react.default.createElement(_CheckoutFieldsSetting.CheckoutFieldsSetting, null), isOpenSettingDetails === 'address' && /*#__PURE__*/_react.default.createElement(_AddressFieldsSetting.AddressFieldsSetting, null), isOpenSettingDetails === 'language' && /*#__PURE__*/_react.default.createElement(_LanguageSetting.LanguageSetting, null)));

package/_modules/components/Settings/SettingsDetail/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SettingsDetail = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _useWindowSize2 = require("../../../hooks/useWindowSize");
@@ -34,6 +35,8 @@ var SettingsDetail = function SettingsDetail(props) {
     onBasicSettingsRedirect = props.onBasicSettingsRedirect,
     category = props.category,
     isUpdateConfig = props.isUpdateConfig;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -106,13 +109,17 @@ var SettingsDetail = function SettingsDetail(props) {
     var vid = document.getElementById('categoryVideo');
     vid.play();
   };
-  var handleExtraOpen = function handleExtraOpen(isMoreInfo) {
+  var handleExtraOpen = function handleExtraOpen(isMoreInfo, isInitialRender) {
     if (isMoreInfo) {
       setExtraInfoOpen(true);
       setExtraSubCatOpen(false);
     } else {
       setExtraInfoOpen(false);
       setExtraSubCatOpen(true);
+      if (!isInitialRender) {
+        var _category = query.get('category');
+        history.replace("".concat(location.pathname, "?category=").concat(_category, "&more=settings"));
+      }
     }
   };
   var onCloseSettingsList = function onCloseSettingsList() {
@@ -139,6 +146,12 @@ var SettingsDetail = function SettingsDetail(props) {
       return document.removeEventListener('keydown', onCloseSidebar);
     };
   }, [open]);
+  (0, _react.useEffect)(function () {
+    var more = query.get('more');
+    if (more === 'settings') {
+      handleExtraOpen(false, true);
+    }
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_styles2.Container, {
     id: "catDescription"
   }, /*#__PURE__*/_react.default.createElement(_styles2.DescriptionContent, null, /*#__PURE__*/_react.default.createElement(_styles2.DescriptionHeader, null, /*#__PURE__*/_react.default.createElement(_styles2.HeaderIcons, null, (category === null || category === void 0 ? void 0 : category.support_url) && /*#__PURE__*/_react.default.createElement(_styles.IconButton, {

package/_modules/components/Settings/SitesAuthSettings/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SitesAuthSettings = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 var _BsChevronRight = _interopRequireDefault(require("@meronex/icons/bs/BsChevronRight"));
@@ -40,6 +41,8 @@ var SitesAuthSettingsUI = function SitesAuthSettingsUI(props) {
     siteConfigsState = props.siteConfigsState,
     handleGetSiteConfigs = props.handleGetSiteConfigs,
     handleChangeConfig = props.handleChangeConfig;
+  var history = (0, _reactRouterDom.useHistory)();
+  var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
@@ -60,14 +63,20 @@ var SitesAuthSettingsUI = function SitesAuthSettingsUI(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     isExpand = _useState6[0],
     setIsExpand = _useState6[1];
-  var handleOpenSiteSettingDetails = function handleOpenSiteSettingDetails(siteId) {
+  var handleOpenSiteSettingDetails = function handleOpenSiteSettingDetails(siteId, isInitialRender) {
     handleGetSiteConfigs(siteId);
     setSelectedSiteId(siteId);
     setMoveDistance(500);
+    if (!isInitialRender) {
+      var category = query.get('category');
+      history.replace("".concat(location.pathname, "?category=").concat(category, "&site=").concat(siteId));
+    }
   };
   var handleCloseDetails = function handleCloseDetails() {
     setSelectedSiteId(null);
     setMoveDistance(0);
+    var category = query.get('category');
+    history.replace("".concat(location.pathname, "?category=").concat(category));
   };
   var expandSideBar = function expandSideBar() {
     var element = document.getElementById('sideSlider');
@@ -84,6 +93,13 @@ var SitesAuthSettingsUI = function SitesAuthSettingsUI(props) {
       });
     }
   }, [actionState.error]);
+  (0, _react.useEffect)(function () {
+    if (sitesState.loading) return;
+    var site = query.get('site');
+    if (site) {
+      handleOpenSiteSettingDetails(Number(site), true);
+    }
+  }, [sitesState.loading]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.SitesListContainer, null, /*#__PURE__*/_react.default.createElement(_styles.Header, null, /*#__PURE__*/_react.default.createElement("h1", null, t('SITES_LOGIN_SIGNUP_SETTINGS', 'Sites Login/Signup Settings')), width > 576 && !selectedSiteId && /*#__PURE__*/_react.default.createElement(_styles2.IconButton, {
     color: "black",
     onClick: expandSideBar

package/_modules/components/SidebarMenu/index.js

@@ -198,7 +198,6 @@ var SidebarMenuUI = function SidebarMenuUI(props) {
     pageName: 'professionals',
     url: '/users/professionals'
   }];
-  var buisnessOwnerUsersMenuIncluded = [3];
   var settingsSubMenus = [{
     id: 1,
     title: t('BASIC_SETTINGS', 'Basic settings'),

package/_modules/components/Stores/BusinessAdd/BusinessDetails/index.js

@@ -17,7 +17,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 BusinessDetails = function BusinessDetails(props) {
-  var _configs$google_maps_, _formState$changes$na, _formState$changes, _formState$changes$ad, _formState$changes2, _configs$country_auto, _formState$changes$zi, _formState$changes3, _configs$google_maps_2, _configs$google_maps_3, _formState$changes$lo, _formState$changes4, _formState$changes$ce, _formState$changes5;
+  var _configs$google_maps_, _formState$changes$na, _formState$changes, _formState$changes$ad, _formState$changes2, _configs$country_auto, _configs$google_maps_2, _configs$google_maps_3, _formState$changes$lo, _formState$changes3, _formState$changes$ce, _formState$changes4;
   var formState = props.formState,
     handleChangeAddress = props.handleChangeAddress,
     handleChangeInput = props.handleChangeInput,
@@ -46,7 +46,7 @@ var BusinessDetails = function BusinessDetails(props) {
     lat: 40.77473399999999,
     lng: -73.9653844
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.BusinessDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('BUSINESS_DETAILS', 'Business details')), /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('BUSINESS_NAME', 'Business Name')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
+  return /*#__PURE__*/_react.default.createElement(_styles.BusinessDetailsContainer, null, /*#__PURE__*/_react.default.createElement("h2", null, t('BUSINESS_DETAILS', 'Business details')), /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('BUSINESS_NAME', 'Business Name'), /*#__PURE__*/_react.default.createElement("sup", null, "*")), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
     name: "name",
     placeholder: t('NAME', 'Name'),
     value: (_formState$changes$na = formState === null || formState === void 0 ? void 0 : (_formState$changes = formState.changes) === null || _formState$changes === void 0 ? void 0 : _formState$changes.name) !== null && _formState$changes$na !== void 0 ? _formState$changes$na : '',
@@ -73,14 +73,9 @@ var BusinessDetails = function BusinessDetails(props) {
     defaultValue: (_formState$changes$ad = formState === null || formState === void 0 ? void 0 : (_formState$changes2 = formState.changes) === null || _formState$changes2 === void 0 ? void 0 : _formState$changes2.address) !== null && _formState$changes$ad !== void 0 ? _formState$changes$ad : '',
     autoComplete: "new-password",
     countryCode: (configs === null || configs === void 0 ? void 0 : (_configs$country_auto = configs.country_autocomplete) === null || _configs$country_auto === void 0 ? void 0 : _configs$country_auto.value) || '*'
-  })), /*#__PURE__*/_react.default.createElement(_styles.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('ZIPCODE', 'Zipcode')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
-    name: "zipcode",
-    placeholder: t('ZIPCODE', 'Zipcode'),
-    defaultValue: (_formState$changes$zi = formState === null || formState === void 0 ? void 0 : (_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : _formState$changes3.zipcode) !== null && _formState$changes$zi !== void 0 ? _formState$changes$zi : '',
-    onChange: handleChangeInput
   })), /*#__PURE__*/_react.default.createElement(_styles.GoogleMapContainer, null, /*#__PURE__*/_react.default.createElement("label", null, t('GOOGLE_PLACE_ID', 'Google place ID')), /*#__PURE__*/_react.default.createElement("p", null, placeId !== null && placeId !== void 0 ? placeId : googleMapsApiKey), (configs === null || configs === void 0 ? void 0 : (_configs$google_maps_2 = configs.google_maps_api_key) === null || _configs$google_maps_2 === void 0 ? void 0 : _configs$google_maps_2.value) && /*#__PURE__*/_react.default.createElement(_styles.WrapperMap, null, /*#__PURE__*/_react.default.createElement(_orderingComponentsAdminExternal.GoogleMapsMap, {
     apiKey: configs === null || configs === void 0 ? void 0 : (_configs$google_maps_3 = configs.google_maps_api_key) === null || _configs$google_maps_3 === void 0 ? void 0 : _configs$google_maps_3.value,
-    location: (_formState$changes$lo = formState === null || formState === void 0 ? void 0 : (_formState$changes4 = formState.changes) === null || _formState$changes4 === void 0 ? void 0 : _formState$changes4.location) !== null && _formState$changes$lo !== void 0 ? _formState$changes$lo : defaultPosition,
+    location: (_formState$changes$lo = formState === null || formState === void 0 ? void 0 : (_formState$changes3 = formState.changes) === null || _formState$changes3 === void 0 ? void 0 : _formState$changes3.location) !== null && _formState$changes$lo !== void 0 ? _formState$changes$lo : defaultPosition,
     mapControls: googleMapsControls,
     handleChangeCenter: handleChangeCenter,
     isFitCenter: true
@@ -89,7 +84,7 @@ var BusinessDetails = function BusinessDetails(props) {
   }, /*#__PURE__*/_react.default.createElement("label", null, t('PHONE_NUMBER', 'Phone number')), /*#__PURE__*/_react.default.createElement(_styles2.Input, {
     name: "cellphone",
     placeholder: t('PHONE_NUMBER', 'Phone number'),
-    value: (_formState$changes$ce = formState === null || formState === void 0 ? void 0 : (_formState$changes5 = formState.changes) === null || _formState$changes5 === void 0 ? void 0 : _formState$changes5.cellphone) !== null && _formState$changes$ce !== void 0 ? _formState$changes$ce : '',
+    value: (_formState$changes$ce = formState === null || formState === void 0 ? void 0 : (_formState$changes4 = formState.changes) === null || _formState$changes4 === void 0 ? void 0 : _formState$changes4.cellphone) !== null && _formState$changes$ce !== void 0 ? _formState$changes$ce : '',
     onChange: handleChangeInput
   }))));
 };

package/_modules/components/Stores/BusinessAdd/BusinessDetails/styles.js

@@ -15,7 +15,9 @@ var BusinessDetailsContainer = _styledComponents.default.div(_templateObject ||
 exports.BusinessDetailsContainer = BusinessDetailsContainer;
 var ContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: 23px;\n"])));
 exports.ContentWrapper = ContentWrapper;
-var FormControl = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: 23px;\n  label {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-bottom: 12px;\n  }\n  input {\n    width: 100%;\n    height: 44px;\n  }\n  .input-autocomplete {\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: 8px;\n    font-size: 14px;\n    padding: 10px 15px;\n    outline: none;\n    ::placeholder {\n      color: ", ";\n    }\n\n    &:-ms-input-placeholder {\n      color: ", ";\n    }\n\n    &::-ms-input-placeholder { /* Microsoft Edge */\n      color: ", ";\n    }\n    &:focus {\n      border-color: ", ";\n    }\n  }\n\n  ", "\n"])), function (props) {
+var FormControl = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-bottom: 23px;\n  label {\n    font-weight: 400;\n    font-size: 14px;\n    line-height: 24px;\n    margin-bottom: 12px;\n    sup {\n      color: ", ";\n      font-size: 13px;\n    }\n  }\n  input {\n    width: 100%;\n    height: 44px;\n  }\n  .input-autocomplete {\n    width: 100%;\n    background: ", ";\n    border: 1px solid ", ";\n    border-radius: 8px;\n    font-size: 14px;\n    padding: 10px 15px;\n    outline: none;\n    ::placeholder {\n      color: ", ";\n    }\n\n    &:-ms-input-placeholder {\n      color: ", ";\n    }\n\n    &::-ms-input-placeholder { /* Microsoft Edge */\n      color: ", ";\n    }\n    &:focus {\n      border-color: ", ";\n    }\n  }\n\n  ", "\n"])), function (props) {
+  return props.theme.colors.danger;
+}, function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 }, function (props) {

package/_modules/components/Stores/BusinessAdd/DeliveryZone/index.js

@@ -11,6 +11,7 @@ var _FirstSelect = require("../../../../styles/Select/FirstSelect");
 var _styles = require("../../../../styles");
 var _Shared = require("../../../Shared");
 var _styles2 = require("./styles");
+var _reactBootstrapIcons = require("react-bootstrap-icons");
 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -61,6 +62,10 @@ var DeliveryZone = function DeliveryZone(props) {
     _useState12 = _slicedToArray(_useState11, 2),
     isShowMap = _useState12[0],
     setIsShowMap = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    hasContent = _useState14[0],
+    setHasContent = _useState14[1];
   // const kmlRef = useRef(null)
 
   var typeOptions = [{
@@ -154,9 +159,13 @@ var DeliveryZone = function DeliveryZone(props) {
   (0, _react.useEffect)(function () {
     if (zoneType === 4) setIsShowMap(false);else setIsShowMap(true);
   }, [zoneType]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.DeliveryZoneContainer, {
-    autoComplete: "off"
-  }, /*#__PURE__*/_react.default.createElement("h2", null, t('LETS_CREATE_YOUR_FIRST_DELIVERY_ZONE', 'Let’s create your first Delivery Zone')), /*#__PURE__*/_react.default.createElement(_styles2.Row, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles2.DeliveryZoneContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Header, {
+    onClick: function onClick() {
+      return setHasContent(function (prev) {
+        return !prev;
+      });
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, t('LETS_CREATE_YOUR_FIRST_DELIVERY_ZONE', 'Let’s create your first Delivery Zone')), /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.CaretDownFill, null)), hasContent && /*#__PURE__*/_react.default.createElement(_styles2.DeliveryZoneInnerContainer, null, /*#__PURE__*/_react.default.createElement(_styles2.Row, null, /*#__PURE__*/_react.default.createElement(_styles2.FormControl, null, /*#__PURE__*/_react.default.createElement("label", null, t('NAME', 'Name')), /*#__PURE__*/_react.default.createElement(_styles.Input, {
     placeholder: t('NAME', 'Name'),
     name: "name",
     value: (_zoneState$name = zoneState === null || zoneState === void 0 ? void 0 : zoneState.name) !== null && _zoneState$name !== void 0 ? _zoneState$name : '',
@@ -216,7 +225,7 @@ var DeliveryZone = function DeliveryZone(props) {
     infoContentString: infoContentString,
     greenFillStyle: greenFillStyle,
     kmlData: kmlData
-  })) : /*#__PURE__*/_react.default.createElement(_styles2.ErrorText, null, t('REQUIRED_GOOGLE_MAP_API_KEY', 'Google Maps api key is required')))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
+  })) : /*#__PURE__*/_react.default.createElement(_styles2.ErrorText, null, t('REQUIRED_GOOGLE_MAP_API_KEY', 'Google Maps api key is required'))))), /*#__PURE__*/_react.default.createElement(_Shared.Alert, {
     title: t('WEB_APPNAME', 'Ordering'),
     content: alertState.content,
     acceptText: t('ACCEPT', 'Accept'),

package/_modules/components/Stores/BusinessAdd/DeliveryZone/styles.js

@@ -4,37 +4,43 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperMap = exports.TypeSelectWrapper = exports.Row = exports.KmlButtonWrapper = exports.FormControl = exports.ErrorText = exports.DeliveryZoneContainer = void 0;
+exports.WrapperMap = exports.TypeSelectWrapper = exports.Row = exports.KmlButtonWrapper = exports.Header = exports.FormControl = exports.ErrorText = exports.DeliveryZoneInnerContainer = exports.DeliveryZoneContainer = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 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 DeliveryZoneContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: calc(100% - 130px);\n\n  h2 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin-bottom: 23px;\n  }\n"])));
+var DeliveryZoneContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: ", ";\n  border-radius: 7.6px;\n  padding: 25px 0px;\n  margin-bottom: 35px;\n\n  @media (min-width: 450px) {\n    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);\n    padding: 25px 35px;\n  }\n"])), function (props) {
+  return props.theme.colors.white;
+});
 exports.DeliveryZoneContainer = DeliveryZoneContainer;
-var TypeSelectWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .select {\n    background: ", ";\n    width: 100%;\n    border: none;\n    font-size: 14px;\n    color: ", ";\n    > div:first-child {\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n"])), function (props) {
+var DeliveryZoneInnerContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  min-height: calc(100% - 130px);\n  width: 100%;\n  max-width: 558px;\n  margin-top: 23px;\n"])));
+exports.DeliveryZoneInnerContainer = DeliveryZoneInnerContainer;
+var Header = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  h2 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin: 0;\n  }\n"])));
+exports.Header = Header;
+var TypeSelectWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  .select {\n    background: ", ";\n    width: 100%;\n    border: none;\n    font-size: 14px;\n    color: ", ";\n    > div:first-child {\n      padding-top: 4px;\n      padding-bottom: 4px;\n    }\n  }\n"])), function (props) {
   return props.theme.colors.secundary;
 }, function (props) {
   return props.theme.colors.headingColor;
 });
 exports.TypeSelectWrapper = TypeSelectWrapper;
-var WrapperMap = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 29px 0 20px 0;\n  position: relative;\n  > div {\n    position: relative !important; \n    width: 100% !important;\n    height: 100% !important;\n    border-radius: 8px;\n  }\n\n  > button {\n    position: absolute;\n    font-size: 14px;\n    padding: 0 5px;\n    background: ", ";\n    top: 10px;\n    z-index: 10;\n    border: none;\n    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px;\n    color: ", ";\n    ", "\n    &:hover {\n      background: #eee;\n    }\n  }\n"])), function (props) {
+var WrapperMap = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 300px;\n  display: flex;\n  justify-content: center;\n  box-sizing: border-box;\n  margin: 29px 0 20px 0;\n  position: relative;\n  > div {\n    position: relative !important; \n    width: 100% !important;\n    height: 100% !important;\n    border-radius: 8px;\n  }\n\n  > button {\n    position: absolute;\n    font-size: 14px;\n    padding: 0 5px;\n    background: ", ";\n    top: 10px;\n    z-index: 10;\n    border: none;\n    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px;\n    color: ", ";\n    ", "\n    &:hover {\n      background: #eee;\n    }\n  }\n"])), function (props) {
   var _props$theme$colors;
   return ((_props$theme$colors = props.theme.colors) === null || _props$theme$colors === void 0 ? void 0 : _props$theme$colors.backgroundPage) || '#FFF';
 }, function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   var _props$theme;
-  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      left: 10px;\n    "])));
+  return (_props$theme = props.theme) !== null && _props$theme !== void 0 && _props$theme.rtl ? (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      right: 10px;\n    "]))) : (0, _styledComponents.css)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      left: 10px;\n    "])));
 });
 exports.WrapperMap = WrapperMap;
-var ErrorText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  color: ", ";\n  text-align: center;\n  margin: 20px 0;\n"])), function (props) {
+var ErrorText = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: 14px;\n  color: ", ";\n  text-align: center;\n  margin: 20px 0;\n"])), function (props) {
   return props.theme.colors.lightGray;
 });
 exports.ErrorText = ErrorText;
-var FormControl = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  label {\n    font-size: 14px;\n    margin-bottom: 9px;\n  }\n  input {\n    width: 100%;\n  }\n"])));
+var FormControl = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  label {\n    font-size: 14px;\n    margin-bottom: 9px;\n  }\n  input {\n    width: 100%;\n  }\n"])));
 exports.FormControl = FormControl;
-var Row = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n\n  > div {\n    width: 100%;\n    margin-bottom: 29px;\n  }\n  @media (min-width: 576px) {\n    flex-direction: row;\n    > div {\n      width: 45%;\n    }\n  }\n"])));
+var Row = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n\n  > div {\n    width: 100%;\n    margin-bottom: 29px;\n  }\n  @media (min-width: 576px) {\n    flex-direction: row;\n    > div {\n      width: 45%;\n    }\n  }\n"])));
 exports.Row = Row;
-var KmlButtonWrapper = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 20px 0px;\n"])));
+var KmlButtonWrapper = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin: 20px 0px;\n"])));
 exports.KmlButtonWrapper = KmlButtonWrapper;

package/_modules/components/Stores/BusinessAdd/PaymentMethods/index.js

@@ -1,14 +1,16 @@
 "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.PaymentMethods = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _orderingComponentsAdminExternal = require("ordering-components-admin-external");
 var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styles = require("./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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -33,7 +35,13 @@ var PaymentMethods = function PaymentMethods(props) {
     });else updateIds = [].concat(_toConsumableArray(paymethodIds), [id]);
     handleChangePaymethodIds(updateIds);
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("h2", null, t('PAYMENT_METHODS', 'Payment methods')), /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, !(paymethodsList !== null && paymethodsList !== void 0 && paymethodsList.loading) && (paymethodsList === null || paymethodsList === void 0 ? void 0 : paymethodsList.paymethods.map(function (paymethod, idx) {
+  (0, _react.useEffect)(function () {
+    var _paymethodsList$payme;
+    if (!(paymethodsList !== null && paymethodsList !== void 0 && paymethodsList.loading) && (paymethodsList === null || paymethodsList === void 0 ? void 0 : (_paymethodsList$payme = paymethodsList.paymethods) === null || _paymethodsList$payme === void 0 ? void 0 : _paymethodsList$payme.length) > 0) {
+      handleChangeIds(paymethodsList === null || paymethodsList === void 0 ? void 0 : paymethodsList.paymethods[0].id);
+    }
+  }, [paymethodsList]);
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, null, /*#__PURE__*/_react.default.createElement("h2", null, t('PAYMENT_METHODS', 'Payment methods'), /*#__PURE__*/_react.default.createElement("sup", null, "*")), /*#__PURE__*/_react.default.createElement(_styles.ContentWrapper, null, !(paymethodsList !== null && paymethodsList !== void 0 && paymethodsList.loading) && (paymethodsList === null || paymethodsList === void 0 ? void 0 : paymethodsList.paymethods.map(function (paymethod, idx) {
     return /*#__PURE__*/_react.default.createElement(_styles.PaymethodItem, {
       key: paymethod === null || paymethod === void 0 ? void 0 : paymethod.id,
       isBorderTop: idx === 0,

package/_modules/components/Stores/BusinessAdd/PaymentMethods/styles.js

@@ -10,7 +10,9 @@ 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  h2 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 25px;\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  h2 {\n    font-weight: 600;\n    font-size: 16px;\n    line-height: 24px;\n    margin-top: 0;\n    margin-bottom: 25px;\n    sup {\n      color: ", ";\n      font-size: 13px;\n    }\n  }\n"])), function (props) {
+  return props.theme.colors.danger;
+});
 exports.Container = Container;
 var ContentWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: auto;\n  max-height: 500px;\n"])));
 exports.ContentWrapper = ContentWrapper;