ordering-ui-external 2.6.7 → 2.6.8

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

@@ -6,18 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BusinessBasicInformation = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
-var _reactBootstrapIcons = require("react-bootstrap-icons");
 var _styledComponents = require("styled-components");
 var _Modal = require("../Modal");
 var _BusinessInformation = require("../BusinessInformation");
 var _BusinessReviews = require("../BusinessReviews");
 var _BsInfoCircle = _interopRequireDefault(require("@meronex/icons/bs/BsInfoCircle"));
 var _orderingComponentsExternal = require("ordering-components-external");
-var _utils = require("../../../../../utils");
-var _Select = require("../../styles/Select");
 var _MomentContent = require("../MomentContent");
-var _CgSearch = _interopRequireDefault(require("@meronex/icons/cg/CgSearch"));
 var _SearchProducts = require("../SearchProducts");
 var _SearchProducts2 = require("../../../../six/src/components/BusinessProductsListing/SearchProducts");
 var _styles = require("./styles");
@@ -26,14 +21,12 @@ var _dayjs = _interopRequireDefault(require("dayjs"));
 var _timezone = _interopRequireDefault(require("dayjs/plugin/timezone"));
 var _isBetween = _interopRequireDefault(require("dayjs/plugin/isBetween"));
 var _useWindowSize = require("../../../../../hooks/useWindowSize");
+var _BusinessInfoComponent = require("./BusinessInfoComponent");
+var _SearchComponent = require("./SearchComponent");
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -44,7 +37,7 @@ _dayjs.default.extend(_timezone.default);
 _dayjs.default.extend(_isBetween.default);
 var types = ['food', 'laundry', 'alcohol', 'groceries'];
 var BusinessBasicInformation = function BusinessBasicInformation(props) {
-  var _configs$preorder_sta, _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _theme$business_view$6, _theme$business_view2, _theme$business_view3, _theme$business_view4, _theme$business_view5, _theme$business_view6, _theme$business_view7, _theme$business_view8, _theme$business_view9, _theme$business_view10, _theme$business_view11, _theme$business_view12, _theme$business_view13, _theme$business_view14, _theme$business_view15, _theme$business_view16, _theme$business_view17, _theme$business_view18, _theme$business_view19, _theme$business_view20, _theme$business_view21, _theme$business_view22, _theme$business_view23, _theme$business_view24, _theme$business_view25, _theme$business_view26, _theme$business_view27, _theme$business_view28, _theme$business_view29, _theme$business_view30, _theme$business_view31, _theme$business_view32, _theme$business_view33, _theme$business_view34, _theme$business_view35, _theme$business_view36, _theme$business_view37, _theme$business_view38, _theme$business_view39, _theme$business_view40, _theme$business_view41, _theme$business_view42, _theme$business_view43, _theme$business_view44, _theme$business_view45, _theme$business_view46, _theme$business_view47, _theme$business_view48, _theme$business_view49, _theme$business_view50, _theme$business_view51, _theme$business_view52, _theme$business_view53, _theme$business_view54, _theme$business_view55, _theme$business_view56, _theme$business_view57, _theme$business_view58, _theme$business_view59, _theme$business_view60, _theme$business_view61, _theme$business_view62, _theme$business_view63, _theme$business_view64, _theme$business_view65, _theme$business_view66, _theme$business_view67, _theme$header, _theme$header$compone, _theme$header$compone2, _theme$header$compone3, _theme$business_view68, _theme$business_view69, _theme$business_view70, _theme$business_view71, _theme$business_view72, _props$beforeElements, _props$beforeComponen, _business$reviews3, _business$reviews4, _props$afterComponent, _props$afterElements;
+  var _theme$business_view, _theme$business_view$, _theme$business_view$2, _theme$business_view$3, _theme$business_view$4, _theme$business_view$5, _theme$business_view$6, _theme$business_view2, _theme$business_view3, _theme$business_view4, _theme$business_view5, _theme$business_view6, _theme$business_view7, _theme$business_view8, _theme$business_view9, _theme$business_view10, _theme$business_view11, _theme$business_view12, _theme$business_view13, _theme$business_view14, _theme$business_view15, _theme$business_view16, _theme$business_view17, _theme$business_view18, _theme$business_view19, _theme$business_view20, _theme$header, _theme$header$compone, _theme$header$compone2, _theme$header$compone3, _props$beforeElements, _props$beforeComponen, _business$reviews, _business$reviews2, _props$afterComponent, _props$afterElements;
   var isSkeleton = props.isSkeleton,
     businessState = props.businessState,
     setOpenBusinessInformation = props.setOpenBusinessInformation,
@@ -56,22 +49,17 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     handleChangeSortBy = props.handleChangeSortBy,
     categoryState = props.categoryState,
     errorQuantityProducts = props.errorQuantityProducts,
-    isCustomerMode = props.isCustomerMode;
+    isCustomerMode = props.isCustomerMode,
+    isCustomLayout = props.isCustomLayout;
   var business = businessState.business,
     loading = businessState.loading;
   var theme = (0, _styledComponents.useTheme)();
-  var _useOrder = (0, _orderingComponentsExternal.useOrder)(),
-    _useOrder2 = _slicedToArray(_useOrder, 1),
-    orderState = _useOrder2[0];
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
   var _useUtils = (0, _orderingComponentsExternal.useUtils)(),
     _useUtils2 = _slicedToArray(_useUtils, 1),
-    _useUtils2$ = _useUtils2[0],
-    parsePrice = _useUtils2$.parsePrice,
-    parseDistance = _useUtils2$.parseDistance,
-    optimizeImage = _useUtils2$.optimizeImage;
+    optimizeImage = _useUtils2[0].optimizeImage;
   var windowSize = (0, _useWindowSize.useWindowSize)();
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -85,24 +73,28 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     _useState6 = _slicedToArray(_useState5, 2),
     openSearchProducts = _useState6[0],
     setOpenSearchProducts = _useState6[1];
-  var _useConfig = (0, _orderingComponentsExternal.useConfig)(),
-    _useConfig2 = _slicedToArray(_useConfig, 1),
-    configs = _useConfig2[0].configs;
-  var isPreOrderSetting = (configs === null || configs === void 0 ? void 0 : (_configs$preorder_sta = configs.preorder_status_enabled) === null || _configs$preorder_sta === void 0 ? void 0 : _configs$preorder_sta.value) === '1';
   var hideLogo = theme === null || theme === void 0 ? void 0 : (_theme$business_view = theme.business_view) === null || _theme$business_view === void 0 ? void 0 : (_theme$business_view$ = _theme$business_view.components) === null || _theme$business_view$ === void 0 ? void 0 : (_theme$business_view$2 = _theme$business_view$.header) === null || _theme$business_view$2 === void 0 ? void 0 : (_theme$business_view$3 = _theme$business_view$2.components) === null || _theme$business_view$3 === void 0 ? void 0 : (_theme$business_view$4 = _theme$business_view$3.business) === null || _theme$business_view$4 === void 0 ? void 0 : (_theme$business_view$5 = _theme$business_view$4.components) === null || _theme$business_view$5 === void 0 ? void 0 : (_theme$business_view$6 = _theme$business_view$5.logo) === null || _theme$business_view$6 === void 0 ? void 0 : _theme$business_view$6.hidden;
-  var hideDeliveryFee = theme === null || theme === void 0 ? void 0 : (_theme$business_view2 = theme.business_view) === null || _theme$business_view2 === void 0 ? void 0 : (_theme$business_view3 = _theme$business_view2.components) === null || _theme$business_view3 === void 0 ? void 0 : (_theme$business_view4 = _theme$business_view3.header) === null || _theme$business_view4 === void 0 ? void 0 : (_theme$business_view5 = _theme$business_view4.components) === null || _theme$business_view5 === void 0 ? void 0 : (_theme$business_view6 = _theme$business_view5.business) === null || _theme$business_view6 === void 0 ? void 0 : (_theme$business_view7 = _theme$business_view6.components) === null || _theme$business_view7 === void 0 ? void 0 : (_theme$business_view8 = _theme$business_view7.fee) === null || _theme$business_view8 === void 0 ? void 0 : _theme$business_view8.hidden;
-  var hideTime = theme === null || theme === void 0 ? void 0 : (_theme$business_view9 = theme.business_view) === null || _theme$business_view9 === void 0 ? void 0 : (_theme$business_view10 = _theme$business_view9.components) === null || _theme$business_view10 === void 0 ? void 0 : (_theme$business_view11 = _theme$business_view10.header) === null || _theme$business_view11 === void 0 ? void 0 : (_theme$business_view12 = _theme$business_view11.components) === null || _theme$business_view12 === void 0 ? void 0 : (_theme$business_view13 = _theme$business_view12.business) === null || _theme$business_view13 === void 0 ? void 0 : (_theme$business_view14 = _theme$business_view13.components) === null || _theme$business_view14 === void 0 ? void 0 : (_theme$business_view15 = _theme$business_view14.time) === null || _theme$business_view15 === void 0 ? void 0 : _theme$business_view15.hidden;
-  var hideReviews = theme === null || theme === void 0 ? void 0 : (_theme$business_view16 = theme.business_view) === null || _theme$business_view16 === void 0 ? void 0 : (_theme$business_view17 = _theme$business_view16.components) === null || _theme$business_view17 === void 0 ? void 0 : (_theme$business_view18 = _theme$business_view17.header) === null || _theme$business_view18 === void 0 ? void 0 : (_theme$business_view19 = _theme$business_view18.components) === null || _theme$business_view19 === void 0 ? void 0 : (_theme$business_view20 = _theme$business_view19.business) === null || _theme$business_view20 === void 0 ? void 0 : (_theme$business_view21 = _theme$business_view20.components) === null || _theme$business_view21 === void 0 ? void 0 : (_theme$business_view22 = _theme$business_view21.reviews) === null || _theme$business_view22 === void 0 ? void 0 : _theme$business_view22.hidden;
-  var hideReviewsPopup = theme === null || theme === void 0 ? void 0 : (_theme$business_view23 = theme.business_view) === null || _theme$business_view23 === void 0 ? void 0 : (_theme$business_view24 = _theme$business_view23.components) === null || _theme$business_view24 === void 0 ? void 0 : (_theme$business_view25 = _theme$business_view24.header) === null || _theme$business_view25 === void 0 ? void 0 : (_theme$business_view26 = _theme$business_view25.components) === null || _theme$business_view26 === void 0 ? void 0 : (_theme$business_view27 = _theme$business_view26.reviews) === null || _theme$business_view27 === void 0 ? void 0 : _theme$business_view27.hidden;
-  var hideDistance = theme === null || theme === void 0 ? void 0 : (_theme$business_view28 = theme.business_view) === null || _theme$business_view28 === void 0 ? void 0 : (_theme$business_view29 = _theme$business_view28.components) === null || _theme$business_view29 === void 0 ? void 0 : (_theme$business_view30 = _theme$business_view29.header) === null || _theme$business_view30 === void 0 ? void 0 : (_theme$business_view31 = _theme$business_view30.components) === null || _theme$business_view31 === void 0 ? void 0 : (_theme$business_view32 = _theme$business_view31.business) === null || _theme$business_view32 === void 0 ? void 0 : (_theme$business_view33 = _theme$business_view32.components) === null || _theme$business_view33 === void 0 ? void 0 : (_theme$business_view34 = _theme$business_view33.distance) === null || _theme$business_view34 === void 0 ? void 0 : _theme$business_view34.hidden;
-  var hideSort = theme === null || theme === void 0 ? void 0 : (_theme$business_view35 = theme.business_view) === null || _theme$business_view35 === void 0 ? void 0 : (_theme$business_view36 = _theme$business_view35.components) === null || _theme$business_view36 === void 0 ? void 0 : (_theme$business_view37 = _theme$business_view36.header) === null || _theme$business_view37 === void 0 ? void 0 : (_theme$business_view38 = _theme$business_view37.components) === null || _theme$business_view38 === void 0 ? void 0 : (_theme$business_view39 = _theme$business_view38.business) === null || _theme$business_view39 === void 0 ? void 0 : (_theme$business_view40 = _theme$business_view39.components) === null || _theme$business_view40 === void 0 ? void 0 : (_theme$business_view41 = _theme$business_view40.sort) === null || _theme$business_view41 === void 0 ? void 0 : _theme$business_view41.hidden;
-  var hideInfoIcon = theme === null || theme === void 0 ? void 0 : (_theme$business_view42 = theme.business_view) === null || _theme$business_view42 === void 0 ? void 0 : (_theme$business_view43 = _theme$business_view42.components) === null || _theme$business_view43 === void 0 ? void 0 : (_theme$business_view44 = _theme$business_view43.header) === null || _theme$business_view44 === void 0 ? void 0 : (_theme$business_view45 = _theme$business_view44.components) === null || _theme$business_view45 === void 0 ? void 0 : (_theme$business_view46 = _theme$business_view45.business) === null || _theme$business_view46 === void 0 ? void 0 : (_theme$business_view47 = _theme$business_view46.components) === null || _theme$business_view47 === void 0 ? void 0 : (_theme$business_view48 = _theme$business_view47.business_info) === null || _theme$business_view48 === void 0 ? void 0 : _theme$business_view48.hidden;
-  var isInfoShrunken = (theme === null || theme === void 0 ? void 0 : (_theme$business_view49 = theme.business_view) === null || _theme$business_view49 === void 0 ? void 0 : (_theme$business_view50 = _theme$business_view49.components) === null || _theme$business_view50 === void 0 ? void 0 : (_theme$business_view51 = _theme$business_view50.header) === null || _theme$business_view51 === void 0 ? void 0 : (_theme$business_view52 = _theme$business_view51.components) === null || _theme$business_view52 === void 0 ? void 0 : (_theme$business_view53 = _theme$business_view52.business) === null || _theme$business_view53 === void 0 ? void 0 : (_theme$business_view54 = _theme$business_view53.components) === null || _theme$business_view54 === void 0 ? void 0 : (_theme$business_view55 = _theme$business_view54.layout) === null || _theme$business_view55 === void 0 ? void 0 : _theme$business_view55.position) === 'shrunken';
-  var searchLayout = theme === null || theme === void 0 ? void 0 : (_theme$business_view56 = theme.business_view) === null || _theme$business_view56 === void 0 ? void 0 : (_theme$business_view57 = _theme$business_view56.components) === null || _theme$business_view57 === void 0 ? void 0 : (_theme$business_view58 = _theme$business_view57.product_search) === null || _theme$business_view58 === void 0 ? void 0 : (_theme$business_view59 = _theme$business_view58.components) === null || _theme$business_view59 === void 0 ? void 0 : (_theme$business_view60 = _theme$business_view59.layout) === null || _theme$business_view60 === void 0 ? void 0 : _theme$business_view60.type;
-  var hideCity = theme === null || theme === void 0 ? void 0 : (_theme$business_view61 = theme.business_view) === null || _theme$business_view61 === void 0 ? void 0 : (_theme$business_view62 = _theme$business_view61.components) === null || _theme$business_view62 === void 0 ? void 0 : (_theme$business_view63 = _theme$business_view62.header) === null || _theme$business_view63 === void 0 ? void 0 : (_theme$business_view64 = _theme$business_view63.components) === null || _theme$business_view64 === void 0 ? void 0 : (_theme$business_view65 = _theme$business_view64.business) === null || _theme$business_view65 === void 0 ? void 0 : (_theme$business_view66 = _theme$business_view65.components) === null || _theme$business_view66 === void 0 ? void 0 : (_theme$business_view67 = _theme$business_view66.city) === null || _theme$business_view67 === void 0 ? void 0 : _theme$business_view67.hidden;
+  var hideInfoIcon = theme === null || theme === void 0 ? void 0 : (_theme$business_view2 = theme.business_view) === null || _theme$business_view2 === void 0 ? void 0 : (_theme$business_view3 = _theme$business_view2.components) === null || _theme$business_view3 === void 0 ? void 0 : (_theme$business_view4 = _theme$business_view3.header) === null || _theme$business_view4 === void 0 ? void 0 : (_theme$business_view5 = _theme$business_view4.components) === null || _theme$business_view5 === void 0 ? void 0 : (_theme$business_view6 = _theme$business_view5.business) === null || _theme$business_view6 === void 0 ? void 0 : (_theme$business_view7 = _theme$business_view6.components) === null || _theme$business_view7 === void 0 ? void 0 : (_theme$business_view8 = _theme$business_view7.business_info) === null || _theme$business_view8 === void 0 ? void 0 : _theme$business_view8.hidden;
+  var isInfoShrunken = (theme === null || theme === void 0 ? void 0 : (_theme$business_view9 = theme.business_view) === null || _theme$business_view9 === void 0 ? void 0 : (_theme$business_view10 = _theme$business_view9.components) === null || _theme$business_view10 === void 0 ? void 0 : (_theme$business_view11 = _theme$business_view10.header) === null || _theme$business_view11 === void 0 ? void 0 : (_theme$business_view12 = _theme$business_view11.components) === null || _theme$business_view12 === void 0 ? void 0 : (_theme$business_view13 = _theme$business_view12.business) === null || _theme$business_view13 === void 0 ? void 0 : (_theme$business_view14 = _theme$business_view13.components) === null || _theme$business_view14 === void 0 ? void 0 : (_theme$business_view15 = _theme$business_view14.layout) === null || _theme$business_view15 === void 0 ? void 0 : _theme$business_view15.position) === 'shrunken';
+  var searchLayout = theme === null || theme === void 0 ? void 0 : (_theme$business_view16 = theme.business_view) === null || _theme$business_view16 === void 0 ? void 0 : (_theme$business_view17 = _theme$business_view16.components) === null || _theme$business_view17 === void 0 ? void 0 : (_theme$business_view18 = _theme$business_view17.product_search) === null || _theme$business_view18 === void 0 ? void 0 : (_theme$business_view19 = _theme$business_view18.components) === null || _theme$business_view19 === void 0 ? void 0 : (_theme$business_view20 = _theme$business_view19.layout) === null || _theme$business_view20 === void 0 ? void 0 : _theme$business_view20.type;
   var isChew = (theme === null || theme === void 0 ? void 0 : (_theme$header = theme.header) === null || _theme$header === void 0 ? void 0 : (_theme$header$compone = _theme$header.components) === null || _theme$header$compone === void 0 ? void 0 : (_theme$header$compone2 = _theme$header$compone.layout) === null || _theme$header$compone2 === void 0 ? void 0 : (_theme$header$compone3 = _theme$header$compone2.type) === null || _theme$header$compone3 === void 0 ? void 0 : _theme$header$compone3.toLowerCase()) === 'chew';
-  var layoutsWithOldSearch = ['starbucks', 'old', 'floating'];
-  var hideSearch = layoutsWithOldSearch.includes(theme === null || theme === void 0 ? void 0 : (_theme$business_view68 = theme.business_view) === null || _theme$business_view68 === void 0 ? void 0 : (_theme$business_view69 = _theme$business_view68.components) === null || _theme$business_view69 === void 0 ? void 0 : (_theme$business_view70 = _theme$business_view69.product_search) === null || _theme$business_view70 === void 0 ? void 0 : (_theme$business_view71 = _theme$business_view70.components) === null || _theme$business_view71 === void 0 ? void 0 : (_theme$business_view72 = _theme$business_view71.layout) === null || _theme$business_view72 === void 0 ? void 0 : _theme$business_view72.type);
+  var businessInfoComponentProps = {
+    isChew: isChew,
+    loading: loading,
+    business: business,
+    isInfoShrunken: isInfoShrunken,
+    isCustomerMode: isCustomerMode,
+    setIsPreOrder: setIsPreOrder,
+    setIsBusinessReviews: setIsBusinessReviews,
+    categoryState: categoryState,
+    searchValue: searchValue,
+    errorQuantityProducts: errorQuantityProducts,
+    setOpenSearchProducts: setOpenSearchProducts,
+    handleChangeSortBy: handleChangeSortBy,
+    sortByValue: sortByValue,
+    sortByOptions: sortByOptions,
+    isCustomLayout: isCustomLayout
+  };
   var getBusinessType = function getBusinessType() {
     if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
     var _types = [];
@@ -174,124 +166,6 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
       left: 0
     });
   }, [sortByValue]);
-  var SearchComponent = function SearchComponent() {
-    return /*#__PURE__*/_react.default.createElement(_styles.WrapperSearch, {
-      id: "search-component"
-    }, /*#__PURE__*/_react.default.createElement(_styles.SearchWrapper, null, /*#__PURE__*/_react.default.createElement(_styles.SearchIconWrapper, {
-      onClick: function onClick() {
-        return setOpenSearchProducts(true);
-      }
-    }, /*#__PURE__*/_react.default.createElement(_CgSearch.default, null)), !hideSort && /*#__PURE__*/_react.default.createElement(_Select.Select, {
-      notAsync: true,
-      notReload: true,
-      options: sortByOptions,
-      defaultValue: sortByValue,
-      onChange: function onChange(val) {
-        return handleChangeSortBy && handleChangeSortBy(val);
-      }
-    })));
-  };
-  var SocialNetWork = function SocialNetWork(_ref) {
-    var url = _ref.url,
-      icon = _ref.icon;
-    return /*#__PURE__*/_react.default.createElement(_styles.IconWrapper, {
-      href: url,
-      target: "_blank",
-      rel: "noopener noreferrer"
-    }, icon);
-  };
-  var BusinessInfoComponent = function BusinessInfoComponent() {
-    var _business$ribbon, _business$ribbon2, _business$ribbon3, _business$ribbon4, _business$ribbon5, _business$ribbon6, _business$ribbon7, _business$city, _business$city2, _orderState$options, _business$reviews, _business$reviews2, _categoryState$produc, _business$professiona;
-    return /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoContainer, {
-      isChew: isChew,
-      isFlexEnd: windowSize.width >= 768
-    }, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoContent, null, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfo, {
-      className: "info"
-    }, /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoItem, {
-      isInfoShrunken: isInfoShrunken
-    }, !loading ? /*#__PURE__*/_react.default.createElement(_styles.TitleWrapper, null, /*#__PURE__*/_react.default.createElement("h2", {
-      className: "bold",
-      id: "business_name"
-    }, business === null || business === void 0 ? void 0 : business.name), (business === null || business === void 0 ? void 0 : (_business$ribbon = business.ribbon) === null || _business$ribbon === void 0 ? void 0 : _business$ribbon.enabled) && /*#__PURE__*/_react.default.createElement(_styles.RibbonBox, {
-      bgColor: business === null || business === void 0 ? void 0 : (_business$ribbon2 = business.ribbon) === null || _business$ribbon2 === void 0 ? void 0 : _business$ribbon2.color,
-      colorText: (0, _utils.lightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon3 = business.ribbon) === null || _business$ribbon3 === void 0 ? void 0 : _business$ribbon3.color),
-      borderRibbon: (0, _utils.lightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon4 = business.ribbon) === null || _business$ribbon4 === void 0 ? void 0 : _business$ribbon4.color),
-      isRoundRect: (business === null || business === void 0 ? void 0 : (_business$ribbon5 = business.ribbon) === null || _business$ribbon5 === void 0 ? void 0 : _business$ribbon5.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.rectangleRound),
-      isCapsule: (business === null || business === void 0 ? void 0 : (_business$ribbon6 = business.ribbon) === null || _business$ribbon6 === void 0 ? void 0 : _business$ribbon6.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.capsuleShape)
-    }, business === null || business === void 0 ? void 0 : (_business$ribbon7 = business.ribbon) === null || _business$ribbon7 === void 0 ? void 0 : _business$ribbon7.text)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 100 : 150,
-      height: isCustomerMode ? 35 : 'auto'
-    }), typeof hideCity !== 'undefined' && !hideCity && (business === null || business === void 0 ? void 0 : (_business$city = business.city) === null || _business$city === void 0 ? void 0 : _business$city.name) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement("p", {
-      className: "type"
-    }, business === null || business === void 0 ? void 0 : (_business$city2 = business.city) === null || _business$city2 === void 0 ? void 0 : _business$city2.name) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 100 : 150
-    })), !loading ? /*#__PURE__*/_react.default.createElement(_styles.SocialList, null, (business === null || business === void 0 ? void 0 : business.facebook_profile) && /*#__PURE__*/_react.default.createElement(SocialNetWork, {
-      url: business === null || business === void 0 ? void 0 : business.facebook_profile,
-      icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Facebook, null)
-    }), (business === null || business === void 0 ? void 0 : business.instagram_profile) && /*#__PURE__*/_react.default.createElement(SocialNetWork, {
-      url: business === null || business === void 0 ? void 0 : business.instagram_profile,
-      icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Instagram, null)
-    }), (business === null || business === void 0 ? void 0 : business.tiktok_profile) && /*#__PURE__*/_react.default.createElement(SocialNetWork, {
-      url: business === null || business === void 0 ? void 0 : business.tiktok_profile,
-      icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Tiktok, null)
-    }), (business === null || business === void 0 ? void 0 : business.pinterest_profile) && /*#__PURE__*/_react.default.createElement(SocialNetWork, {
-      url: business === null || business === void 0 ? void 0 : business.pinterest_profile,
-      icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Pinterest, null)
-    }), (business === null || business === void 0 ? void 0 : business.whatsapp_number) && /*#__PURE__*/_react.default.createElement(SocialNetWork, {
-      url: business === null || business === void 0 ? void 0 : business.whatsapp_number,
-      icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Whatsapp, null)
-    }), (business === null || business === void 0 ? void 0 : business.snapchat_profile) && /*#__PURE__*/_react.default.createElement(SocialNetWork, {
-      url: business === null || business === void 0 ? void 0 : business.snapchat_profile,
-      icon: /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.Snapchat, null)
-    })) : /*#__PURE__*/_react.default.createElement(_styles.SocialList, null, _toConsumableArray(Array(5).keys()).map(function (i) {
-      return /*#__PURE__*/_react.default.createElement(_styles.IconWrapper, {
-        isSkeleton: true,
-        key: i
-      }, /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-        width: 27,
-        height: 27
-      }));
-    })), /*#__PURE__*/_react.default.createElement(_styles.BusinessDetail, {
-      isSkeleton: loading
-    }, (orderState === null || orderState === void 0 ? void 0 : orderState.options.type) === 1 && !hideDeliveryFee && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("span", null, t('DELIVERY_FEE', 'Delivery fee')), business && parsePrice((business === null || business === void 0 ? void 0 : business.delivery_price) || 0)), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot"
-    }, "\u2022")) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 70 : 50
-    })), !hideTime && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (orderState === null || orderState === void 0 ? void 0 : (_orderState$options = orderState.options) === null || _orderState$options === void 0 ? void 0 : _orderState$options.type) === 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, (0, _utils.convertHoursToMinutes)(business === null || business === void 0 ? void 0 : business.delivery_time)), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot"
-    }, "\u2022")) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, (0, _utils.convertHoursToMinutes)(business === null || business === void 0 ? void 0 : business.pickup_time)), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot"
-    }, "\u2022"))) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 70 : 50
-    })), !hideDistance && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h5", null, parseDistance((business === null || business === void 0 ? void 0 : business.distance) || 0)), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot"
-    }, "\u2022")) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 70 : 50
-    })), !hideReviews && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !loading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "review"
-    }, /*#__PURE__*/_react.default.createElement(_reactBootstrapIcons.StarFill, {
-      className: "start"
-    }), /*#__PURE__*/_react.default.createElement("p", null, business === null || business === void 0 ? void 0 : (_business$reviews = business.reviews) === null || _business$reviews === void 0 ? void 0 : _business$reviews.total)) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 100 : 50
-    }))), !loading ? /*#__PURE__*/_react.default.createElement("div", {
-      className: "preorder-Reviews"
-    }, isPreOrderSetting && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-      onClick: function onClick() {
-        return setIsPreOrder(true);
-      }
-    }, t('PREORDER', 'Preorder')), /*#__PURE__*/_react.default.createElement("span", {
-      className: "dot"
-    }, "\u2022")), ((_business$reviews2 = business.reviews) === null || _business$reviews2 === void 0 ? void 0 : _business$reviews2.reviews) && !hideReviewsPopup && /*#__PURE__*/_react.default.createElement("span", {
-      onClick: function onClick() {
-        return setIsBusinessReviews(true);
-      }
-    }, t('REVIEWS', 'Reviews'))) : /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {
-      width: isCustomerMode ? 100 : 150
-    })))), !hideSearch && ((categoryState === null || categoryState === void 0 ? void 0 : (_categoryState$produc = categoryState.products) === null || _categoryState$produc === void 0 ? void 0 : _categoryState$produc.length) !== 0 || searchValue) && !errorQuantityProducts && !isInfoShrunken && !(business !== null && business !== void 0 && (_business$professiona = business.professionals) !== null && _business$professiona !== void 0 && _business$professiona.length) &&
-    /*#__PURE__*/
-    // (categoryClicked || windowSize.width >= 993) &&
-    _react.default.createElement(SearchComponent, null));
-  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -310,7 +184,7 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
       });
     },
     business: businessState.business
-  })), /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoWrapper, null, !isInfoShrunken && !isChew && /*#__PURE__*/_react.default.createElement(BusinessInfoComponent, null), ((business === null || business === void 0 ? void 0 : business.header) || (business === null || business === void 0 ? void 0 : business.logo) || loading || isInfoShrunken) && /*#__PURE__*/_react.default.createElement(_styles.BusinessContainer, {
+  })), /*#__PURE__*/_react.default.createElement(_styles.BusinessInfoWrapper, null, !isInfoShrunken && !isChew && /*#__PURE__*/_react.default.createElement(_BusinessInfoComponent.BusinessInfoComponent, businessInfoComponentProps), ((business === null || business === void 0 ? void 0 : business.header) || (business === null || business === void 0 ? void 0 : business.logo) || loading || isInfoShrunken) && /*#__PURE__*/_react.default.createElement(_styles.BusinessContainer, {
     bgimage: business === null || business === void 0 ? void 0 : business.header,
     isSkeleton: isSkeleton,
     id: "container",
@@ -318,7 +192,12 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     isChew: isChew
   }, !loading && !(business !== null && business !== void 0 && business.open) && /*#__PURE__*/_react.default.createElement("h1", null, t('CLOSED', 'Closed')), !hideLogo && (business === null || business === void 0 ? void 0 : business.logo) && !isChew && /*#__PURE__*/_react.default.createElement(_styles.BusinessContent, null, /*#__PURE__*/_react.default.createElement(_styles.WrapperBusinessLogo, null, !loading && /*#__PURE__*/_react.default.createElement(_styles.BusinessLogo, {
     bgimage: optimizeImage(business === null || business === void 0 ? void 0 : business.logo, 'h_200,c_limit')
-  }))), (isInfoShrunken || isChew) && /*#__PURE__*/_react.default.createElement(BusinessInfoComponent, null), !loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInfoShrunken && /*#__PURE__*/_react.default.createElement(_styles.SearchComponentContainer, null, /*#__PURE__*/_react.default.createElement(SearchComponent, null)), searchLayout === 'floating' && /*#__PURE__*/_react.default.createElement(_styles.WrapperFloatingSearch, null, /*#__PURE__*/_react.default.createElement(_SearchProducts2.SearchProducts, {
+  }))), (isInfoShrunken || isChew) && /*#__PURE__*/_react.default.createElement(_BusinessInfoComponent.BusinessInfoComponent, businessInfoComponentProps), !loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isInfoShrunken && /*#__PURE__*/_react.default.createElement(_styles.SearchComponentContainer, null, /*#__PURE__*/_react.default.createElement(_SearchComponent.SearchComponent, {
+    setOpenSearchProducts: setOpenSearchProducts,
+    handleChangeSortBy: handleChangeSortBy,
+    sortByValue: sortByValue,
+    sortByOptions: sortByOptions
+  })), searchLayout === 'floating' && /*#__PURE__*/_react.default.createElement(_styles.WrapperFloatingSearch, null, /*#__PURE__*/_react.default.createElement(_SearchProducts2.SearchProducts, {
     handleChangeSearch: handleChangeSearch,
     searchValue: searchValue,
     sortByOptions: sortByOptions,
@@ -359,9 +238,9 @@ var BusinessBasicInformation = function BusinessBasicInformation(props) {
     padding: "20px"
   }, /*#__PURE__*/_react.default.createElement(_BusinessReviews.BusinessReviews, {
     businessId: business.id,
-    reviews: (_business$reviews3 = business.reviews) === null || _business$reviews3 === void 0 ? void 0 : _business$reviews3.reviews,
+    reviews: (_business$reviews = business.reviews) === null || _business$reviews === void 0 ? void 0 : _business$reviews.reviews,
     businessName: business.name,
-    stars: (_business$reviews4 = business.reviews) === null || _business$reviews4 === void 0 ? void 0 : _business$reviews4.total
+    stars: (_business$reviews2 = business.reviews) === null || _business$reviews2 === void 0 ? void 0 : _business$reviews2.total
   })), /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     open: isPreOrder,
     width: isCustomerMode ? '700px' : '760px',

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

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WrapperSearch = exports.WrapperFloatingSearch = exports.WrapperBusinessLogo = exports.TitleWrapper = exports.SocialList = exports.SearchWrapper = exports.SearchIconWrapper = exports.SearchComponentContainer = exports.RibbonBox = exports.IconWrapper = exports.CategorySelectedContainer = exports.BusinessMoreDetail = exports.BusinessLogo = exports.BusinessInfoWrapper = exports.BusinessInfoItem = exports.BusinessInfoContent = exports.BusinessInfoContainer = exports.BusinessInfo = exports.BusinessDetail = exports.BusinessContent = exports.BusinessContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43, _templateObject44, _templateObject45, _templateObject46, _templateObject47, _templateObject48, _templateObject49, _templateObject50, _templateObject51, _templateObject52, _templateObject53;
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -72,7 +72,7 @@ var BusinessInfoContent = _styledComponents.default.div(_templateObject16 || (_t
 exports.BusinessInfoContent = BusinessInfoContent;
 var SearchWrapper = _styledComponents.default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 exports.SearchWrapper = SearchWrapper;
-var WrapperSearch = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin: 15px 0px 0px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  z-index: 1002;\n\n  .search-bar {\n    margin-right: 10px;\n    ", "\n    input {\n      width: 100%;\n\n      @media (min-width: 500px) {\n        width: 250px;\n      }\n    }\n  }\n\n  div:last-child {\n    text-align: right;\n\n    ", "\n  }\n\n  #select-input {\n    background-color: transparent !important;\n    border: none;\n    color: #748194 !important;\n\n    #list {\n      border-radius: 8px;\n    }\n  }\n  &.fixed-search {\n    position: fixed;\n    top: 0;\n    right: 0;\n    z-index: 1002;\n    width: fit-content;\n    margin-top: 0px;\n    background-color: ", ";\n    padding: 10px;\n  }\n\n  @media (min-width: 993px) {\n    &.fixed-search {\n      left: 0;\n      width: 100vw;\n    }\n  }\n"])), function (props) {
+var WrapperSearch = _styledComponents.default.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  margin: 15px 0px 0px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  box-sizing: border-box;\n  z-index: 1002;\n\n  .search-bar {\n    margin-right: 10px;\n    ", "\n    input {\n      width: 100%;\n\n      @media (min-width: 500px) {\n        width: 250px;\n      }\n    }\n  }\n\n  div:last-child {\n    text-align: right;\n\n    ", "\n  }\n\n  #select-input {\n    background-color: transparent !important;\n    border: none;\n    color: #748194 !important;\n\n    #list {\n      border-radius: 8px;\n    }\n  }\n  &.fixed-search {\n    position: fixed;\n    top: 0;\n    right: 0;\n    z-index: 10001;\n    width: fit-content;\n    margin-top: 0px;\n    background-color: ", ";\n    padding: 10px;\n  }\n\n  @media (min-width: 993px) {\n    &.fixed-search {\n      left: 0;\n      width: 100vw;\n      z-index: 1002;\n    }\n  }\n"])), function (props) {
   var _props$theme4;
   return ((_props$theme4 = props.theme) === null || _props$theme4 === void 0 ? void 0 : _props$theme4.rtl) && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      margin-left: 10px;\n      margin-right: 0;\n    "])));
 }, function (props) {
@@ -112,68 +112,78 @@ var BusinessMoreDetail = _styledComponents.default.div(_templateObject28 || (_te
   return props.position ? 'black' : 'white';
 });
 exports.BusinessMoreDetail = BusinessMoreDetail;
-var TitleWrapper = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  h2 {\n    font-size: 24px;\n    line-height: 36px;\n    margin: 0 0 10px 0;\n    font-weight: 600;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    &.fixed-name {\n      z-index: 1002;\n      position: fixed;\n      top: 0;\n      width: calc(100vw - 190px);\n      padding: 10px 0;\n      font-size: 18px;\n      ", "\n    }\n    @media (min-width: 768px) {\n      font-size: 32px;\n    }\n  }\n"])), function (props) {
-  var _props$theme11;
-  return (_props$theme11 = props.theme) !== null && _props$theme11 !== void 0 && _props$theme11.rtl ? (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n        right: 50px;\n      "]))) : (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n        left: 50px;\n      "])));
+var TitleWrapper = _styledComponents.default.div(_templateObject31 || (_templateObject31 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n\n  h2 {\n    font-size: 24px;\n    line-height: 36px;\n    margin: 0 0 10px 0;\n    font-weight: 600;\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    background: ", ";\n    &.fixed-name {\n      z-index: 1002;\n      position: fixed;\n      top: 0;\n      padding: 10px 0;\n      font-size: 18px;\n      ", "\n    }\n    @media (min-width: 768px) {\n      font-size: 32px;\n    }\n  }\n"])), function (_ref4) {
+  var _theme$colors;
+  var theme = _ref4.theme;
+  return theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.white;
+}, function (_ref5) {
+  var isCustomLayout = _ref5.isCustomLayout;
+  return !isCustomLayout ? (0, _styledComponents.css)(_templateObject32 || (_templateObject32 = _taggedTemplateLiteral(["\n        width: calc(100vw - 190px);\n        ", "\n      "])), function (props) {
+    var _props$theme11;
+    return (_props$theme11 = props.theme) !== null && _props$theme11 !== void 0 && _props$theme11.rtl ? (0, _styledComponents.css)(_templateObject33 || (_templateObject33 = _taggedTemplateLiteral(["\n        right: 50px;\n        "]))) : (0, _styledComponents.css)(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n        left: 50px;\n        "])));
+  }) : (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n      ", "\n      "])), function (props) {
+    var _props$theme12;
+    return (_props$theme12 = props.theme) !== null && _props$theme12 !== void 0 && _props$theme12.rtl ? (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n          right: 10px;\n          "]))) : (0, _styledComponents.css)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n          left: 10px;\n        "])));
+  });
 });
 exports.TitleWrapper = TitleWrapper;
-var RibbonBox = _styledComponents.default.div(_templateObject34 || (_templateObject34 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  box-sizing: border-box;\n  z-index: 10;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  background-color: ", ";\n  max-width: 200px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  margin-left: 5px;\n  margin-bottom: 10px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
+var RibbonBox = _styledComponents.default.div(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n  padding: 2px 8px;\n  box-sizing: border-box;\n  z-index: 10;\n  color: ", ";\n  font-weight: 400;\n  font-size: 10px;\n  line-height: 13px;\n  background-color: ", ";\n  max-width: 200px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  overflow: hidden;\n  margin-left: 5px;\n  margin-bottom: 10px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (props) {
   return props.theme.colors.colorTextSignForm;
 }, function (props) {
   return props.theme.colors.primary;
 }, function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject35 || (_templateObject35 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 5px;\n  "])));
-}, function (_ref4) {
-  var bgColor = _ref4.bgColor;
-  return bgColor && (0, _styledComponents.css)(_templateObject36 || (_templateObject36 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
-}, function (_ref5) {
-  var isRoundRect = _ref5.isRoundRect;
-  return isRoundRect && (0, _styledComponents.css)(_templateObject37 || (_templateObject37 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    margin-left: 0px;\n    margin-right: 5px;\n  "])));
 }, function (_ref6) {
-  var isCapsule = _ref6.isCapsule;
-  return isCapsule && (0, _styledComponents.css)(_templateObject38 || (_templateObject38 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
+  var bgColor = _ref6.bgColor;
+  return bgColor && (0, _styledComponents.css)(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    background-color: ", ";\n  "])), bgColor);
 }, function (_ref7) {
-  var colorText = _ref7.colorText;
-  return colorText && (0, _styledComponents.css)(_templateObject39 || (_templateObject39 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), colorText ? 'black' : 'white');
+  var isRoundRect = _ref7.isRoundRect;
+  return isRoundRect && (0, _styledComponents.css)(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n    border-radius: 7.6px;\n  "])));
 }, function (_ref8) {
-  var borderRibbon = _ref8.borderRibbon;
-  return borderRibbon && (0, _styledComponents.css)(_templateObject40 || (_templateObject40 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), borderRibbon ? 'black' : 'white');
+  var isCapsule = _ref8.isCapsule;
+  return isCapsule && (0, _styledComponents.css)(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
+}, function (_ref9) {
+  var colorText = _ref9.colorText;
+  return colorText && (0, _styledComponents.css)(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), colorText ? 'black' : 'white');
+}, function (_ref10) {
+  var borderRibbon = _ref10.borderRibbon;
+  return borderRibbon && (0, _styledComponents.css)(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), borderRibbon ? 'black' : 'white');
 });
 exports.RibbonBox = RibbonBox;
-var SearchIconWrapper = _styledComponents.default.div(_templateObject41 || (_templateObject41 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  background-color: ", ";\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    font-size: 18px;\n  }\n"])), function (props) {
+var SearchIconWrapper = _styledComponents.default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n  cursor: pointer;\n  background-color: ", ";\n  width: 36px;\n  height: 36px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  svg {\n    font-size: 18px;\n  }\n"])), function (props) {
   return props.theme.colors.gray200;
 });
 exports.SearchIconWrapper = SearchIconWrapper;
-var SearchComponentContainer = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 10px;\n  right: 60px;\n  color: ", ";\n  #select-input {\n    color: #FFFFFF !important;\n  }\n  svg {\n    color: #FFFFFF;\n  }\n"])), function (_ref9) {
-  var theme = _ref9.theme;
+var SearchComponentContainer = _styledComponents.default.div(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 10px;\n  right: 60px;\n  color: ", ";\n  #select-input {\n    color: #FFFFFF !important;\n  }\n  svg {\n    color: #FFFFFF;\n  }\n"])), function (_ref11) {
+  var theme = _ref11.theme;
   return theme.colors.white;
 });
 exports.SearchComponentContainer = SearchComponentContainer;
-var SocialList = _styledComponents.default.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-left: -3px;\n  ", "\n"])), function (props) {
-  return props.theme.rtl && (0, _styledComponents.css)(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    margin-right: -3px;\n    margin-left: 0px;\n  "])));
+var SocialList = _styledComponents.default.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-left: -3px;\n  ", "\n"])), function (props) {
+  return props.theme.rtl && (0, _styledComponents.css)(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n    margin-right: -3px;\n    margin-left: 0px;\n  "])));
 });
 exports.SocialList = SocialList;
-var CategorySelectedContainer = _styledComponents.default.div(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n  display: inline;\n  margin-left: 10px;\n  color: ", ";\n  padding-right: 5px;\n  cursor: pointer;\n  p{\n    margin: 0;\n  }\n  svg {\n    position: relative;\n    top: 2px;\n    margin-right: 3px;\n    width: 14px;\n    height: 14px;\n  }\n"])), function (_ref10) {
-  var _theme$colors;
-  var theme = _ref10.theme;
-  return theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.primary;
+var CategorySelectedContainer = _styledComponents.default.div(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  display: inline;\n  margin-left: 10px;\n  color: ", ";\n  padding-right: 5px;\n  cursor: pointer;\n  p{\n    margin: 0;\n  }\n  svg {\n    position: relative;\n    top: 2px;\n    margin-right: 3px;\n    width: 14px;\n    height: 14px;\n  }\n"])), function (_ref12) {
+  var _theme$colors2;
+  var theme = _ref12.theme;
+  return theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.primary;
 });
 exports.CategorySelectedContainer = CategorySelectedContainer;
-var IconWrapper = _styledComponents.default.a(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n  margin: 0px 3px 10px 3px;\n  border-radius: 3px;\n  border: 0.5px solid ", ";\n  width: 27px;\n  height: 27px;\n  min-width: 27px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n\n  ", "\n\n  svg {\n    height: 18px;\n    font-size: 18px;\n    transition: all 0.2s ease-in;\n    color: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n    svg {\n      transform: scale(1.07);\n    }\n  }\n"])), function (props) {
+var IconWrapper = _styledComponents.default.a(_templateObject50 || (_templateObject50 = _taggedTemplateLiteral(["\n  margin: 0px 3px 10px 3px;\n  border-radius: 3px;\n  border: 0.5px solid ", ";\n  width: 27px;\n  height: 27px;\n  min-width: 27px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n\n  ", "\n\n  svg {\n    height: 18px;\n    font-size: 18px;\n    transition: all 0.2s ease-in;\n    color: ", ";\n  }\n  &:hover {\n    background-color: ", ";\n    svg {\n      transform: scale(1.07);\n    }\n  }\n"])), function (props) {
   return props.theme.colors.gray200;
-}, function (_ref11) {
-  var isSkeleton = _ref11.isSkeleton;
-  return isSkeleton && (0, _styledComponents.css)(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n    border: none;\n  "])));
+}, function (_ref13) {
+  var isSkeleton = _ref13.isSkeleton;
+  return isSkeleton && (0, _styledComponents.css)(_templateObject51 || (_templateObject51 = _taggedTemplateLiteral(["\n    border: none;\n  "])));
 }, function (props) {
   return props.theme.colors.headingColor;
 }, function (props) {
   return props.theme.colors.gray200;
 });
 exports.IconWrapper = IconWrapper;
-var BusinessInfoWrapper = _styledComponents.default.div(_templateObject48 || (_templateObject48 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  @media (min-width: 768px) {\n    flex-direction: column;\n  }\n"])));
+var BusinessInfoWrapper = _styledComponents.default.div(_templateObject52 || (_templateObject52 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  @media (min-width: 768px) {\n    flex-direction: column;\n  }\n"])));
 exports.BusinessInfoWrapper = BusinessInfoWrapper;
-var WrapperFloatingSearch = _styledComponents.default.div(_templateObject49 || (_templateObject49 = _taggedTemplateLiteral(["\n  position: absolute;\n  color: ", ";\n  display: flex;\n  background: rgba(0,0,0,0.2);\n  top: 80px;\n  right: 10px;\n  width: 80%;\n  border-bottom: 1px solid #FFFFFF;\n  #select-input {\n    color: #FFFFFF !important;\n    background: transparent;\n  }\n  svg, span {\n    color: #FFFFFF !important;\n  }\n  @media (min-width: 681px){\n    top: 23px;\n    right: 60px;\n    width: 300px;\n    input {\n      width: 80%;\n    }\n  }\n"])), function (_ref12) {
-  var theme = _ref12.theme;
+var WrapperFloatingSearch = _styledComponents.default.div(_templateObject53 || (_templateObject53 = _taggedTemplateLiteral(["\n  position: absolute;\n  color: ", ";\n  display: flex;\n  background: rgba(0,0,0,0.2);\n  top: 80px;\n  right: 10px;\n  width: 80%;\n  border-bottom: 1px solid #FFFFFF;\n  #select-input {\n    color: #FFFFFF !important;\n    background: transparent;\n  }\n  svg, span {\n    color: #FFFFFF !important;\n  }\n  @media (min-width: 681px){\n    top: 23px;\n    right: 60px;\n    width: 300px;\n    input {\n      width: 80%;\n    }\n  }\n"])), function (_ref14) {
+  var theme = _ref14.theme;
   return theme.colors.white;
 });
 exports.WrapperFloatingSearch = WrapperFloatingSearch;

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

@@ -112,7 +112,7 @@ var BusinessProductsCategoriesUI = function BusinessProductsCategoriesUI(props)
           categoryListsElement.scrollTo({
             top: 0,
             left: moveAmount,
-            behavior: 'smooth'
+            behavior: 'auto'
           });
         }
         setSelectedCateogry(category);

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

@@ -41,7 +41,7 @@ var CARD_ELEMENT_OPTIONS = {
   showIcon: true
 };
 var CardFormUI = function CardFormUI(props) {
-  var _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
+  var _validationFields$fie, _validationFields$fie2, _validationFields$fie3, _validationFields$fie4, _validationFields$fie5, _validationFields$fie6, _props$beforeElements, _props$beforeComponen, _props$afterComponent, _props$afterElements;
   var error = props.error,
     errorExpiry = props.errorExpiry,
     errorCvc = props.errorCvc,
@@ -50,10 +50,16 @@ var CardFormUI = function CardFormUI(props) {
     handleChange = props.handleChange,
     isSplitForm = props.isSplitForm,
     handleChangeExpiry = props.handleChangeExpiry,
-    handleChangeCvc = props.handleChangeCvc;
+    handleChangeCvc = props.handleChangeCvc,
+    errorZipcode = props.errorZipcode;
   var _useLanguage = (0, _orderingComponentsExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
+  var _useValidationFields = (0, _orderingComponentsExternal.useValidationFields)(),
+    _useValidationFields2 = _slicedToArray(_useValidationFields, 1),
+    validationFields = _useValidationFields2[0];
+  var zipCodeEnabled = validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie = validationFields.fields) === null || _validationFields$fie === void 0 ? void 0 : (_validationFields$fie2 = _validationFields$fie.card) === null || _validationFields$fie2 === void 0 ? void 0 : (_validationFields$fie3 = _validationFields$fie2.zipcode) === null || _validationFields$fie3 === void 0 ? void 0 : _validationFields$fie3.enabled;
+  var zipCodeRequired = validationFields === null || validationFields === void 0 ? void 0 : (_validationFields$fie4 = validationFields.fields) === null || _validationFields$fie4 === void 0 ? void 0 : (_validationFields$fie5 = _validationFields$fie4.card) === null || _validationFields$fie5 === void 0 ? void 0 : (_validationFields$fie6 = _validationFields$fie5.zipcode) === null || _validationFields$fie6 === void 0 ? void 0 : _validationFields$fie6.required;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (_props$beforeElements = props.beforeElements) === null || _props$beforeElements === void 0 ? void 0 : _props$beforeElements.map(function (BeforeElement, i) {
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: i
@@ -76,7 +82,14 @@ var CardFormUI = function CardFormUI(props) {
   }), /*#__PURE__*/_react.default.createElement(_styles.ErrorMessage, null, errorExpiry)), /*#__PURE__*/_react.default.createElement(_styles.CardCvcField, null, /*#__PURE__*/_react.default.createElement("label", null, t('CVC', 'CVC')), /*#__PURE__*/_react.default.createElement(_reactStripeJs.CardCvcElement, {
     options: CARD_ELEMENT_OPTIONS,
     onChange: handleChangeCvc
-  }), /*#__PURE__*/_react.default.createElement(_styles.ErrorMessage, null, errorCvc))))), /*#__PURE__*/_react.default.createElement(_styles.FormActions, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
+  }), /*#__PURE__*/_react.default.createElement(_styles.ErrorMessage, null, errorCvc))), zipCodeEnabled && /*#__PURE__*/_react.default.createElement(_styles.CardZipcodeField, null, /*#__PURE__*/_react.default.createElement("label", null, t('ZIPCODE', 'Zipcode')), /*#__PURE__*/_react.default.createElement(_styles.ZipcodeField, {
+    name: "zipcode",
+    placeholder: "".concat(t('ZIPCODE', 'Zipcode')).concat(zipCodeRequired ? '*' : ''),
+    options: CARD_ELEMENT_OPTIONS,
+    onChange: handleChange,
+    pattern: "[0-9]",
+    type: "number"
+  }), errorZipcode && /*#__PURE__*/_react.default.createElement(_styles.ErrorMessage, null, t('ZIPCODE_IS_INCOMPLETED', 'The zipcode is incompleted.'))))), /*#__PURE__*/_react.default.createElement(_styles.FormActions, null, /*#__PURE__*/_react.default.createElement(_Buttons.Button, {
     color: "primary",
     type: "submit",
     disabled: loading

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

@@ -4,9 +4,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormStripe = exports.FormRow = exports.FormActions = exports.ErrorMessage = exports.CardNumberField = exports.CardExpiryField = exports.CardExpiryCvcField = exports.CardCvcField = void 0;
+exports.ZipcodeField = exports.FormStripe = exports.FormRow = exports.FormActions = exports.ErrorMessage = exports.CardZipcodeField = exports.CardNumberField = exports.CardExpiryField = exports.CardExpiryCvcField = exports.CardCvcField = 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) } })); }
@@ -16,16 +16,20 @@ var CardExpiryField = _styledComponents.default.div(_templateObject2 || (_templa
 exports.CardExpiryField = CardExpiryField;
 var CardCvcField = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: #ADB2B9;\n"])));
 exports.CardCvcField = CardCvcField;
-var CardNumberField = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: #ADB2B9;\n"])));
+var CardZipcodeField = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: #ADB2B9;\n"])));
+exports.CardZipcodeField = CardZipcodeField;
+var CardNumberField = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 100%;\n  color: #ADB2B9;\n"])));
 exports.CardNumberField = CardNumberField;
-var CardExpiryCvcField = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-gap: 10px;\n"])));
+var CardExpiryCvcField = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  grid-gap: 10px;\n"])));
 exports.CardExpiryCvcField = CardExpiryCvcField;
-var FormRow = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  input {\n    display: block;\n    border: none;\n    font-size: 18px;\n    margin: 10px 0 20px 0;\n    max-width: 100%;\n    padding: 10px 14px;\n    box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,\n      rgba(0, 0, 0, 0.0196078) 0px 1px 0px;\n    border-radius: 4px;\n    background: white;\n    color: #424770;\n    letter-spacing: 0.025em;\n    width: 500px;\n  }\n\n  input::placeholder {\n    color: #aab7c4;\n  }\n"])));
+var FormRow = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  input {\n    display: block;\n    border: none;\n    font-size: 18px;\n    margin: 10px 0 20px 0;\n    max-width: 100%;\n    padding: 10px 14px;\n    box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px,\n      rgba(0, 0, 0, 0.0196078) 0px 1px 0px;\n    border-radius: 4px;\n    background: white;\n    color: #424770;\n    letter-spacing: 0.025em;\n    width: 500px;\n  }\n\n  input::placeholder {\n    color: #aab7c4;\n  }\n"])));
 exports.FormRow = FormRow;
-var ErrorMessage = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  font-weight: bold;\n  margin-top: 10px;\n  margin-bottom: 20px;\n  color: #D81212;\n  margin: 10px 0px 0px 10px;\n  ", "\n"])), function (props) {
+var ErrorMessage = _styledComponents.default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  font-size: 16px;\n  font-weight: bold;\n  margin-top: 10px;\n  margin-bottom: 20px;\n  color: #D81212;\n  margin: 10px 0px 0px 10px;\n  ", "\n"])), function (props) {
   var _props$theme;
-  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    margin: 10px 10px 0px 0px\n  "])));
+  return ((_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.rtl) && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    margin: 10px 10px 0px 0px\n  "])));
 });
 exports.ErrorMessage = ErrorMessage;
-var FormActions = _styledComponents.default.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 20px;\n\n  button {\n    height: 44px;\n    width: 100%;\n    border-radius: 7.6px;\n\n    &:disabled {\n      opacity: 0.5;\n    }\n  }\n"])));
-exports.FormActions = FormActions;
+var FormActions = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-top: 20px;\n\n  button {\n    height: 44px;\n    width: 100%;\n    border-radius: 7.6px;\n\n    &:disabled {\n      opacity: 0.5;\n    }\n  }\n"])));
+exports.FormActions = FormActions;
+var ZipcodeField = _styledComponents.default.input(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  font-weight: 500;\n  font-size: 16px;\n  box-sizing: border-box;\n  width: 100% !important;\n  &:-webkit-autofill {\n    color: '#fce883'\n  }\n  &::placeholder {\n    font-weight: 500\n  }\n  &:focus(){\n    box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px,\n      rgba(0, 0, 0, 0.0784314) 0px 1px 3px;\n    -webkit-transition: all 150ms ease;\n    transition: all 150ms ease;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  /* Firefox */\n  &[type=number] {\n    -moz-appearance: textfield;\n  }\n  \n"])));
+exports.ZipcodeField = ZipcodeField;