Merge warning and success modals while taking to work

src/modules/Sidebar/PendingPointsFilters/PendingPointsFilters.jsx

@@ -39,7 +39,7 @@ export const PendingPointsFilters = ({ fullRange }) => {
     "prediction",
   ]);
 
-  const clearFilters = () => clear(fullRange?.prediction);
+  const clearFilters = () => clear(fullRange);
 
   const hasActiveFilters =
     filters.region ||

src/modules/Sidebar/PendingPointsFilters/TakeToWorkButton.jsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Modal, Popover } from "antd";
+import { Alert, Button, Modal, Spin } from "antd";
 import { useQueryClient } from "@tanstack/react-query";
 import { usePointSelection } from "../../../stores/usePointSelection";
 import { STATUSES } from "../../../config";
@@ -13,15 +13,15 @@ export const TakeToWorkButton = () => {
   const { prediction, categories, region } = filters;
   const { selection } = usePointSelection();
   const queryClient = useQueryClient();
-  const [popupVisible, setPopupVisible] = useState(false);
+  const [isModalOpened, setIsModalOpened] = useState(false);
 
-  const [isSuccessModalOpened, setIsSuccessModalOpened] = useState(false);
-
-  const { mutate: updateStatus } = useUpdateStatus({
+  const {
+    mutate: updateStatus,
+    isLoading,
+    isSuccess,
+  } = useUpdateStatus({
     onSuccess: () => {
       queryClient.invalidateQueries(["table", 1, filters]);
-      setPopupVisible(false);
-      setIsSuccessModalOpened(true);
     },
   });
 
@@ -47,50 +47,71 @@ export const TakeToWorkButton = () => {
     updateStatus(params);
   };
 
+  const getModalFooter = () => {
+    if (isSuccess) {
+      return [
+        <Button
+          key="ok-button"
+          type="primary"
+          onClick={() => setIsModalOpened(false)}
+        >
+          Хорошо
+        </Button>,
+      ];
+    }
+
+    if (isLoading) return null;
+
+    return (
+      <div className="flex items-center justify-center gap-x-4">
+        <Button onClick={() => setIsModalOpened(false)}>Отмена</Button>
+        <Button type="primary" onClick={takeToWork}>
+          Да
+        </Button>
+      </div>
+    );
+  };
+
   return (
     <>
-      <Popover
-        trigger="click"
-        open={popupVisible}
-        onOpenChange={setPopupVisible}
-        content={
-          <div className="p-2">
-            <Title text="Уверены, что хотите взять отобранные локации в работу?" />
-            <div className="flex items-center justify-center gap-x-4">
-              <Button onClick={() => setPopupVisible(false)}>Отмена</Button>
-              <Button type="primary" onClick={takeToWork}>
-                Да
-              </Button>
-            </div>
-          </div>
-        }
+      <Button
+        type="primary"
+        block
+        className={"mt-2"}
+        onClick={() => setIsModalOpened(true)}
       >
-        <Button type="primary" block className={"mt-2"}>
-          <span className="mr-1">Взять в работу</span>
-          <ArrowRightOutlined />
-        </Button>
-      </Popover>
+        <span className="mr-1">Взять в работу</span>
+        <ArrowRightOutlined />
+      </Button>
+
       <Modal
         title={" "}
         centered
-        open={isSuccessModalOpened}
-        footer={[
-          <Button
-            key="ok-button"
-            type="primary"
-            onClick={() => setIsSuccessModalOpened(false)}
-          >
-            Хорошо
-          </Button>,
-        ]}
+        open={isModalOpened}
+        onCancel={() => setIsModalOpened(false)}
+        closable={true}
+        footer={getModalFooter()}
       >
-        <Alert
-          message="Успешно"
-          description="Выбранные точки отправлены на согласование. Посмотреть на них можно во второй
+        {isSuccess ? (
+          <Alert
+            message="Успешно"
+            description="Выбранные точки отправлены на согласование. Посмотреть на них можно во второй
           вкладке"
-          type="success"
-          showIcon
-        />
+            type="success"
+            showIcon
+          />
+        ) : (
+          <Title
+            text="Уверены, что хотите взять отобранные локации в работу?"
+            className="text-center"
+          />
+        )}
+
+        {isLoading && (
+          <div className="flex justify-center py-2">
+            <Spin tip="Отправляем на согласование..." size="large" />
+          </div>
+        )}
       </Modal>
     </>
   );

src/stores/usePendingPointsFilters.js

@@ -25,16 +25,16 @@ const store = (set) => ({
       state.filters.region = value;
     }),
 
-  clear: (predictionFullRange) =>
+  clear: (fullRange) =>
     set((state) => {
-      if (!predictionFullRange) {
+      if (!fullRange) {
         state.filters = INITIAL;
         return state;
       }
 
       state.filters = {
         ...INITIAL,
-        prediction: [predictionFullRange[0], predictionFullRange[1]],
+        prediction: fullRange.prediction,
       };
     }),
 });

src/stores/useWorkingPointsFilters.js

@@ -41,11 +41,13 @@ const store = (set) => ({
         return state;
       }
 
+      const { deltaTraffic, factTraffic, age } = fullRange;
+
       state.filters = {
         ...INITIAL,
-        deltaTraffic: [fullRange.deltaTraffic[0], fullRange.deltaTraffic[1]],
-        factTraffic: [fullRange.factTraffic[0], fullRange.factTraffic[1]],
-        age: [fullRange.age[0], fullRange.age[1]],
+        deltaTraffic,
+        factTraffic,
+        age,
       };
     }),
 });