@bjsdistribution/dms-client-return 0.0.2 → 0.0.4

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`

package/src/components/order-view/notes/logs/fakeData.ts

@@ -1,50 +1,10 @@
-export const fakeData = [
-  {
-    product_id: 'GS600',
-    created_at: '15/01/2024 06:22:47',
-    updated_at: '15/01/2024 06:22:47',
-    created_by: 'BJS Validation Via API',
-    note: 'New Product Added as per above client',
-    id: 1,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 2,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 3,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 4,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 5,
-  },
-  {
-    product_id: 'GS601',
-    created_at: '22/01/2024 07:22:47',
-    updated_at: '22/01/2024 07:22:47',
-    created_by: 'Manpreet - DMS @ Upload Doc',
-    note: 'Uploaded doc for Assemble and Disassemble service instruction.',
-    id: 6,
+export const NotesTableData = [
+  {
+    tableHead: [
+      { key: 'startFinish', label: 'Created', alwaysVisible: true },
+      { key: 'routeDetails', label: 'Notes', alwaysVisible: true },
+    ],
+    tableBody: [
+    ],
   },
 ];

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

@@ -1,59 +1,20 @@
 import React from 'react';
-// import { tableColumns } from './helper';
 import styled from 'styled-components';
-import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
-import { NotesStyledTable, NotesStyledTableWrapper } from './NotestableStyles';
-import CustomScrollBar from '../../../../common/scrollbar';
-// import GenericAuditLogsTable from '../../../add-order/order-details/common/generic-table/AuditLogs';
-// import { fakeData } from './fakeData';
+import GenericAuditLogsTable from '../../generic-table/AuditLogs';
+// import CustomScrollBar from '../../../../common/scrollbar';
 
 function AuditLogs() {
   return (
     <Container>
-      <CustomScrollBar>
-        <NotesStyledTableWrapper id="tableScrolling">
-          <NotesStyledTable>
-            <thead>
-              <tr>
-                {/* <th className="emailInvoiceNo">Invoice No.</th> */}
-                <th>Created</th>
-                <th>Notes</th>
-              </tr>
-            </thead>
-            <tbody>
-              {data?.map((invoice: any) => (
-                <tr key={invoice.id}>
-                  <td>
-                    <ul style={{ listStyleType: 'none', padding: 0 }}>
-                      <li
-                        style={{
-                          color: '#3A3630',
-                          fontWeight: 600,
-                          paddingLeft: 0,
-                        }}
-                      >
-                        {' '}
-                        {invoice?.notes}
-                      </li>
-                      <li style={{ color: '#888075' }}>{invoice?.date}</li>
-                    </ul>
-                  </td>
-                  <td>{invoice?.customer_name}</td>
-                </tr>
-              ))}
-            </tbody>
-          </NotesStyledTable>
-        </NotesStyledTableWrapper>
-        {/* <CustomScrollBar> */}
-        {/* <GenericAuditLogsTable columns={tableColumns} data={fakeData} /> */}
-        {/* </CustomScrollBar> */}
-      </CustomScrollBar>
+      {/* <CustomScrollBar> */}
+      <GenericAuditLogsTable />
+      {/* </CustomScrollBar> */}
     </Container>
   );
 }
 
 const Container = styled.div`
-  height: 230px; /* Set height to limit container size */
+  height: 295px; /* Set height to limit container size */
   overflow: auto; /* Enable scrolling */
   scrollbar-width: thin;
 `;

package/src/components/order-view/order-actions/actions/escalation/EscalationModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import { useCurrentAction } from '../../../store';
-import NewEscalation from '../escalation/NewEscalation';
+import NewEscalation from './NewEscalation';
 
 const EscalationModal: React.FC = () => {
   const [, setCurrentAction] = useCurrentAction();

package/src/components/order-view/order-details/expanded-content/customer-section/RecipientName.tsx

@@ -58,6 +58,7 @@ const Container = styled.div`
 `;
 const InputStyled = styled(Input)`
   /* Hide autofill suggestions in Safari */
+  border-radius: 25px;
   &:-webkit-autofill {
     -webkit-box-shadow: 0 0 0 100px white inset;
     -webkit-text-fill-color: black;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactEmail.tsx

@@ -51,6 +51,7 @@ function ContactEmail() {
         placeholder="Email"
         value={orderRecipient?.contact_email || ''}
         onChange={onChange}
+        style={{ borderRadius: '25px' }}
       />
       {errors.emailError && <ErrorText>{errors.emailError}</ErrorText>}
     </Container>

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx

@@ -62,6 +62,7 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
+  border-radius: 25px;
   // @media (max-width: 1024px) {
   //   width: 80%;
   // }

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.tsx

@@ -68,7 +68,7 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
-
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactWork.tsx

@@ -66,6 +66,7 @@ const Wrapper = styled.div`
 `;
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   width: 100%;
 
   &::-webkit-outer-spin-button,

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Address.tsx

@@ -60,6 +60,7 @@ const Container = styled.div`
 const TextContainer = styled(TextArea)`
   resize: none;
   height: 70%;
+  border-radius: 15px;
 `;
 
 export default Address;

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.tsx

@@ -39,6 +39,7 @@ function Latitude() {
 }
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Longitude.tsx

@@ -38,6 +38,7 @@ function Longitude() {
 }
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Postcode.tsx

@@ -41,6 +41,7 @@ function Postcode() {
         value={orderRecipient?.postcode || ''}
         onChange={onChange}
         autoComplete="off"
+        style={{ borderRadius: '25px' }}
       />
     </Container>
   );

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/What3words.tsx

@@ -64,6 +64,7 @@ const Wrapper = styled.div`
 `;
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/components/order-view/order-details/expanded-content/footer/index.tsx

@@ -98,9 +98,10 @@ const Container = styled.div`
   background: #f8fafc;
   /* margin: 0px -15px -15px -15px; */
   border-radius: 0px 0px 8px 8px;
-  margin-bottom: 22px;
+  /* margin-bottom: 22px; */
   position: relative;
-  top: 21px;
+  align-items: center;
+  /* top: 21px; */
 `;
 
 export default OrderDetailsFooter;

package/src/components/order-view/order-details/expanded-content/index.tsx

@@ -49,7 +49,7 @@ const HalfWidth = styled.div`
 const Container = styled.div`
   display: flex;
   flex-wrap: wrap;
-  gap: 25px;
+  gap: 20px;
   justify-content: space-between;
 
   @media (min-width: 769px) {

package/src/components/order-view/order-details/expanded-content/instruction-section/index.tsx

@@ -21,7 +21,7 @@ function InstructionSection() {
 const FormInputs = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 7px;
   flex: 1;
 `;
 
@@ -30,6 +30,7 @@ const CustomFormSection = styled(FormSection)`
   border-radius: 8px;
   background: #f8fafc;
   box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+  padding: 10px !important;
 `;
 
 export default InstructionSection;

package/src/components/order-view/order-details/expanded-content/orders-section/Carrier.tsx

@@ -11,7 +11,13 @@ function Carrier() {
         <Label label="Carrier" htmlFor="carrier" />
         <CopyText text="hello234e" />
       </Wrapper>
-      <Input name="carrier" type="text" placeholder="Carrier" disabled />
+      <Input
+        name="carrier"
+        type="text"
+        placeholder="Carrier"
+        disabled
+        style={{ borderRadius: '25PX' }}
+      />
     </Container>
   );
 }

package/src/components/order-view/order-details/expanded-content/orders-section/DeliveryDate.tsx

@@ -53,6 +53,7 @@ function DeliveryDate() {
         onChange={onChange}
         value={actionDate === null ? actionDate : dayjs(actionDate)}
         format="DD/MM/YY"
+        style={{ borderRadius: '25px' }}
       />
     </MainContainer>
   );

package/src/components/order-view/order-details/expanded-content/orders-section/Depot.tsx

@@ -1,4 +1,8 @@
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+} from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import { useDepotOptions, useOrderDetails } from '../../../store';
@@ -26,6 +30,15 @@ function DepotDropdown() {
         )}
         options={depotOptions || []}
         onChange={onChange}
+        styles={{
+          ...dropdownStyles,
+
+          control: styles => ({
+            ...styles,
+            borderRadius: '25px',
+            cursor: 'pointer',
+          }),
+        }}
       />
     </FormContainer>
   );

package/src/components/order-view/order-details/expanded-content/orders-section/Droptime.tsx

@@ -7,7 +7,7 @@ import { handleKeyDown } from '../../../utils';
 function Droptime() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const orderRoutes = orderDetails?.order_routes;
-  
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = parseFloat(e.target.value);
     const updatedOrderRoutes = {
@@ -39,6 +39,7 @@ function Droptime() {
 }
 
 const CustomInput = styled(Input)`
+  border-radius: 25px;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/src/components/order-view/order-details/expanded-content/orders-section/OrderNumber.tsx

@@ -10,7 +10,7 @@ function OrderNumber() {
     orderDetails?.order_number !== null &&
     orderDetails?.order_number !== undefined &&
     orderDetails?.order_number?.length > 0;
-    
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setOrderDetails(prev => {
       return {
@@ -31,6 +31,7 @@ function OrderNumber() {
         placeholder="Order Number"
         value={orderDetails?.order_number || ''}
         onChange={onChange}
+        style={{ borderRadius: '25px' }}
       />
     </Container>
   );

package/src/components/order-view/order-details/expanded-content/orders-section/RecipientReference.tsx

@@ -5,7 +5,7 @@ import { useOrderDetails } from '../../../store';
 
 function RecipientReference() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
-  
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setOrderDetails(prev => {
       return {
@@ -23,6 +23,7 @@ function RecipientReference() {
         placeholder="Enter Recipient Reference"
         value={orderDetails.recipient_reference || ''}
         onChange={onChange}
+        style={{ borderRadius: '25px' }}
       />
     </Container>
   );

package/src/components/order-view/order-details/expanded-content/orders-section/ScheduleAfter.tsx

@@ -52,6 +52,7 @@ function ScheduleAfter() {
         onChange={onChange}
         value={scheduleDate === null ? scheduleDate : dayjs(scheduleDate)}
         format="DD/MM/YY"
+        style={{ borderRadius: '25px' }}
       />
     </MainContainer>
   );

package/src/components/order-view/order-details/expanded-content/orders-section/VehicleType.tsx

@@ -1,4 +1,8 @@
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+} from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import { vehicleTypeOptions } from '../../helper';
@@ -14,6 +18,14 @@ function VehicleTypeDropdown() {
         openMenuOnFocus
         isDisabled={true}
         value={vehicleTypeOptions[1]}
+        styles={{
+          ...dropdownStyles,
+          control: styles => ({
+            ...styles,
+            borderRadius: '25px',
+            cursor: 'pointer',
+          }),
+        }}
       />
     </FormContainer>
   );

package/src/components/order-view/order-details/expanded-content/services-section/DeliveryPoint.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+} from '@bjsdistribution/dms-component-library';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
 import styled from 'styled-components';
 import { capitalize } from '../../../utils';
@@ -38,6 +42,14 @@ function DeliveryPointDropdown() {
         )}
         openMenuOnFocus
         onChange={onChange}
+        styles={{
+          ...dropdownStyles,
+          control: styles => ({
+            ...styles,
+            borderRadius: '25px',
+            cursor: 'pointer',
+          }),
+        }}
       />
     </Container>
   );

package/src/components/order-view/order-details/expanded-content/services-section/ServiceType.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+} from '@bjsdistribution/dms-component-library';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
 import styled from 'styled-components';
 import { capitalize } from '../../../utils';
@@ -32,6 +36,14 @@ function ServiceTypeDropdown() {
         inputId="serviceTypeDropdown"
         openMenuOnFocus
         onChange={onChange}
+        styles={{
+          ...dropdownStyles,
+          control: styles => ({
+            ...styles,
+            borderRadius: '25px',
+            cursor: 'pointer',
+          }),
+        }}
       />
     </Container>
   );

package/src/components/order-view/order-details/expanded-content/services-section/TimedService.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+} from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 import { capitalize } from '../../../utils';
 
@@ -37,6 +41,15 @@ function TimedServiceDropdown() {
         )}
         inputId="timedServiceDropdown"
         onChange={onChange}
+        styles={{
+          ...dropdownStyles,
+
+          control: styles => ({
+            ...styles,
+            borderRadius: '25px',
+            cursor: 'pointer',
+          }),
+        }}
       />
     </Container>
   );

package/src/components/order-view/order-resources/collapsed-content/index.tsx

@@ -9,6 +9,6 @@ const Font = styled.div`
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 24px; /* 150% */
+  line-height: 20px; /* 150% */
 `;
 export default CollapsedContent;

package/src/components/order-view/products-info/expanded-content/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import ProductTable from '../../return-client-products/ProductTable';
 // import OrderDetailsFooter from '../../order-details/expanded-content/footer';
-import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
+// import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
 import { Button } from '@bjsdistribution/dms-component-library';
 
 function ExpandedContent() {
@@ -17,7 +17,7 @@ function ExpandedContent() {
           <Button style={{ borderRadius: '20px' }} onClick={SaveNote}>
             SAVE Details
           </Button>
-          <NewReturnDropdown />
+          {/* <NewReturnDropdown /> */}
         </SaveNoteContainer>
       </MidConatiner>
     </Container>

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

@@ -16,8 +16,9 @@ interface ApiResponse {
 }
 
 function ProductsInfo() {
-  const [Data] = useOrderDetails();
-  const customerData = Data;
+  const [data] = useOrderDetails();
+  const customerData = data;
+
   // For API Call
   const [, setAPidata] = useProductDetails();
   const [, setLoading] = useLoading();