ordering-ui-admin-external 1.43.68 → 1.43.69

package/_modules/components/Orders/AllInOne/index.js

@@ -73,7 +73,7 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
   var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configState = _useConfig2[0];
-  var isSearchFilterValue = ((configState === null || configState === void 0 || (_configState$configs = configState.configs) === null || _configState$configs === void 0 || (_configState$configs = _configState$configs.filter_order_options) === null || _configState$configs === void 0 ? void 0 : _configState$configs.value.split('|').map(function (value) {
+  var isFilterDriverGroup = ((configState === null || configState === void 0 || (_configState$configs = configState.configs) === null || _configState$configs === void 0 || (_configState$configs = _configState$configs.filter_order_options) === null || _configState$configs === void 0 ? void 0 : _configState$configs.value.split('|').map(function (value) {
     return value;
   })) || []).includes('driver_group_general');
   var query = new URLSearchParams((0, _reactRouterDom.useLocation)().search);
@@ -268,9 +268,8 @@ var OrdersManagerUI = function OrdersManagerUI(props) {
     disableSocketRoomDriver: true,
     showCompressedInfo: true,
     filterValues: filterValues,
-    searchFilterValue: searchValue,
     driverGroupList: driverGroupList,
-    isSearchFilterValue: isSearchFilterValue,
+    isFilterDriverGroup: isFilterDriverGroup,
     drivers: driversList.drivers,
     setMapsData: setMapsData,
     handleEmtpyOrderSelected: handleBackRedirect,

package/_modules/components/Orders/OrdersDashboard/index.js

@@ -30,7 +30,7 @@ var OrdersDashboard = exports.OrdersDashboard = function OrdersDashboard(props)
     configs = _useConfig2[0].configs;
   var ordersDashboardListProps = _objectSpread({}, props);
   if (configs !== null && configs !== void 0 && configs.optimize_order_data && (configs === null || configs === void 0 || (_configs$optimize_ord = configs.optimize_order_data) === null || _configs$optimize_ord === void 0 ? void 0 : _configs$optimize_ord.value) === '1') {
-    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'driver_group_business', 'metadata'];
+    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'driver_group_business', 'metadata', 'assignable_driver_groups'];
   }
   return /*#__PURE__*/_react.default.createElement(_styles.OrdersManageContainer, null, /*#__PURE__*/_react.default.createElement(_OrdersDashboardList.OrdersDashboardList, _extends({}, ordersDashboardListProps, {
     orderListView: "table"

package/_modules/components/Orders/OrdersHeaderFilterGroup/styles.js

@@ -10,7 +10,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var WrapperRow = exports.WrapperRow = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding-bottom: 0px;\n\n  & > div {\n    width: 100%;\n    height: 47px;\n    max-width: 300px;\n    margin-right: 10px;\n    background-color: ", ";\n    border: none;\n    font-size: 14px;\n    border-radius: 8px;\n    > div:first-child {\n      height: 100%;\n    }\n  }\n\n  .order-status-multi-select {\n    p {\n      padding: 0;\n      color: ", " !important;\n    }\n  }\n\n  .date-filter-container {\n    z-index: 100;\n  }\n\n  input {\n    width: 100%;\n    height: 47px;\n    padding: 10px 25px;\n    box-sizing: border-box;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    -moz-appearance: textfield;\n  }\n\n  .close {\n    right: 8px;\n  }\n\n  .external_id {\n    @media (max-width: 1200px) {\n     flex: auto;\n    }\n  }\n\n  @media (max-width: 798px) {\n    flex-direction: column !important;\n    padding: 10px 15px 0 0px;\n    & > div {\n      margin-top: 15px;\n    }\n  }\n\n  ", "\n"])), function (props) {
+var WrapperRow = exports.WrapperRow = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding-bottom: 0px;\n\n  & > div {\n    width: 100%;\n    height: 47px;\n    max-width: 1000px;\n    margin-right: 10px;\n    background-color: ", ";\n    border: none;\n    font-size: 14px;\n    border-radius: 8px;\n    > div:first-child {\n      height: 100%;\n    }\n    @media (min-width: 798px) {\n      max-width: 300px;\n    }\n  }\n\n  .order-status-multi-select {\n    p {\n      padding: 0;\n      color: ", " !important;\n    }\n  }\n\n  .date-filter-container {\n    z-index: 100;\n  }\n\n  input {\n    width: 100%;\n    height: 47px;\n    padding: 10px 25px;\n    box-sizing: border-box;\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    -moz-appearance: textfield;\n  }\n\n  .close {\n    right: 8px;\n  }\n\n  .external_id {\n    @media (max-width: 1200px) {\n     flex: auto;\n    }\n  }\n\n  @media (max-width: 798px) {\n    flex-direction: column !important;\n    padding: 10px 15px 0 0px;\n    & > div {\n      margin-top: 15px;\n    }\n  }\n\n  ", "\n"])), function (props) {
   return props.theme.colors.secundary;
 }, function (props) {
   return props.theme.colors.headingColor;

package/_modules/components/Orders/OrdersTable/index.js

@@ -76,13 +76,17 @@ var OrdersTable = exports.OrdersTable = /*#__PURE__*/(0, _react.memo)(function (
     _useState4 = _slicedToArray(_useState3, 2),
     dragOverd = _useState4[0],
     setDragOverd = _useState4[1];
-  var handleChangePage = function handleChangePage(page) {
-    getPageOrders(pagination.pageSize, page);
-  };
-  var handleChangePageSize = function handleChangePageSize(pageSize) {
-    var expectedPage = Math.ceil(pagination.from / pageSize);
-    getPageOrders(pageSize, expectedPage);
-  };
+  var handleChangePage = (0, _react.useCallback)(function (page) {
+    if (page !== pagination.currentPage) {
+      getPageOrders(pagination.pageSize, page);
+    }
+  }, [pagination.currentPage, pagination.pageSize, getPageOrders]);
+  var handleChangePageSize = (0, _react.useCallback)(function (pageSize) {
+    if (pageSize !== pagination.pageSize) {
+      var expectedPage = Math.ceil(pagination.from / pageSize);
+      getPageOrders(pageSize, expectedPage);
+    }
+  }, [pagination.from, pagination.pageSize, getPageOrders]);
   var _useConfig = (0, _orderingComponentsAdminExternal.useConfig)(),
     _useConfig2 = _slicedToArray(_useConfig, 1),
     configState = _useConfig2[0];

package/_modules/components/Shared/Pagination/index.js

@@ -18,7 +18,25 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var Pagination = exports.Pagination = function Pagination(props) {
+var filterPages = function filterPages(visiblePages, totalPages) {
+  return visiblePages.filter(function (page) {
+    return page <= totalPages;
+  });
+};
+var getVisiblePages = function getVisiblePages(page, total) {
+  if (total < 7) {
+    return filterPages([1, 2, 3, 4, 5, 6], total);
+  } else {
+    if (page % 5 >= 0 && page > 4 && page + 2 < total) {
+      return [1, page - 1, page, page + 1, total];
+    } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
+      return [1, total - 3, total - 2, total - 1, total];
+    } else {
+      return [1, 2, 3, 4, 5, total];
+    }
+  }
+};
+var Pagination = exports.Pagination = /*#__PURE__*/_react.default.memo(function (props) {
   var currentPage = props.currentPage,
     totalPages = props.totalPages,
     handleChangePage = props.handleChangePage,
@@ -29,16 +47,18 @@ var Pagination = exports.Pagination = function Pagination(props) {
   var _useLanguage = (0, _orderingComponentsAdminExternal.useLanguage)(),
     _useLanguage2 = _slicedToArray(_useLanguage, 2),
     t = _useLanguage2[1];
-  var pageSizeOptions = [{
-    value: 10,
-    content: /*#__PURE__*/_react.default.createElement(_styles.Option, null, "10")
-  }, {
-    value: 25,
-    content: /*#__PURE__*/_react.default.createElement(_styles.Option, null, "25")
-  }, {
-    value: 50,
-    content: /*#__PURE__*/_react.default.createElement(_styles.Option, null, "50")
-  }];
+  var pageSizeOptions = (0, _react.useMemo)(function () {
+    return [{
+      value: 10,
+      content: /*#__PURE__*/_react.default.createElement(_styles.Option, null, "10")
+    }, {
+      value: 25,
+      content: /*#__PURE__*/_react.default.createElement(_styles.Option, null, "25")
+    }, {
+      value: 50,
+      content: /*#__PURE__*/_react.default.createElement(_styles.Option, null, "50")
+    }];
+  }, []);
   var _useState = (0, _react.useState)([]),
     _useState2 = _slicedToArray(_useState, 2),
     visiblePages = _useState2[0],
@@ -47,33 +67,13 @@ var Pagination = exports.Pagination = function Pagination(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     activePage = _useState4[0],
     setActivePage = _useState4[1];
-  var filterPages = function filterPages(visiblePages, totalPages) {
-    return visiblePages.filter(function (page) {
-      return page <= totalPages;
-    });
-  };
-  var getVisiblePages = function getVisiblePages(page, total) {
-    if (total < 7) {
-      return filterPages([1, 2, 3, 4, 5, 6], total);
-    } else {
-      if (page % 5 >= 0 && page > 4 && page + 2 < total) {
-        return [1, page - 1, page, page + 1, total];
-      } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
-        return [1, total - 3, total - 2, total - 1, total];
-      } else {
-        return [1, 2, 3, 4, 5, total];
-      }
-    }
-  };
-  var changePage = function changePage(page) {
-    if (page === activePage) {
-      return;
-    }
+  var changePage = (0, _react.useCallback)(function (page) {
+    if (page === activePage) return;
     setActivePage(page);
     var _visiblePages = getVisiblePages(page, totalPages);
     setVisiblePages(filterPages(_visiblePages, totalPages));
     handleChangePage(page);
-  };
+  }, [activePage, totalPages, handleChangePage]);
   (0, _react.useEffect)(function () {
     if (!totalPages) return;
     setVisiblePages(getVisiblePages(null, totalPages));
@@ -119,4 +119,4 @@ var Pagination = exports.Pagination = function Pagination(props) {
       return handleChangePageSize(size);
     }
   })));
-};
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-admin-external",
-  "version": "1.43.68",
+  "version": "1.43.69",
   "description": "Ordering UI Admin Components",
   "main": "./_modules/index.js",
   "exports": {
@@ -83,7 +83,7 @@
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-range": "^4.0.2",
-    "ordering-components-admin-external": "1.43.44",
+    "ordering-components-admin-external": "1.43.45",
     "polished": "^3.6.7",
     "prop-types": "^15.7.2",
     "react-big-calendar": "^1.4.2",

package/src/components/Orders/AllInOne/index.js

@@ -65,7 +65,7 @@ const OrdersManagerUI = (props) => {
   const [{ user }] = useSession()
   const [configState] = useConfig()
 
-  const isSearchFilterValue = (configState?.configs?.filter_order_options?.value.split('|').map(value => (value)) || []).includes('driver_group_general')
+  const isFilterDriverGroup = (configState?.configs?.filter_order_options?.value.split('|').map(value => (value)) || []).includes('driver_group_general')
 
   const query = new URLSearchParams(useLocation().search)
   const [isOpenOrderDetail, setIsOpenOrderDetail] = useState(false)
@@ -230,9 +230,8 @@ const OrdersManagerUI = (props) => {
                 disableSocketRoomDriver
                 showCompressedInfo
                 filterValues={filterValues}
-                searchFilterValue={searchValue}
                 driverGroupList={driverGroupList}
-                isSearchFilterValue={isSearchFilterValue}
+                isFilterDriverGroup={isFilterDriverGroup}
                 drivers={driversList.drivers}
                 setMapsData={setMapsData}
                 handleEmtpyOrderSelected={handleBackRedirect}

package/src/components/Orders/OrdersDashboard/index.js

@@ -11,7 +11,7 @@ export const OrdersDashboard = (props) => {
     ...props
   }
   if ((configs?.optimize_order_data && (configs?.optimize_order_data?.value === '1'))) {
-    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'driver_group_business', 'metadata']
+    ordersDashboardListProps.propsToFetch = ['app_id', 'business', 'business_id', 'created_at', 'customer', 'customer_id', 'delivery_type', 'driver_group_id', 'driver_id', 'driver', 'delivery_datetime', 'delivery_datetime_utc', 'external_id', 'eta_time', 'id', 'logistic_status', 'logistic_attemps', 'uuid', 'order_group', 'order_group_id', 'priority', 'summary', 'status', 'time_status', 'total', 'driver_group_business', 'metadata', 'assignable_driver_groups']
   }
   return (
     <OrdersManageContainer>

package/src/components/Orders/OrdersHeaderFilterGroup/styles.js

@@ -9,7 +9,7 @@ export const WrapperRow = styled.div`
   & > div {
     width: 100%;
     height: 47px;
-    max-width: 300px;
+    max-width: 1000px;
     margin-right: 10px;
     background-color: ${props => props.theme.colors.secundary};
     border: none;
@@ -18,6 +18,9 @@ export const WrapperRow = styled.div`
     > div:first-child {
       height: 100%;
     }
+    @media (min-width: 798px) {
+      max-width: 300px;
+    }
   }
 
   .order-status-multi-select {

package/src/components/Orders/OrdersTable/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useState } from 'react'
+import React, { memo, useEffect, useState, useCallback } from 'react'
 import moment from 'moment'
 import RiCheckboxBlankLine from '@meronex/icons/ri/RiCheckboxBlankLine'
 import RiCheckboxFill from '@meronex/icons/ri/RiCheckboxFill'
@@ -70,13 +70,20 @@ export const OrdersTable = memo((props) => {
   const [{ parseDate }] = useUtils()
   const [isAllChecked, setIsAllChecked] = useState(false)
   const [dragOverd, setDragOverd] = useState('')
-  const handleChangePage = (page) => {
-    getPageOrders(pagination.pageSize, page)
-  }
-  const handleChangePageSize = (pageSize) => {
-    const expectedPage = Math.ceil(pagination.from / pageSize)
-    getPageOrders(pageSize, expectedPage)
-  }
+
+  const handleChangePage = useCallback((page) => {
+    if (page !== pagination.currentPage) {
+      getPageOrders(pagination.pageSize, page)
+    }
+  }, [pagination.currentPage, pagination.pageSize, getPageOrders])
+
+  const handleChangePageSize = useCallback((pageSize) => {
+    if (pageSize !== pagination.pageSize) {
+      const expectedPage = Math.ceil(pagination.from / pageSize)
+      getPageOrders(pageSize, expectedPage)
+    }
+  }, [pagination.from, pagination.pageSize, getPageOrders])
+
   const [configState] = useConfig()
   const isEnabledRowInColor = configState?.configs?.row_in_color_enabled?.value === '1'
   const showExternalId = configState?.configs?.change_order_id?.value === '1'
@@ -269,11 +276,11 @@ export const OrdersTable = memo((props) => {
     let _column = {}
     if (type === 'channel') {
       _column = { visable: allowColumns[type]?.visable ?? false, title: t('CHANNEL', 'Channel'), className: 'channelInfo', draggable: true, colSpan: 1, order: 12 }
-     } else if (type === 'pod') {
+    } else if (type === 'pod') {
       _column = { visable: allowColumns[type]?.visable ?? false, title: t('PODS', 'Pod'), className: 'podInfo', draggable: true, colSpan: 1, order: 13 }
-     } else {
+    } else {
       _column = allowColumns[type]
-     }
+    }
     const updatedAllowColumns = {
       ...allowColumns,
       [type]: { ..._column, visable: !_column?.visable }

package/src/components/Shared/Pagination/index.js

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useMemo, useCallback } from 'react'
 import { useLanguage } from 'ordering-components-admin-external'
 import { Select } from '../../../styles/Select'
 import { ChevronLeft, ChevronRight } from 'react-bootstrap-icons'
-
 import {
   PaginationContainer,
   PaginationButtonContainer,
@@ -12,7 +11,25 @@ import {
   Option
 } from './styles'
 
-export const Pagination = (props) => {
+const filterPages = (visiblePages, totalPages) => {
+  return visiblePages.filter(page => page <= totalPages)
+}
+
+const getVisiblePages = (page, total) => {
+  if (total < 7) {
+    return filterPages([1, 2, 3, 4, 5, 6], total)
+  } else {
+    if (page % 5 >= 0 && page > 4 && page + 2 < total) {
+      return [1, page - 1, page, page + 1, total]
+    } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
+      return [1, total - 3, total - 2, total - 1, total]
+    } else {
+      return [1, 2, 3, 4, 5, total]
+    }
+  }
+}
+
+export const Pagination = React.memo((props) => {
   const {
     currentPage,
     totalPages,
@@ -24,51 +41,23 @@ export const Pagination = (props) => {
   } = props
 
   const [, t] = useLanguage()
-  const pageSizeOptions = [
-    {
-      value: 10,
-      content: <Option>10</Option>
-    },
-    {
-      value: 25,
-      content: <Option>25</Option>
-    },
-    {
-      value: 50,
-      content: <Option>50</Option>
-    }
-  ]
+
+  const pageSizeOptions = useMemo(() => [
+    { value: 10, content: <Option>10</Option> },
+    { value: 25, content: <Option>25</Option> },
+    { value: 50, content: <Option>50</Option> }
+  ], [])
 
   const [visiblePages, setVisiblePages] = useState([])
   const [activePage, setActivePage] = useState(currentPage)
 
-  const filterPages = (visiblePages, totalPages) => {
-    return visiblePages.filter(page => page <= totalPages)
-  }
-
-  const getVisiblePages = (page, total) => {
-    if (total < 7) {
-      return filterPages([1, 2, 3, 4, 5, 6], total)
-    } else {
-      if (page % 5 >= 0 && page > 4 && page + 2 < total) {
-        return [1, page - 1, page, page + 1, total]
-      } else if (page % 5 >= 0 && page > 4 && page + 2 >= total) {
-        return [1, total - 3, total - 2, total - 1, total]
-      } else {
-        return [1, 2, 3, 4, 5, total]
-      }
-    }
-  }
-
-  const changePage = (page) => {
-    if (page === activePage) {
-      return
-    }
+  const changePage = useCallback((page) => {
+    if (page === activePage) return
     setActivePage(page)
     const _visiblePages = getVisiblePages(page, totalPages)
     setVisiblePages(filterPages(_visiblePages, totalPages))
     handleChangePage(page)
-  }
+  }, [activePage, totalPages, handleChangePage])
 
   useEffect(() => {
     if (!totalPages) return
@@ -140,4 +129,4 @@ export const Pagination = (props) => {
       )}
     </PaginationContainer>
   )
-}
+})