@bjsdistribution/dms-client-return 0.0.94-prod → 0.0.95-prod

package/src/components/order-view/notification/ReminderTemplate.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { useCurrentAction } from '../store';
-import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import {
+  FlagAlert,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 import { useReminderRefId } from '../order-actions/store';
-import { formatDate } from '../order-actions/utils';
+import { getDay } from '../order-actions/utils';
 
 function ReminderTemplate({ data, dismissReminder }: any) {
   const [, setCurrentAction] = useCurrentAction();
@@ -19,16 +22,16 @@ function ReminderTemplate({ data, dismissReminder }: any) {
   };
 
   const type =
-    data?.reminder_status?.name === 'AD'
-      ? 'info'
-      : data?.reminder_status?.name === 'pending'
+    data?.status === true
+      ? 'success'
+      : data?.status === false
       ? 'warn'
-      : 'success';
+      : 'info';
 
   const titleColor =
-    data?.reminder_status?.name === 'SD'
+    data?.status === true
       ? '#36A053'
-      : data?.reminder_status?.name === 'pending'
+      : data?.staus === false
       ? '#FEBA30'
       : '#3A3630';
 
@@ -42,14 +45,21 @@ function ReminderTemplate({ data, dismissReminder }: any) {
               <StyledTitle color={titleColor}>
                 Reminder:
                 <StyledLink onClick={() => handleClick(data.id)}>
-                  {' '}
-                  {data?.reference || 'NA'}{' '}
-                </StyledLink>
-                {formatDate(data?.due)}, Assigned to :{' '}
+                  {data?.reference || 'NA'}
+                </StyledLink>{' '}
+                (Due - {getDay(data?.due_datetime)},{' '}
+                {`${formatUtcToLocal(data?.due_datetime).date} ${
+                  formatUtcToLocal(data?.due_datetime).time
+                }`}
+                ), Assigned to: {data?.assigned_to} Completed On:{' '}
+                {getDay(data?.completed_at)},{' '}
+                {`${formatUtcToLocal(data?.completed_at).date} ${
+                  formatUtcToLocal(data?.completed_at).time
+                }`} By: {data?.completed_by}
               </StyledTitle>
             </>
           }
-          description={`${data?.details}`}
+          description={`${data?.description}`}
           showOkButton={false}
           onClose={() => dismissReminder(data.id)}
         />
@@ -75,7 +85,6 @@ const StyledLink = styled.span`
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
-  cursor: pointer;
 `;
 
 export default ReminderTemplate;

package/src/components/order-view/notification/Tabs.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useOrderDetails, useTabType } from '../store';
+import OrderTemplate from './OrderTemplate';
 import FlagTemplate from './FlagTemplate';
 import ReminderTemplate from './ReminderTemplate';
-import OrderTemplate from './OrderTemplate';
 
 function Tabs({
-  activeNotifications,
-  closedNotifications,
+  activeTasks,
+  closedTasks,
   activeReminders,
   closedReminders,
   dismissReminder,
   dismissFlags,
+  routeInfoData,
 }: any) {
   const [activeTab] = useTabType();
   const [orderDetails] = useOrderDetails();
-
-  const initialNotifications = activeNotifications?.slice(0, 3);
-  const additionalNotifications = activeNotifications?.slice(3);
-
+  const initialNotifications = activeTasks?.slice(0, 3);
+  const additionalNotifications = activeTasks?.slice(3);
   const initialReminders = activeReminders?.slice(0, 3);
   const additionalReminders = activeReminders?.slice(3);
 
@@ -28,8 +27,10 @@ function Tabs({
         <Container className="tab-content">
           {activeTab === 'active' && (
             <>
-              <OrderTemplate orderDetails={orderDetails} />
-
+              <OrderTemplate
+                orderDetails={orderDetails}
+                routeInfoData={routeInfoData}
+              />
               {initialReminders?.map((item: any, index: any) => (
                 <ReminderTemplate
                   key={index}
@@ -37,7 +38,7 @@ function Tabs({
                   dismissReminder={dismissReminder}
                 />
               ))}
-              {initialNotifications.map((item: any, index: any) => (
+              {initialNotifications?.map((item: any, index: any) => (
                 <FlagTemplate
                   key={index}
                   data={item}
@@ -45,14 +46,14 @@ function Tabs({
                 />
               ))}
               <>
-                {additionalReminders.map((item: any, index: any) => (
+                {additionalReminders?.map((item: any, index: any) => (
                   <ReminderTemplate
                     key={index + initialReminders.length}
                     data={item}
                     dismissReminder={dismissReminder}
                   />
                 ))}
-                {additionalNotifications.map((item: any, index: any) => (
+                {additionalNotifications?.map((item: any, index: any) => (
                   <FlagTemplate
                     key={index + initialNotifications.length}
                     data={item}
@@ -64,14 +65,14 @@ function Tabs({
           )}
           {activeTab === 'closed' && (
             <>
-              {closedReminders.map((item: any, index: any) => (
+              {closedReminders?.map((item: any, index: any) => (
                 <ReminderTemplate
                   key={index}
                   data={item}
                   dismissReminder={dismissReminder}
                 />
               ))}
-              {closedNotifications.map((item: any, index: any) => (
+              {closedTasks?.map((item: any, index: any) => (
                 <FlagTemplate
                   key={index}
                   data={item}

package/src/components/order-view/notification/index.tsx

@@ -1,20 +1,27 @@
 import {
   SectionHeader,
-  useApiHook,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
 import React, { useEffect, useState } from 'react';
 import Tabs from './Tabs';
 import styled from 'styled-components';
-import { useInfoType, useOrderDetails, useTabType } from '../store';
+import {
+  useInfoType,
+  useOrderAlertsData,
+  useOrderDetails,
+  useOrderId,
+  useRouteId,
+  useTabType,
+} from '../store';
 import NotifyFlag from '../../../assets/icons/NotifyFlag';
 import {
-  useNotificationData,
+  useTasksData,
   useOrderNotify,
   useReminderNotiData,
   useRouteDetails,
-  // useTaskLoading,
+  useAllOrderStatus,
 } from '../order-actions/store';
+import { useParams, useSearchParams } from 'react-router-dom';
 
 interface ApiResponse {
   message: string;
@@ -28,17 +35,32 @@ interface ApiResponse {
 function Notification() {
   const [activeTab, setActiveTab] = useTabType();
   const [, setShowMoreInfo] = useInfoType();
-  const [OrderData] = useOrderDetails();
-  const [notificationData, setNotififcationData] = useNotificationData();
-  // const [flagLoading] = useTaskLoading();
-  const [reminderData, setReminderData] = useReminderNotiData();
-  const routeId = OrderData?.order_routes?.route_id;
+  const [orderData] = useOrderDetails();
+  const [taskData, setTasksData] = useTasksData();
+  const [reminderNotifyData, setReminderNotifyData] = useReminderNotiData();
   const [, setRouteData] = useRouteDetails();
-  const [orderCount] = useOrderNotify();
-  const [activeNotifications, setActiveNotifications] = useState([]);
-  const [closedNotifications, setCloseNotifications] = useState([]);
+  const [, setCount] = useOrderNotify();
   const [activeReminders, setActiveReminders] = useState([]);
   const [closedReminders, setCloseReminders] = useState([]);
+  const [activeTasks, setActiveTasks] = useState([]);
+  const [closedTasks, setCloseTasks] = useState([]);
+  const [idOfRoute, setRouteId] = useRouteId();
+  const [, setStatusVal] = useAllOrderStatus();
+  const [searchParams] = useSearchParams();
+  const [orderAlertsData, setOrderAlertsData] = useOrderAlertsData();
+  const orderIdParams = searchParams.get('order');
+  const { id } = useParams();
+  const [orderId, setOrderId] = useOrderId();
+  const routeId = orderData?.order_routes?.route_id;
+
+  useEffect(() => {
+    if (orderIdParams) {
+      setOrderId(id);
+    } else {
+      const paths = location.pathname.split('/');
+      setOrderId(paths[paths?.length - 1]);
+    }
+  }, []);
 
   //Unresolved API
   const {
@@ -48,10 +70,10 @@ function Notification() {
   } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `/tasks/`,
+    endpoint: `/v1/task/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: OrderData.id }],
+    filters: [{ field: 'order_id', op: '=', value: orderId }],
   });
 
   //reminder get
@@ -62,99 +84,141 @@ function Notification() {
   } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `/tasks/reminder/get/`,
+    endpoint: `/v1/task/reminder/get/`,
     method: 'GET',
     pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: OrderData.id }],
+    filters: [{ field: 'order_id', op: '=', value: orderId }],
   });
 
+  useEffect(() => {
+    setStatusVal(orderData?.status_value);
+  }, [orderData?.status_value]);
+
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
+    //additionally set count
+    setCount(1);
     setShowMoreInfo(false);
   };
-
-  //flags notification data
+  //flags data set
   useEffect(() => {
     if (fetchedUnresolvedData && fetchedUnresolvedData?.data) {
-      setNotififcationData(fetchedUnresolvedData?.data);
+      setTasksData(fetchedUnresolvedData?.data);
     }
-  }, [unresolvedLoading]);
+  }, [unresolvedLoading, fetchedUnresolvedData]);
 
   //reminder data set
   useEffect(() => {
     if (fetchedReminderData && fetchedReminderData?.data) {
-      setReminderData(fetchedReminderData?.data);
+      setReminderNotifyData(fetchedReminderData?.data);
     }
   }, [reminderLoading]);
 
-  //route API calling...
-  const { data: fetchedData, setShouldPerformAction } = useApiHook<{
+  // Route API calling...
+  const { data: fetchedData, fetchData: fetchRoute } = useAxios<{
     data: ApiResponse[];
   }>({
     endpoint: `route/${routeId}`,
     method: 'GET',
-    performAction: false,
   });
 
   useEffect(() => {
-    if (OrderData.id) {
-      callReminderApi();
-      callUnresolvedTaskApi();
+    if (idOfRoute !== null && idOfRoute !== undefined) {
+      fetchRoute();
     }
-  }, [OrderData.id]);
+    return () => {
+      setRouteId(null);
+    };
+  }, [idOfRoute]);
+
+  const {
+    data: alertsData,
+    fetchData: callOrderAlertsApi,
+    loading: alertsApiLoading,
+  } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `v1/orders/alerts/?order_id=${orderId}`,
+    method: 'GET',
+  });
 
   useEffect(() => {
-    if (routeId) {
-      setShouldPerformAction(true);
-      setRouteData(fetchedData?.data[0]);
+    if (alertsData && alertsData?.data) {
+      setOrderAlertsData(alertsData?.data);
     }
-  });
+  }, [alertsApiLoading]);
 
   useEffect(() => {
-    if (notificationData?.length > 0) {
-      setActiveNotifications(
-        notificationData?.filter((item: any) => item.task_status_id !== 2)
-      );
-      setCloseNotifications(
-        notificationData?.filter((item: any) => item?.task_status_id === 2)
-      );
+    const fetchData = async () => {
+      if (orderId == null) return;
+
+      try {
+        await callReminderApi();
+        await callUnresolvedTaskApi();
+        await callOrderAlertsApi();
+      } catch (error) {
+        console.error('Error while fetching order-related data:', error);
+      }
+    };
+
+    fetchData();
+  }, [orderId]);
+
+  useEffect(() => {
+    if (fetchedData && fetchedData?.data) {
+      const data = fetchedData?.data[0];
+      setRouteData(data);
     }
-  }, [notificationData]);
+  }, []);
 
   useEffect(() => {
-    if (reminderData?.length > 0) {
+    if (taskData?.length > 0) {
+      setActiveTasks(taskData?.filter((item: any) => item.status !== 'SD'));
+      setCloseTasks(taskData?.filter((item: any) => item?.status === 'SD'));
+    }
+  }, [taskData, fetchedUnresolvedData]);
+
+  useEffect(() => {
+    if (reminderNotifyData?.length > 0) {
       setActiveReminders(
-        reminderData?.filter(
-          (item: any) => item.status_id === 1 || item.status_id === 3
-        )
+        reminderNotifyData?.filter((item: any) => item.status === false)
       );
       setCloseReminders(
-        reminderData?.filter((item: any) => item?.status_id === 2)
+        reminderNotifyData?.filter((item: any) => item?.status === true)
       );
     }
-  }, [reminderData]);
+  }, [reminderNotifyData]);
 
   //dismiss notifcations
   const dismissFlags = (id: any) => {
-    setActiveNotifications(prevFlags =>
-      prevFlags.filter((flags: any) => flags.id !== id)
-    );
-    setCloseNotifications(prevFlags =>
-      prevFlags.filter((flags: any) => flags.id !== id)
-    );
+    setActiveTasks(prevFlags => {
+      const updatedFlags = prevFlags?.filter((flags: any) => flags.id !== id);
+      return updatedFlags;
+    });
+
+    setCloseTasks(prevFlags => {
+      const updatedFlags = prevFlags?.filter((flags: any) => flags.id !== id);
+      return updatedFlags;
+    });
   };
+
   const dismissReminder = (id: any) => {
     setActiveReminders(prevReminders =>
-      prevReminders.filter((reminder: any) => reminder.id !== id)
+      prevReminders?.filter((reminder: any) => reminder.id !== id)
     );
     setCloseReminders(prevReminders =>
-      prevReminders.filter((reminder: any) => reminder.id !== id)
+      prevReminders?.filter((reminder: any) => reminder.id !== id)
     );
   };
 
   const totalActiveCount =
-    activeNotifications.length + activeReminders.length + orderCount;
-  const totalClosedCount = closedNotifications.length + closedReminders.length;
+    activeTasks?.filter((item: any) => item.status !== 'SD')?.length +
+    activeReminders?.length;
+  // orderCount;
+
+  const totalClosedCount =
+    closedTasks?.filter((item: any) => item.status === 'SD')?.length +
+    closedReminders?.length;
 
   return (
     <>
@@ -181,15 +245,23 @@ function Notification() {
             </StyledTab>
           </TabsData>
         </Container>
-        {notificationData.length > 0 || reminderData.length > 0 || OrderData ? (
+        {unresolvedLoading || reminderLoading ? (
+          <Loader>
+            <Spinner />
+            <Text>Fetching Notifications...</Text>
+          </Loader>
+        ) : taskData?.length > 0 ||
+          reminderNotifyData?.length > 0 ||
+          orderData ? (
           <TabsWrapper>
             <Tabs
-              activeNotifications={activeNotifications}
-              closedNotifications={closedNotifications}
+              activeTasks={activeTasks}
+              closedTasks={closedTasks}
               activeReminders={activeReminders}
               closedReminders={closedReminders}
               dismissReminder={dismissReminder}
               dismissFlags={dismissFlags}
+              routeInfoData={orderAlertsData}
             />
           </TabsWrapper>
         ) : (
@@ -208,31 +280,31 @@ const Container = styled.div`
   border-bottom: 1px solid #ccc;
 `;
 
-// const Loader = styled.div`
-//   align-items: center;
-//   justify-content: center;
-//   display: flex;
-//   flex-direction: column;
-//   gap: 10px;
-// `;
-
-// const Spinner = styled.div`
-//   border: 4px solid rgba(0, 0, 0, 0.1);
-//   border-left-color: #3a3630;
-//   border-radius: 50%;
-//   width: 40px;
-//   height: 40px;
-//   animation: spin 1s linear infinite;
-
-//   @keyframes spin {
-//     0% {
-//       transform: rotate(0deg);
-//     }
-//     100% {
-//       transform: rotate(360deg);
-//     }
-//   }
-// `;
+const Loader = styled.div`
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Spinner = styled.div`
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #3a3630;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
 
 const FlagContainer = styled.div`
   padding: 8px;
@@ -297,7 +369,7 @@ const Label = styled(SectionHeader)`
 
 const TabsWrapper = styled.div`
   /* min-height: 200px; */
-  max-height: 250px;
+  max-height: 350px;
   overflow-y: auto;
   scrollbar-width: none;
   -ms-overflow-style: none;
@@ -319,11 +391,11 @@ const TabsWrapper = styled.div`
   }
 `;
 
-// const Text = styled.div`
-//   color: var(--tonal-brown-651, #6a7378);
-//   font-family: Lato;
-//   font-size: 13px;
-//   font-style: normal;
-//   font-weight: 600;
-// `;
+const Text = styled.div`
+  color: var(--tonal-brown-651, #6a7378);
+  font-family: Lato;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+`;
 export default Notification;

package/src/components/order-view/order-actions/actions/add-resources/index.tsx

@@ -21,8 +21,8 @@ import {
 } from '../../store';
 import OrderActionsDropdown from '../../Dropdown';
 import { notification } from 'antd';
-import { ApiResponse } from '../../../types';
 import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
 
 function AddResources() {
   const [, setCurrentAction] = useCurrentAction();
@@ -37,6 +37,14 @@ function AddResources() {
   const [orderId] = useOrderId();
   const [selectedVisibility] = useAtom(selectedVisibilityAtom);
 
+  //add resources POST API
+  const { fetchData: callResourcesAPI } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/${orderId}/order_resources/?document_type=${selectedDocumentType}&type=${selectedType}&category=${selectedCategoryId}&visibility=${selectedVisibility}`,
+    method: 'POST',
+  });
+
   const onClose = () => {
     setCurrentAction(undefined);
     setUploadedFiles([]);
@@ -58,17 +66,7 @@ function AddResources() {
       setSelectedType(selectedOption.value);
     }
   };
-
-  // upload files
-  const { fetchData: callUploadFile } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/orders/${orderId}/order_resources/?document_type=${selectedDocumentType}&type=${selectedType}&category=${selectedCategoryId}&visibility=${selectedVisibility}`,
-    method: 'POST',
-  });
-
-  //upload files
-
+  console.log(uploadedFiles, 'filesfiles');
   const handleSubmit = async () => {
     if (!uploadedFiles) {
       notification.error({ message: 'No files selected' });
@@ -83,29 +81,21 @@ function AddResources() {
     }
 
     try {
-      let response = (await callUploadFile({
+      let response = (await callResourcesAPI({
         payload: formData,
       })) as {
         code: number | null;
         error?: string | null | undefined;
         [key: string]: any;
       };
-      if (response?.code == 200 && response?.data?.length > 0) {
-        notification.success({
-          message: 'Success',
-          description: `${response?.message}`,
-        });
-        onClose(); // Close modal after successful upload
-        setResources(false);
-        setTimeout(() => {
-          setResources(true);
-        }, 1000);
-      } else {
-        notification.error({
-          message: 'Error',
-          description: `${response?.error}`,
-        });
-      }
+      console.log('Upload successful:', response);
+      notification.success({ message: 'Files uploaded successfully' });
+      onClose(); // Close modal after successful upload
+      setResources(false);
+
+      setTimeout(() => {
+        setResources(true);
+      }, 1000);
     } catch (error) {
       console.error('Upload failed:', error);
     }