@bjsdistribution/dms-client-return 0.0.3 → 0.0.4

package/src/components/order-view/hooks/useGetEventNotes.tsx

@@ -0,0 +1,47 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+// import { useOrderDetails, useOrderProductSystemLogs } from '../store';
+
+function useGetEventNotes() {
+  const ssoToken = getCookie('id_token');
+
+  const perform = async () => {
+    const endpoint = `${getBaseEndpoint()}/events/get/event_information/`;
+    // setLoading(true);
+    try {
+      const headers = {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ssoToken}`,
+        'x-pagination': JSON.stringify({
+          is_pagination: false,
+        }),
+      };
+      const response = await fetch(endpoint, {
+        method: 'GET',
+        headers,
+      });
+      if (!response.ok) {
+        const json = await response.json();
+        const detail = json?.detail;
+        const msg = detail[0]?.msg;
+        console.error('Error response:', msg);
+        // setLoading(false);
+        return [];
+      }
+      const json = await response.json();
+      if (json.code === 200) {
+        return json?.data;
+      }
+      return [];
+    } catch (err) {
+      console.error('Error fetching data:', err);
+      return [];
+    } finally {
+      //   setLoading(false);
+    }
+  };
+  return perform;
+}
+
+export default useGetEventNotes;

package/src/components/order-view/hooks/useGetSystemLogs.tsx

@@ -0,0 +1,60 @@
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+import { useOrderDetails, useOrderProductSystemLogs } from '../store';
+
+function useSystemLogs() {
+  const ssoToken = getCookie('id_token');
+  const [orderDetails] = useOrderDetails();
+  const gsitId = orderDetails?.gsit_order_id;
+  const [, setSystemLogsEvents] = useOrderProductSystemLogs();
+
+  const perform = async () => {
+    const endpoint = `${getBaseEndpoint()}/events/get/event/`;
+    // setLoading(true);
+    try {
+      const headers = {
+        accept: 'application/json',
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${ssoToken}`,
+        'x-pagination': JSON.stringify({
+          page: 1,
+          per_page: 100,
+        }),
+        'x-filters': JSON.stringify([
+          {
+            field: 'object_id',
+            op: '=',
+            value: `${gsitId}`,
+          },
+        ]),
+      };
+      const response = await fetch(endpoint, {
+        method: 'GET',
+        headers,
+      });
+      if (!response.ok) {
+        const json = await response.json();
+        const detail = json?.detail;
+        const msg = detail[0]?.msg;
+        console.error('Error response:', msg);
+        // setLoading(false);
+        return [];
+      }
+      const json = await response.json();
+      if (json.code === 200) {
+        // setLoading(false);
+        setSystemLogsEvents(json.data);
+        return json.data;
+      }
+      return [];
+    } catch (err) {
+      console.error('Error fetching data:', err);
+      return [];
+    } finally {
+      //   setLoading(false);
+    }
+  };
+  return perform;
+}
+
+export default useSystemLogs;

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

@@ -21,6 +21,7 @@ import {
   useOrderId,
   useDepotOptions,
   usePrevOrderDetails,
+  useOrderProductSystemLogs,
 } from './store';
 // import Loader from '../order-daily-overview/header/loader/Loader';
 import { useLoading } from '../order-daily-overview/store/store';
@@ -30,6 +31,7 @@ import RouterHeader from '../order-daily-overview/header/route-header/RouterHead
 // import HeaderFilter from '../order-daily-overview/Header-filters/HeaderFilter';
 // import Filters from '../order-daily-overview/filters/Filters';
 import DetailsFilters from './details-filters/DetailsFilters';
+import useSystemLogs from './hooks/useGetSystemLogs';
 
 interface ApiResponse {
   message: string;
@@ -41,7 +43,7 @@ interface ApiResponse {
 }
 
 function OrderView() {
-  const [, setOrderId] = useOrderId();
+  const [orderId, setOrderId] = useOrderId();
 
   const splitPath = (str: any) => {
     const parts = str?.split('/')?.filter((part: any) => part !== ''); // Filter out empty parts
@@ -49,7 +51,7 @@ function OrderView() {
   };
 
   // For API Call
-  const [, setOrderDetails] = useOrderDetails();
+  const [orderDetails, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
   const [, setLoading] = useLoading();
   const [, setOrderStaticData] = useOrderStaticData();
@@ -57,7 +59,6 @@ function OrderView() {
   const [, setDepotOptions] = useDepotOptions();
   const location = useLocation();
   const paths = splitPath(location.pathname);
-  const orderId = 192;
 
   const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
     data: OrdersType[];
@@ -154,6 +155,24 @@ function OrderView() {
     }
   }, [depotDataLoading]);
 
+  const gsitId = orderDetails?.gsit_order_id;
+
+  const systemLogsData = useSystemLogs();
+  const [, setSystemLogsEvents] = useOrderProductSystemLogs();
+
+  const fetchReminderData = async () => {
+    const result = await systemLogsData();
+    setSystemLogsEvents(result);
+  };
+
+  useEffect(() => {
+    if (gsitId) {
+      fetchReminderData();
+
+      console.log('Setting filters for gsitId:', gsitId);
+    }
+  }, [gsitId]);
+
   return (
     <>
       <DashBoardWrapper>

package/src/components/order-view/modalsPopup/CreateReturnModal.tsx

@@ -0,0 +1,83 @@
+import { Alert, Checkbox } from '@bjsdistribution/dms-component-library';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { useLocationData } from '../../store';
+
+const CreateReturnModal = () => {
+  const [, setSelectedLocations] = useState<any[]>();
+  const [locationData] = useLocationData();
+
+  const handleSelectLocations = (id: any) => {
+    setSelectedLocations((prevSelectedLocations: any) => {
+      const isSelected = prevSelectedLocations?.some(
+        (location: any) => location.id === id
+      );
+
+      if (isSelected) {
+        return prevSelectedLocations.filter(
+          (invoice: any) => invoice.id !== id
+        );
+      } else {
+        return [...prevSelectedLocations, { id, status_id: 3 }];
+      }
+    });
+  };
+  return (
+    <Wrapper>
+      <Alert
+        onClose={() => {}}
+        description=""
+        type="info"
+        title="Do you wish to proceed?"
+        showOkButton={false}
+      />
+      <Container>
+        <ul style={{ listStyle: 'none', padding: 0 }}>
+          {locationData?.map((invoice: any) => (
+            <li
+              key={invoice.id}
+              style={{
+                marginBottom: '8px',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <Checkbox
+                checked={true}
+                onChange={() => handleSelectLocations(invoice.id)}
+              />
+              <StyledText style={{ marginLeft: '8px' }}>
+                {invoice.location_name}
+              </StyledText>
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </Wrapper>
+  );
+};
+
+const StyledText = styled.div`
+  color: #8d8f90;
+  font-family: Poppins;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+`;
+
+const Container = styled.div``;
+
+export const Wrapper = styled.div`
+  display: flex;
+  padding: 15px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 15px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+`;
+
+export default CreateReturnModal;

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -14,24 +14,24 @@ import {
 } from '../store';
 
 import ProductAction from './ProductAction';
-import BulkUpdateProduct from './BulkUpdateProduct';
-import DeleteProduct from './DeleteProduct';
+// import DeleteProduct from './DeleteProduct';
 import AddProduct from './AddProduct';
 import logsTable from './qclogs/logsTable';
 import DefectsModal from './DefectsModal';
 import repackModal from './RepackModal';
-import { ApiResponse, DeleteProds } from '../types';
+import { ApiResponse } from '../types';
+import CreateReturnModal from './CreateReturnModal';
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
-  const [, setProductData] = useProductDetails();
+  const [,] = useProductDetails();
   const [orderProduct, setOrderProduct] = useCreateOrderProducts();
   const [orderId] = useOrderId();
-  const [selectedRows, setSelectedRows] = useDeleteProdsID();
+  const [selectedRows] = useDeleteProdsID();
   const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
   const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
   const [selectedProductId] = useAtom(selectedProductIdAtom);
   const [selectedTab] = useAtom(selectedTabKeyAtom);
-  const [isFormValid, setIsFormValid] = useState(false);
+  const [, setIsFormValid] = useState(false);
 
   console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
 
@@ -48,45 +48,45 @@ const ModalManager = () => {
     setIsFormValid(validateForm());
   }, [selectedRows]);
 
-  const payloads: DeleteProds[] = selectedRows?.map(row => ({
-    id: row.id,
-    order_id: row.order_id,
-  }));
+  // const payloads: DeleteProds[] = selectedRows?.map(row => ({
+  //   id: row.id,
+  //   order_id: row.order_id,
+  // }));
 
-  const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `order/order_products/delete/`,
-    method: 'DELETE',
-    body: payloads,
-    performAction: false,
-  });
+  // const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `order/order_products/delete/`,
+  //   method: 'DELETE',
+  //   body: payloads,
+  //   performAction: false,
+  // });
 
   // Effect to handle API response
-  useEffect(() => {
-    if (isresponse && isresponse?.data) {
-      handleRemoveRow();
-      dispatch({ type: 'close' });
-    }
-  }, [isresponse]);
-  const onDeleteProducts = () => {
-    if (isFormValid) {
-      setaction(true);
-    } else {
-      console.log('Please fill in all required fields before proceeding.');
-    }
-  };
+  // useEffect(() => {
+  //   if (isresponse && isresponse?.data) {
+  //     handleRemoveRow();
+  //     dispatch({ type: 'close' });
+  //   }
+  // }, [isresponse]);
+  // const onDeleteProducts = () => {
+  //   if (isFormValid) {
+  //     setaction(true);
+  //   } else {
+  //     console.log('Please fill in all required fields before proceeding.');
+  //   }
+  // };
 
-  const handleRemoveRow = () => {
-    if (selectedRows.length > 0) {
-      setProductData((prevProductData: any) =>
-        prevProductData.filter(
-          (item: any) => !selectedRows.some(row => row.id === item.id)
-        )
-      );
-      setSelectedRows([]);
-    }
-  };
+  // const handleRemoveRow = () => {
+  //   if (selectedRows.length > 0) {
+  //     setProductData((prevProductData: any) =>
+  //       prevProductData.filter(
+  //         (item: any) => !selectedRows.some(row => row.id === item.id)
+  //       )
+  //     );
+  //     setSelectedRows([]);
+  //   }
+  // };
 
   // API block for creating product order
   const {
@@ -226,13 +226,13 @@ const ModalManager = () => {
 
   return (
     <>
-      {popupName?.state == 'bulkUpdate' && (
+      {popupName?.state == 'create-return' && (
         <AntModal
-          openStatus={popupName?.state == 'bulkUpdate' ? true : false}
+          openStatus={popupName?.state == 'create-return' ? true : false}
           closeModal={() => closeModal()}
           PopupHeader={{
-            heading: 'BULK UPDATE PRODUCT TYPE',
-            subHeading: 'Gemma Harris, LE12 6AW',
+            heading: 'CONFIRM RETURN',
+            subHeading: '',
           }}
           PopupFooter={{
             btns: [
@@ -245,13 +245,13 @@ const ModalManager = () => {
 
             btnAlign: 'justifyEnd',
           }}
-          BodyComponent={BulkUpdateProduct}
-          width={1104}
+          BodyComponent={CreateReturnModal}
+          width={800}
           classNameAdd={'globalPopup'}
         />
       )}
 
-      {popupName?.state === 'deleteProduct' && (
+      {/* {popupName?.state === 'deleteProduct' && (
         <AntModal
           openStatus={popupName?.state === 'deleteProduct'}
           closeModal={closeModal}
@@ -275,7 +275,7 @@ const ModalManager = () => {
           width={1104}
           classNameAdd={'globalPopup'}
         />
-      )}
+      )} */}
 
       {popupName?.state === 'addProduct' && (
         <AntModal

package/src/components/order-view/notes/AddNote.tsx

@@ -1,27 +1,130 @@
 import {
   Button,
   Label,
-  TextArea,
+  // SelectDropdown,
 } from '@bjsdistribution/dms-component-library';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+// import NoteType from './NoteType';
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
+import { getCookie } from '../utils';
+import { useLocation } from 'react-router-dom';
+import {
+  useCallAPi,
+  usemoduleIds,
+  UseNotesLoading,
+  useOrderId,
+} from '../store';
+import { notification } from 'antd';
 
 function AddNote() {
-  const SaveNote = () => {
-    alert('saved');
+  const [, setNoteLoadingStore] = UseNotesLoading();
+  const [noteText, setNoteText] = useState('');
+  const [orderId] = useOrderId();
+
+  const location = useLocation();
+  const pathname = location.pathname;
+  const orderIdLocaation = pathname.split('/')[1];
+
+  // const [note, setNote] = useState('');
+  const [, CallAPi] = useCallAPi();
+  const ssoToken = getCookie('id_token');
+
+  const [moduleIds] = usemoduleIds();
+
+  // Save New Note
+
+  const [notificationData, setNotificationData] = useState<{
+    type: 'success' | 'error';
+    message: string;
+    description: string;
+  } | null>(null);
+
+  const saveNote = async () => {
+    setNoteLoadingStore(true);
+    CallAPi(false);
+
+    if (!noteText) return;
+    const endpoint = `${getBaseEndpoint()}/audit_logs/orders/`;
+    const payload = {
+      audit_logs: [
+        {
+          parent_object_id: orderId || orderIdLocaation,
+          parent_module_id: moduleIds?.parentId,
+          module_id: moduleIds?.id,
+          module_object_id: orderId || orderIdLocaation,
+          action: 'create',
+          description: noteText,
+          data_dump: '{}',
+        },
+      ],
+    };
+
+    try {
+      const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${ssoToken}`,
+        },
+        body: JSON.stringify(payload),
+      });
+
+      // setNoteLoadingStore(false);
+
+      const { message, error }: any = response;
+      if (response) {
+        setNotificationData({
+          type: 'success',
+          message: 'Success',
+          description: message || 'Successfully Created Note.',
+        });
+        setNoteLoadingStore(true);
+        setNoteText('');
+        setNoteLoadingStore(false);
+        CallAPi(true);
+      } else if (error) {
+        // Error: Set error notification
+        setNotificationData({
+          type: 'error',
+          message: 'Error',
+          description: error || 'Something went wrong. Please try again.',
+        });
+      }
+    } catch (error) {
+      console.error('Error saving note:', error);
+      alert('Failed to save note');
+    }
   };
 
+  useEffect(() => {
+    if (notificationData) {
+      const { type, message, description } = notificationData;
+      notification[type]({
+        message,
+        description,
+        duration: 5,
+      });
+      setNotificationData(null); // Clear notification data after showing
+    }
+
+    // Set top position for notifications
+    notification.config({
+      top: 80,
+    });
+  }, [notificationData]);
+
   return (
     <Container>
       <Label label="Add New Note" />
-      {/* <StyledSelectDropdown
-        placeholder="Standard"
-        inputId="standard"
-        openMenuOnFocus
-      /> */}
-      <CustomTextArea rows={3} />
+      <StyledTextArea
+        name="description"
+        placeholder="Enter your note here..."
+        value={noteText}
+        onChange={(e: any) => setNoteText(e.target.value)}
+      />
       <SaveNoteContainer>
-        <Button style={{ borderRadius: '20px' }} onClick={SaveNote}>
+        <Button disabled={!noteText} onClick={saveNote}>
           SAVE NOTE
         </Button>
       </SaveNoteContainer>
@@ -39,10 +142,21 @@ const Container = styled.div`
 const SaveNoteContainer = styled.div`
   display: inline-flex;
   gap: 10px;
+  .disabled button {
+    opacity: 0.5;
+    cursor: default;
+  }
 `;
 
-const CustomTextArea = styled(TextArea)`
-  flex: 1;
+const StyledTextArea = styled.textarea`
+  height: 57px;
+  border-radius: 12px;
+  background: #fff;
+  resize: none;
+  border-radius: 8px;
+  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
+  background: var(--Flowkit-White, #fff);
+  padding: 8px 12px;
 `;
 
 // const StyledSelectDropdown = styled(SelectDropdown)`

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

@@ -1,9 +1,107 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import AddNote from './AddNote';
 import AuditLogs from './logs';
-
+import { useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  useCallAPi,
+  usegetNotes,
+  usemoduleIds,
+  UseNotesLoading,
+  useOrderId,
+} from '../store';
+import { useLocation } from 'react-router-dom';
 function Notes() {
+  const [moduleIds, setModuleIds] = usemoduleIds();
+  const [orderId] = useOrderId();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const orderIdLocaation = pathname.split('/')[1];
+  const [, setNoteLoadingStore] = UseNotesLoading();
+  const [, setNotes] = usegetNotes();
+  const [loderStatus] = useCallAPi();
+
+  // Declare `allIds` state to store the comma-separated IDs
+  // const [allIds, setAllIds] = useState<string | null>(null);
+
+  // Fetch module IDs
+  const { data: fetchedData, loading: apiLoading } = useApiHook<{ data: any }>({
+    endpoint: 'audit_logs/modules/',
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (!apiLoading && fetchedData?.data) {
+      const modules =
+        fetchedData?.data
+          .filter((item: any) => item?.name === 'ORDER')
+          .flatMap((item: any) =>
+            item?.static_child_mappings?.map((child: any) => ({
+              id: child?.child_module?.id,
+              name: child?.child_module?.name,
+              parentId: child?.parent_module?.id,
+              parentName: child?.parent_module?.name,
+            }))
+          ) || [];
+
+      // console.log(modules, 'modulesmodules');
+
+      // const ids = modules?.map((module: any) => module.id).join(',');
+      // setAllIds(ids);
+
+      // console.log(ids, 'allIds');
+
+      const orderNoteModule = modules?.find(
+        (module: any) => module?.name === 'ORDER-NOTE'
+      );
+
+      setModuleIds(orderNoteModule || modules[0] || null);
+    }
+  }, [apiLoading, fetchedData]);
+
+  // Fetch Notes Data when `allIds` is available
+  const {
+    data: NotesData,
+    loading: NotesLoading,
+    setShouldPerformAction,
+  } = useApiHook<{ data: any }>({
+    // Use `allIds` in the endpoint if it's set
+    endpoint: `audit_logs/?module_id=${
+      moduleIds?.parentId
+    }&module_object_id=${orderId || orderIdLocaation}
+    `,
+    method: 'GET',
+    performAction: false,
+  });
+
+  // &sub_module_ids=${allIds}
+
+  useEffect(() => {
+    setNoteLoadingStore(true);
+    if (moduleIds) {
+      // Ensure `allIds` is set
+      setShouldPerformAction(true);
+    }
+    if (!NotesLoading && NotesData?.data) {
+      const updatedData = NotesData?.data
+        // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
+        // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
+        .flat()
+        .filter(Boolean);
+
+      const combinedArray = updatedData.flat();
+      combinedArray.sort(
+        (a: any, b: any) =>
+          new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+      );
+      setNotes(combinedArray);
+      setNoteLoadingStore(NotesLoading);
+      loderStatus
+        ? setShouldPerformAction(true)
+        : setShouldPerformAction(false);
+    }
+  }, [moduleIds, NotesLoading, loderStatus]); // Add `allIds` to dependencies
+
   return (
     <Container>
       <CardHeader>NOTES</CardHeader>
@@ -31,7 +129,6 @@ const CardHeader = styled.div`
   text-transform: uppercase;
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
-
 `;
 
 const CustomizedFormSection = styled.div`