@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.20-prod

package/src/components/order-view/general-information/Status.tsx

@@ -1,34 +1,66 @@
 import React from 'react';
 import styled from 'styled-components';
 import { StatusOptions } from '../helper';
-import Divider from '../../../assets/icons/Divider';
 // Import icon
 import RouteIcon from '../../../assets/icons/RoutedIcon';
 import SuccessIcon from '../../../assets/icons/SuccessIcon';
 import DeliveredIcon from '../../../assets/icons/DeliveredIcon';
 import ConfirmedIcon from '../../../assets/icons/ConfirmedIcon';
 import { useStatusDetails } from '../store';
+import { Skeleton } from 'antd';
+import Divider from '../../../assets/icons/Divider';
 
-function Status() {
+function Status({ statusDataLoading }: any) {
   const [orderStatus] = useStatusDetails();
-
   return (
-    <Container>
-      <BoxContainer>
-        {StatusOptions.map((option, index) => (
-          <React.Fragment key={index}>
-            <TextContainer>
-              {renderIcon(option.value, orderStatus)}
-              <Heading>{option.label}</Heading>
-            </TextContainer>
-            {index < StatusOptions.length - 1 && <Divider />}
-          </React.Fragment>
-        ))}
-      </BoxContainer>
-    </Container>
+    <>
+      <Container>
+        <BoxContainer>
+          {statusDataLoading ? (
+            <>
+              <StatusSkeletonRow />
+            </>
+          ) : (
+            StatusOptions?.map((option, index) => (
+              <React.Fragment key={index}>
+                <TextContainer>
+                  {renderIcon(option.value, orderStatus)}
+                  <Heading>{option.label}</Heading>
+                </TextContainer>
+                {index < StatusOptions.length - 1 && <Divider />}
+              </React.Fragment>
+            ))
+          )}
+        </BoxContainer>
+      </Container>
+    </>
   );
 }
-
+const StatusSkeletonItem = () => (
+  <SkeletonItemContainer>
+    <Skeleton.Avatar size="small" style={{ marginRight: 12 }} />
+    <Skeleton.Input
+      active
+      size="small"
+      style={{ width: 150, borderRadius: 8 }}
+    />
+  </SkeletonItemContainer>
+);
+const StatusSkeletonRow = () => (
+  <StatusBox>
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+    <SkeletonDivider />
+    <StatusSkeletonItem />
+  </StatusBox>
+);
 const renderIcon = (value: any, orderStatus: any) => {
   const status = orderStatus && orderStatus.length > 0 ? orderStatus[0] : null;
 
@@ -72,11 +104,53 @@ const renderIcon = (value: any, orderStatus: any) => {
   }
 };
 
+// const RowWrapper = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   background: #fff;
+//   border-radius: 12px;
+//   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+//   padding: 16px;
+// `;
+
+// const HeaderPlaceholder = styled.div`
+//   display: flex;
+//   align-items: center;
+//   padding: 8px 0;
+//   gap: 12px;
+// `;
+
+const StatusBox = styled.div`
+  display: flex;
+  align-items: center;
+  background: #fcfcfc;
+  border: 1px solid #eee;
+  border-radius: 20px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 5px;
+  width: -webkit-fill-available;
+`;
+
+const SkeletonItemContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const SkeletonDivider = styled.div`
+  width: 12px;
+  height: 2px;
+  background-color: #e0e0e0;
+  margin: 0 4px;
+  border-radius: 2px;
+`;
+
 const BoxContainer = styled.div`
   border: 1px solid #e3e3e3;
   display: flex;
   justify-content: space-evenly;
-  border-radius: 8px;
+  border-radius: 20px;
   background: #f8fafc;
   align-items: center;
   height: 5%;

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

@@ -3,10 +3,10 @@ import Status from './Status';
 import styled from 'styled-components';
 // import DropDownOptions from './dropdowns';
 
-function GeneralHeader() {
+function GeneralHeader({ statusDataLoading }: any) {
   return (
     <Section>
-      <Status />
+      <Status statusDataLoading={statusDataLoading} />
       {/* <DropDownOptions /> */}
     </Section>
   );

package/src/components/order-view/generic-table/AuditLogs.tsx

@@ -1,12 +1,16 @@
 import styled from 'styled-components';
 import React from 'react';
+
 import { Skeleton } from 'antd';
-import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
-import { useAuditLogLoadingState, usegetNotes } from '../store';
+import {
+  PrivateIcon,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import { NotesTableData } from '../notes/logs/fakeData';
+import { useAuditLogLoadingState, usegetNotes } from '../store';
 
 const GenericAuditLogsTable = () => {
-  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
+  const tableHeadData = NotesTableData[0]?.tableHead; // Assuming NotesTableData contains table header information
   const [getNotes] = usegetNotes();
   const [auditLogLoadingStatus] = useAuditLogLoadingState();
 
@@ -35,9 +39,23 @@ const GenericAuditLogsTable = () => {
                     <div className="bold" title={note?.created_by}>
                       {note?.created_by}
                     </div>
-                    <div>{`${formatUtcToLocal(note?.created_at).date} @ ${
-                      formatUtcToLocal(note?.created_at).time
-                    }`}</div>
+                    <div className="notesIcon">
+                      {note?.is_private ? (
+                        <>
+                          <PrivateIcon />{' '}
+                          <span className="datetime">{`${
+                            formatUtcToLocal(note?.created_at).date
+                          } @ ${
+                            formatUtcToLocal(note?.created_at).time
+                          }`}</span>
+                        </>
+                      ) : (
+                        <span className="datetime">{`${
+                          formatUtcToLocal(note?.created_at).date
+                        } @ ${formatUtcToLocal(note?.created_at).time}`}</span>
+                      )}
+                    </div>
+                    <div>{note?.note_type || 'N/A'}</div>
                   </td>
                   <td
                     dangerouslySetInnerHTML={{ __html: note?.description }}
@@ -56,6 +74,8 @@ const GenericAuditLogsTable = () => {
   );
 };
 
+const ScrollableTableWrapper = styled.div``;
+
 export const AuditTableWrapper = styled.div`
   height: 250px;
   min-height: 200px;
@@ -82,22 +102,29 @@ export const AuditTableWrapper = styled.div`
         color: #667085;
         font-family: Lato;
         font-size: 13px;
-        font-style: normal;
         font-weight: 400;
         line-height: 16px;
         padding: 10px;
+        border-bottom: 1px solid #efe8e8;
+        word-break: break-word;
+        vertical-align: top;
+
         .bold {
           font-weight: 500;
           font-size: 14px;
         }
+        .notesIcon {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .datetime {
+            min-width: 155px;
+          }
+        }
       }
     }
   }
 `;
 
-const ScrollableTableWrapper = styled.div`
-  height: 550px;
-  overflow: auto;
-`;
-
 export default GenericAuditLogsTable;

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

@@ -6,7 +6,11 @@ import SystemLogs from './system-event-logs/expanded-content';
 import GeneralHeader from './general-information';
 import ProductsInfo from './products-info';
 import OrderActions from './order-actions';
-import { useApiHook, useAxios } from '@bjsdistribution/dms-component-library';
+import {
+  DocumentTitle,
+  useApiHook,
+  useAxios,
+} from '@bjsdistribution/dms-component-library';
 import {
   useOrderDetails,
   // useOrderStaticData,
@@ -27,6 +31,7 @@ import {
   useGlobalStateHitOrder,
   useAtom,
   usegetClientData,
+  useGlobalEscData,
 } from './store';
 import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
@@ -47,7 +52,7 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function OrderView() {
+function OrderView({ locationloading }: any) {
   notification.config({
     top: 150,
   });
@@ -59,7 +64,7 @@ function OrderView() {
   const [, setLoading] = useState<boolean>(false);
   const [, setOrderStatus] = useStatusDetails();
   const [, setDepotOptions] = useDepotOptions();
-  const [, setCustomerInfo] = useCustomerInfo();
+  const [customerInfo, setCustomerInfo] = useCustomerInfo();
   const [, setLocationOptions] = useLocationOptions();
   const [orderResources, setOrderResources] = useOrderProductsResources();
   const [GsitCUstomerId, setGsitCUstomerId] = useGsitCUstomerId();
@@ -73,6 +78,7 @@ function OrderView() {
   const order_id = orderDetails?.id;
   const [getResources] = useAtom(setResourcesCall);
   const [, setClientData] = usegetClientData();
+  const [, setGlobalEscData] = useGlobalEscData();
 
   useEffect(() => {
     setStatusVal(orderDetails?.status_value);
@@ -96,6 +102,7 @@ function OrderView() {
         value: `${order_id}`,
       },
     ],
+    showLoader: false,
   });
 
   // query param
@@ -256,6 +263,7 @@ function OrderView() {
   useEffect(() => {
     if (orderId) {
       callCLientApi();
+      callEscalationApi();
     }
   }, [orderId]);
 
@@ -288,12 +296,14 @@ function OrderView() {
   const {
     data: fetchedResourcesData,
     setShouldPerformAction: setActions,
+    loading: loadingResources,
   } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `/orders/${orderId}/order_resources/`,
     method: 'GET',
     performAction: false,
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -418,21 +428,53 @@ function OrderView() {
       setSubContracterData(formattedData);
     }
   }, [fetchedSubcontractotData, fetchedSubcontractotData, apiLoading]);
+
+  // ESCALATIONS API
+
+  const {
+    data: fetchedEscalationData,
+    fetchData: callEscalationApi,
+    loading: escalationDataLoading,
+  } = useAxios<{
+    data: any;
+  }>({
+    endpoint: `/orders/escalations/${orderId}`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (fetchedEscalationData?.data) {
+      const escalationData = fetchedEscalationData?.data;
+      const sortedEscData = escalationData?.sort(
+        (a: any, b: any) =>
+          new Date(b?.created_at).getTime() - new Date(a?.created_at).getTime()
+      );
+      const showEsc = sortedEscData != null && sortedEscData.length > 0;
+      showEsc ? setGlobalEscData(sortedEscData) : setGlobalEscData([]);
+    }
+  }, [escalationDataLoading]);
+
+  const docTitle = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
   return (
     <MainContainer>
-      <GeneralHeader />
+      <DocumentTitle title={docTitle} />
+      <GeneralHeader statusDataLoading={statusDataLoading} />
 
       <DetailsFilters />
       <Notification />
-      <OrderDetails />
-      <ProductsInfo />
+      <OrderDetails
+        orderLoading={loading}
+        depotDataLoading={depotDataLoading}
+      />
+      <ProductsInfo locationloading={locationloading} />
       <SplitLayout>
         <NotesContainer>
           <Notes />
         </NotesContainer>
         <TablesContainer>
-          <Order />
-          <SystemLogs />
+          <Order loading={loadingResources} />
+          <SystemLogs loading={logsLoading} />
         </TablesContainer>
       </SplitLayout>
       <OrderActions />

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

@@ -74,7 +74,7 @@ const ModalManager = () => {
 
   useEffect(() => {
     // @ts-ignore
-    if (response && response?.code == 500) {
+    if ((response && response?.code == 500) || response?.code == 400) {
       // @ts-ignore
       notification.error({
         message: 'Failure',

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

@@ -1,41 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import {
   Button,
   Label,
   useAxios,
-  // SelectDropdown,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { Select, notification } from 'antd';
 import { useGlobalStateHitAuditLog, usemoduleIds, useOrderId } from '../store';
-import { notification } from 'antd';
+import { useLocation } from 'react-router-dom';
+import { useClientPortal, useSelectedData } from '../../store';
 import NoteType from './NoteType';
-import { useSelectedData } from '../../store';
 import { ApiResponse } from '../types';
+const template = `REASON- \nSTC- \nACTION- `;
 
 function AddNote() {
-  const [noteText, setNoteText] = useState('');
+  const [noteText, setNoteText] = useState(template);
+  const [noteOptions, setNoteOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  const [selectedNoteType, setSelectedNoteType] = useState<string | null>(
+    'standard'
+  );
   const [orderId] = useOrderId();
   const location = useLocation();
   const pathname = location.pathname;
   const orderIdLocaation = pathname.split('/')[1];
+  const [isClientPortal] = useClientPortal();
   const [moduleIds] = usemoduleIds();
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [selected] = useSelectedData();
+  const [selectedAssignee] = useSelectedData();
+
+  const { fetchData: getNoteType, data: fetchedData } = useAxios<any>({
+    endpoint: `audit_logs/order/type`,
+    method: 'GET',
+    showLoader: false,
+  });
+
+  useEffect(() => {
+    getNoteType();
+  }, []);
+
+  useEffect(() => {
+    if (fetchedData?.data) {
+      const options = fetchedData?.data?.map((item: any) => ({
+        label: item?.name,
+        value: item?.name,
+      }));
+      setNoteOptions(options);
+
+      const standardOption = options?.find(
+        (opt: any) => opt?.value?.toLowerCase() === 'standard'
+      );
+      if (standardOption) {
+        setSelectedNoteType(standardOption?.value);
+      } else if (options?.length > 0) {
+        setSelectedNoteType(options[0]?.value);
+      }
+    }
+  }, [fetchedData]);
 
-  // Save New Note
-  const { fetchData: callAuditLogs } = useAxios<{
-    data: ApiResponse[];
-  }>({
+  const { fetchData: callAuditLogs } = useAxios<{ data: ApiResponse[] }>({
     endpoint: `/audit_logs/orders/`,
     method: 'POST',
   });
 
-  const [notificationData, setNotificationData] = useState<{
-    type: 'success' | 'error';
-    message: string;
-    description: string;
-  } | null>(null);
+  // `const isValidFormat = () => {
+  // const lines = noteText.split('\n');
+  // if (lines.length < 3) return false;
+  // return (
+  // lines[0].startsWith('REASON-') &&
+  // lines[1].startsWith('STC-') &&
+  // lines[2].startsWith('ACTION-')
+  // );
+  // };
+
+  const isDisabled = !noteText.trim() || !selectedAssignee;
 
   const saveNote = async () => {
     setRecallAuditLog(false);
@@ -46,34 +85,38 @@ function AddNote() {
           parent_object_id: orderId || orderIdLocaation,
           parent_module_id: moduleIds?.parentId,
           module_id: moduleIds?.id,
+          note_type: selectedNoteType,
           module_object_id: orderId || orderIdLocaation,
           action: 'create',
           description: noteText,
           data_dump: '{}',
           manual: 1,
-          is_private: selected,
+          is_private: isClientPortal
+            ? false
+            : selectedAssignee === '0'
+            ? true
+            : false,
         },
       ],
     };
     try {
-      let response = (await callAuditLogs({
-        payload: payload,
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      if (response.code == 200 && response?.data) {
+      const response = await callAuditLogs({ payload });
+      //@ts-ignore
+      if (response?.code === 200 && response?.data) {
         notification.success({
           message: 'Success',
-          description: `${response?.message}`,
+          //@ts-ignore
+          description: response?.message || 'Note saved successfully',
         });
-        setNoteText('');
+
+        setNoteText(template);
+        setSelectedNoteType('Standard');
         setRecallAuditLog(true);
       } else {
         notification.error({
           message: 'Error',
-          description: `${response?.error}`,
+          //@ts-ignore
+          description: response?.error || 'Failed to save note',
         });
       }
     } catch (error) {
@@ -83,38 +126,25 @@ function AddNote() {
       });
     }
   };
-
-  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]);
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setNoteText(e.target.value);
+  };
 
   return (
     <Container>
-      <Label label="Add New Note" />
-      <StyledTextArea
-        name="description"
-        placeholder="Enter your note here..."
-        value={noteText}
-        onChange={(e: any) => setNoteText(e.target.value)}
+      <Label label="Add New Note" required style={{ color: 'black' }} />
+      <StyledAntSelect
+        options={noteOptions}
+        placeholder="Select Note Type"
+        onChange={(value: string) => setSelectedNoteType(value)}
+        value={selectedNoteType}
       />
+      <StyledTextArea value={noteText} onChange={handleChange} rows={3} />
       <SaveNoteContainer>
-        <Button disabled={!noteText} onClick={saveNote}>
+        <Button disabled={isDisabled} onClick={saveNote}>
           SAVE NOTE
         </Button>
-        <NoteType />
+        {!isClientPortal && <NoteType />}
       </SaveNoteContainer>
     </Container>
   );
@@ -137,20 +167,20 @@ const SaveNoteContainer = styled.div`
 `;
 
 const StyledTextArea = styled.textarea`
-  height: 57px;
-  border-radius: 12px;
-  background: #fff;
-  resize: none;
+  height: 65px;
   border-radius: 8px;
-  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
-  background: var(--Flowkit-White, #fff);
+  background: #fff;
+  resize: vertical;
+  border: 1px solid #e0e2e7;
   padding: 8px 12px;
+  font-family: monospace;
+  white-space: pre-wrap;
 `;
 
-// const StyledSelectDropdown = styled(SelectDropdown)`
-//   border-color: #e0e2e7 !important;
-//   width: 8vw;
-//   margin-bottom: 5px;
-// `;
+export const StyledAntSelect: any = styled(Select)`
+  .ant-select-selector {
+    border-radius: 8px;
+  }
+`;
 
 export default AddNote;

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -8,12 +8,13 @@ import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
 
 export const payloadAtom = atom<any>(null);
+export const selectedOrderId = atom<any>(null);
 
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
   const [returnOrderData, setReturnOrderData] = useNewReturnOrderData();
-  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [selectedId, setSelectedOrderId] = useAtom(selectedOrderId);
   const [selectedProducts] = useSelectedProducts();
   const [orderData] = useOrderDetails();
   const [, setPayload] = useAtom(payloadAtom);
@@ -67,14 +68,14 @@ const NewReturnDropdown = () => {
   }, [fetchedReturnOrderData, id]);
 
   useEffect(() => {
-    if (selectedOrderId && selectedProducts?.length > 0) {
+    if (selectedId && selectedProducts?.length > 0) {
       const newPayload = {
-        new_return_order: selectedOrderId,
+        new_return_order: selectedId,
         products: selectedProducts,
       };
       setPayload(newPayload);
     }
-  }, [selectedOrderId, selectedProducts, setPayload]);
+  }, [selectedId, selectedProducts, setPayload]);
 
   const handleDropdownChange = (value: string) => {
     setSelectedOrderId(value);
@@ -83,23 +84,20 @@ const NewReturnDropdown = () => {
     label: `${order?.recipient_name} - ${order?.postcode}`,
     value: order?.id,
   }));
-
   return (
     <Container>
       <Text>New Return Order:</Text>
       <StyledAntSelect
         options={dropdownOptions}
-        value={selectedOrderId}
+        value={selectedId}
         placeholder="Select"
         // @ts-ignore
         onChange={handleDropdownChange}
         style={defaultSelectStyle}
         showSearch
-        dropdownStyle={{ width: 'max-content' }}
+        dropdownStyle={{ width: '250px' }}
         popupClassName={defaultPopupClassName}
-        status={
-          dropdownOptions.length === 0 ? '' : selectedOrderId ? '' : 'error'
-        }
+        status={dropdownOptions.length === 0 ? '' : selectedId ? '' : 'error'}
         notFoundContent="No orders found with a similar postcode"
       />
     </Container>