@bjsdistribution/dms-client-return 0.0.80 → 0.0.81

package/dist/dms-client-return.esm.js

@@ -11580,23 +11580,119 @@ var TablesContainer = /*#__PURE__*/styled.div(_templateObject4$v || (_templateOb
 var _templateObject2$1A;
 var StyledBulkItem = /*#__PURE__*/styled.div(_templateObject2$1A || (_templateObject2$1A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 8px 12px;\n  display: flex;\n  align-items: center;\n  /* border-right: 1px solid #d0d5dd; */\n  gap: 8px;\n  cursor: pointer;\n  position: relative;\n\n  @media screen and (max-width: 1030px) {\n    padding: 8px 11px;\n  }\n\n  ul {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    box-sizing: border-box;\n    top: 54px;\n  }\n  &:last-child {\n    border-right: none;\n  }\n  &.active svg.arrowDown {\n    transform: rotate(180deg);\n  }\n  label {\n    color: #6a7378;\n    text-align: center;\n    font-family: 'Open Sans';\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 18px;\n    cursor: pointer;\n  }\n\n  &.noPadding {\n    padding: 0;\n  }\n"])));
 
-var _templateObject$26, _templateObject2$1B;
+var initialState$3 = {
+  'x-filters': [],
+  'x-pagination': {
+    page: 1,
+    per_page: 50
+  }
+};
+var filterReducer$2 = function filterReducer(state, action) {
+  switch (action.type) {
+    case 'SET_COMP_RETURN_FILTERS':
+      return _extends({}, state, {
+        'x-filters': [].concat(state['x-filters'].filter(function (f) {
+          return f.field !== 'customer_name' && f.field !== 'trading_as';
+        }), [{
+          field: 'customer_name',
+          op: 'like',
+          value: "%" + action.payload + "%",
+          join: 'or'
+        }, {
+          field: 'trading_as',
+          op: 'like',
+          value: "%" + action.payload + "%",
+          join: 'or'
+        }]),
+        'x-pagination': _extends({}, state['x-pagination'], {
+          page: 1
+        })
+      });
+    case 'CLEAR_SEARCH':
+      return _extends({}, state, {
+        'x-filters': [].concat(initialState$3['x-filters']),
+        'x-pagination': _extends({}, initialState$3['x-pagination'], {
+          page: 1
+        })
+      });
+    case 'CLEAR_ALL_FILTER':
+      return _extends({}, state);
+    case 'SET_PAGE':
+      return _extends({}, state, {
+        'x-pagination': _extends({}, state['x-pagination'], {
+          page: action.payload
+        })
+      });
+    case 'SET_PERPAGE':
+      return _extends({}, state, {
+        'x-pagination': _extends({}, state['x-pagination'], {
+          per_page: action.payload
+        })
+      });
+    case 'CLEAR_FILTERS':
+      return _extends({}, state);
+    case 'CLEAR_ALL_FILTER':
+      return _extends({}, state);
+    default:
+      return state;
+  }
+};
+var filtersStateAtom$2 = /*#__PURE__*/atom(initialState$3);
+var overviewfiltersReducerAtom = /*#__PURE__*/atom(function (get) {
+  return get(filtersStateAtom$2);
+}, function (get, set, action) {
+  return set(filtersStateAtom$2, filterReducer$2(get(filtersStateAtom$2), action));
+});
+
+var _templateObject$26, _templateObject2$1B, _templateObject3$T;
 var SearchType = function SearchType() {
   var _useState = useState(''),
     searchText = _useState[0],
     setSearchText = _useState[1];
+  var _useState2 = useState(''),
+    debouncedSearchText = _useState2[0],
+    setDebouncedSearchText = _useState2[1];
+  var _useAtom = useAtom(overviewfiltersReducerAtom),
+    dispatch = _useAtom[1];
   var handleInputChange = function handleInputChange(event) {
     setSearchText(event.target.value);
   };
+  // Debouncing effect
+  useEffect(function () {
+    var handler = setTimeout(function () {
+      setDebouncedSearchText(searchText);
+    }, 1000);
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [searchText]);
+  useEffect(function () {
+    if (debouncedSearchText) {
+      dispatch({
+        type: 'SET_COMP_RETURN_FILTERS',
+        payload: debouncedSearchText
+      });
+    }
+  }, [debouncedSearchText, dispatch]);
+  var handleClear = function handleClear() {
+    setSearchText('');
+    dispatch({
+      type: 'CLEAR_SEARCH'
+    });
+  };
   return React.createElement(Search, null, React.createElement(SearchIcon, null), React.createElement(SearchInput, {
     type: "text",
     placeholder: "Search",
     value: searchText,
     onChange: handleInputChange
-  }));
+  }), searchText && React.createElement(ClearButton, {
+    className: "clear",
+    onClick: handleClear
+  }, React.createElement(CrossIcon, null)));
 };
-var Search = /*#__PURE__*/styled.div(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  svg {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n"])));
-var SearchInput = /*#__PURE__*/styled.input(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8.5px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  padding-left: 39px;\n"])));
+var Search = /*#__PURE__*/styled.div(_templateObject$26 || (_templateObject$26 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  svg {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n  .clear {\n    position: absolute;\n    right: 32px;\n    top: 50%;\n  }\n"])));
+var ClearButton = /*#__PURE__*/styled.button(_templateObject2$1B || (_templateObject2$1B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  border: none;\n  color: rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n  padding: 0 8px;\n  font-size: 14px;\n  &:hover {\n    color: #000;\n  }\n"])));
+var SearchInput = /*#__PURE__*/styled.input(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border-radius: 20px;\n  border: 1px solid #e0e2e7;\n  background: #fff;\n  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  display: flex;\n  padding: 8.5px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  padding-left: 39px;\n  &:focus {\n    outline: none;\n    border-color: gray;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n"])));
 
 var BulkFilter = function BulkFilter() {
   // const [printToogle, setPrintToggle] = useMenuDropDown();
@@ -11894,56 +11990,7 @@ var ReturnTable$1 = function ReturnTable() {
   })))));
 };
 
-// let todayDate = new Date();
-var initialState$3 = {
-  'x-filters': [
-    // {
-    //   field: 'action_date',
-    //   op: '>=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T00:00:00+00:00`,
-    // },
-    // {
-    //   field: 'action_date',
-    //   op: '<=',
-    //   value: `${format(new Date(todayDate), 'yyyy-MM-dd')}T23:59:59+00:00`,
-    // },
-    // { field: 'status', op: 'count', value: '' },
-  ],
-  'x-pagination': {
-    page: 1,
-    per_page: 50
-  }
-};
-var filterReducer$2 = function filterReducer(state, action) {
-  switch (action.type) {
-    case 'SET_PAGE':
-      return _extends({}, state, {
-        'x-pagination': _extends({}, state['x-pagination'], {
-          page: action.payload
-        })
-      });
-    case 'SET_PERPAGE':
-      return _extends({}, state, {
-        'x-pagination': _extends({}, state['x-pagination'], {
-          per_page: action.payload
-        })
-      });
-    case 'CLEAR_FILTERS':
-      return _extends({}, state);
-    case 'CLEAR_ALL_FILTER':
-      return _extends({}, state);
-    default:
-      return state;
-  }
-};
-var filtersStateAtom$2 = /*#__PURE__*/atom(initialState$3);
-var overviewfiltersReducerAtom = /*#__PURE__*/atom(function (get) {
-  return get(filtersStateAtom$2);
-}, function (get, set, action) {
-  return set(filtersStateAtom$2, filterReducer$2(get(filtersStateAtom$2), action));
-});
-
-var _templateObject$27, _templateObject2$1C, _templateObject3$T;
+var _templateObject$27, _templateObject2$1C, _templateObject3$U;
 var _excluded$6 = ["count"];
 function ReturnMainTable() {
   var _useAtom = useAtom(overviewfiltersReducerAtom),
@@ -11956,7 +12003,8 @@ function ReturnMainTable() {
   var _useItemsPerOverviewP = useItemsPerOverviewPage(),
     itemsPerPage = _useItemsPerOverviewP[0],
     setItemsPerPage = _useItemsPerOverviewP[1];
-  var pagination = state['x-pagination'];
+  var filters = state['x-filters'],
+    pagination = state['x-pagination'];
   var page = paginationObj.page,
     total = paginationObj.total;
   // const [selectedClient] = useTableName();
@@ -11979,7 +12027,8 @@ function ReturnMainTable() {
       endpoint: "/return_orders/stats/",
       method: 'GET',
       //@ts-ignore
-      pagination: pagination
+      pagination: pagination,
+      filters: filters
     }),
     fetchedClientData = _useApiHook.data,
     statsDataLoading = _useApiHook.loading,
@@ -12024,7 +12073,7 @@ function ReturnMainTable() {
 }
 var Row$7 = /*#__PURE__*/styled.div(_templateObject$27 || (_templateObject$27 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])));
 var Container$1a = /*#__PURE__*/styled.div(_templateObject2$1C || (_templateObject2$1C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  top: -46px;\n"])));
-var DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject3$T || (_templateObject3$T = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
+var DashBoardWrapper$3 = /*#__PURE__*/styled.section(_templateObject3$U || (_templateObject3$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .Tableconatiner {\n    border-radius: 12px;\n    background: #fff;\n    box-shadow: -2px 0px 12px 0px rgba(56, 71, 109, 0.1);\n    display: block;\n    padding: 15px 20px;\n  }\n  .headerWrap,\n  .tableData,\n  .styleCovered {\n    transition: all ease 0.5s;\n  }\n  &.stickyTableHead {\n    h2 {\n      font-size: 21px;\n    }\n    .headerWrap {\n      height: 84px;\n      padding: 10px;\n      border-radius: 0px 0px 15px 15px;\n      > div {\n        position: relative;\n        z-index: 10;\n      }\n    }\n    .styleCovered {\n      margin-top: -32px;\n      width: 67%;\n      float: right;\n      gap: 5px;\n      padding-right: 11px;\n\n      li {\n        padding: 4px 10px 5px 5px;\n        gap: 5px;\n        .svgCover {\n          width: 30px;\n          height: 30px;\n          svg {\n            height: auto;\n            width: 58%;\n          }\n        }\n        .countDigit {\n          font-size: 19px;\n        }\n      }\n      .countMess {\n        font-size: 13px;\n      }\n    }\n    .dmsBulkFilter {\n      min-height: unset;\n      gap: 4px;\n      > div {\n        padding: 4px 12px;\n        label {\n          font-size: 11px;\n        }\n      }\n    }\n\n    .StyledFilterList {\n      gap: 4px;\n      li {\n        height: 29px;\n        padding: 3px 8px;\n        gap: 4px;\n        .StyledFilterBtnIcon {\n          width: 20px;\n          height: 20px;\n          svh {\n            width: 10px;\n            height: auto;\n          }\n        }\n        .StyledFilterBtnLabel {\n          font-size: 13px;\n        }\n      }\n    }\n    .StyledFilterLabel {\n      padding-left: 10px;\n      span {\n        font-size: 13px;\n      }\n    }\n    .cardcontainer.tableData {\n      max-height: calc(100vh - 310px);\n      min-height: calc(100vh - 310px);\n    }\n\n    .tableData {\n      max-height: calc(100vh - 320px);\n      min-height: calc(100vh - 320px);\n\n      margin-top: 8px;\n      thead {\n        position: sticky;\n        top: 0;\n        z-index: 9;\n        th {\n          font-size: 13px;\n          padding: 2px 15px;\n        }\n      }\n    }\n  }\n"])));
 
 var OrderViewQueryHandler = function OrderViewQueryHandler() {
   var _useSearchParams = useSearchParams(),