@bjsdistribution/dms-client-return 0.0.11 → 0.0.13

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

@@ -1,56 +1,94 @@
 import { Alert, Checkbox } from '@bjsdistribution/dms-component-library';
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import { useSelectedOrders } from '../../store';
+import {
+  useFinalPayload,
+  useGroupedPayload,
+  usePostLoading,
+  useSelectedConfirmLoc,
+  useSelectedOrders,
+} from '../../store';
+import { displayValueOrNA } from '../../order-daily-overview/shared/utlis';
+import Loader from '../../order-daily-overview/header/loader/Loader';
 
 const CreateReturnModal = () => {
-  const [selectedlocation, setSelectedLocations] = useState<any[]>([]);
+  const [selectedlocation, setSelectedLocations] = useSelectedConfirmLoc();
   const [selectedReturnOrder] = useSelectedOrders();
+  const [load] = usePostLoading();
+  const [groupedPayload] = useGroupedPayload();
+  const [forDisabledCheck] = useSelectedConfirmLoc();
+  const [, setNew] = useFinalPayload();
 
   const handleSelectLocations = (id: number) => {
     setSelectedLocations((prevSelectedLocations: number[]) => {
-      const isSelected = prevSelectedLocations.includes(id);
+      const isSelected = prevSelectedLocations?.includes(id);
 
       if (isSelected) {
-        return prevSelectedLocations.filter(selectedId => selectedId !== id);
+        return prevSelectedLocations?.filter(selectedId => selectedId !== id);
       } else {
         return [...prevSelectedLocations, id];
       }
     });
   };
 
+  const uniqueLocations = selectedReturnOrder?.reduce((acc, current) => {
+    const x = acc.find(
+      (item: any) => item.return_location === current.return_location
+    );
+    if (!x) {
+      acc.push(current);
+    }
+    return acc;
+  }, []);
+
+  useEffect(() => {
+    if (groupedPayload?.length > 0 && forDisabledCheck?.length > 0) {
+      const matchedItems = groupedPayload?.filter((item: any) =>
+        forDisabledCheck.includes(item.id)
+      );
+
+      if (matchedItems.length > 0) {
+        const finalPayload = matchedItems?.map(({ id, ...rest }: any) => rest);
+        setNew(finalPayload);
+      }
+    }
+  }, [forDisabledCheck]);
+
   return (
-    <Wrapper>
-      <Alert
-        onClose={() => {}}
-        description=""
-        type="info"
-        title="Do you wish to proceed?"
-        showOkButton={false}
-      />
-      <Container>
-        <ul style={{ listStyle: 'none', padding: 0 }}>
-          {selectedReturnOrder?.map((returnLoc: any) => (
-            <li
-              key={returnLoc.id}
-              style={{
-                marginBottom: '8px',
-                display: 'flex',
-                alignItems: 'center',
-              }}
-            >
-              <Checkbox
-                checked={selectedlocation.includes(returnLoc.id)}
-                onChange={() => handleSelectLocations(returnLoc.id)}
-              />
-              <StyledText style={{ marginLeft: '8px' }}>
-                {returnLoc?.return_location}
-              </StyledText>
-            </li>
-          ))}
-        </ul>
-      </Container>
-    </Wrapper>
+    <>
+      {load && <Loader />}
+      <Wrapper>
+        <Alert
+          onClose={() => {}}
+          description=""
+          type="info"
+          title="Do you wish to proceed?"
+          showOkButton={false}
+        />
+        <Container>
+          <ul style={{ listStyle: 'none', padding: 0 }}>
+            {uniqueLocations?.map((returnLoc: any) => (
+              <li
+                key={returnLoc.id}
+                style={{
+                  marginBottom: '8px',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <Checkbox
+                  checked={selectedlocation?.includes(returnLoc.id)}
+                  onChange={() => handleSelectLocations(returnLoc.id)}
+                />
+                <StyledText style={{ marginLeft: '8px' }}>
+                  {displayValueOrNA(returnLoc?.new_location)}
+                </StyledText>
+              </li>
+            ))}
+          </ul>
+        </Container>
+      </Wrapper>
+    </>
   );
 };
 

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

@@ -3,7 +3,7 @@ import { AntModal, useApiHook } from '@bjsdistribution/dms-component-library';
 import { useAtom } from 'jotai';
 import {
   countReducerAtom,
-  selectedProductIdAtom,
+  letselectedProductIdAtom,
   selectedTabKeyAtom,
   useCreateOrderProducts,
   useDeleteProdsID,
@@ -21,7 +21,16 @@ import DefectsModal from './DefectsModal';
 import repackModal from './RepackModal';
 import { ApiResponse } from '../types';
 import CreateReturnModal from './CreateReturnModal';
-import { useNewReturnPayload } from '../../store';
+import {
+  useFinalPayload,
+  useGroupedPayload,
+  useNewReturnPayload,
+  usePostLoading,
+  useSelectAll,
+  useSelectedConfirmLoc,
+  useSelectedOrders,
+} from '../../store';
+
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
   const [,] = useProductDetails();
@@ -30,10 +39,16 @@ const ModalManager = () => {
   const [selectedRows] = useDeleteProdsID();
   const [unRecieve, setUnRecieve] = useRecieveOrderProducts();
   const [updateOrderProduct, setUpdateOrderProduct] = useUpdateOrderProducts();
-  const [selectedProductId] = useAtom(selectedProductIdAtom);
+  const [selectedProductId] = useAtom(letselectedProductIdAtom);
   const [selectedTab] = useAtom(selectedTabKeyAtom);
   const [, setIsFormValid] = useState(false);
-  const [newPayload, setNewPayload] = useNewReturnPayload();
+  const [newGrouped, setNewGrouped] = useFinalPayload();
+  const [, SetPostLoading] = usePostLoading();
+  const [, setSelectedReturnOrder] = useSelectedOrders();
+  const [, setCheck] = useSelectedConfirmLoc();
+  const [, setNewPayload] = useNewReturnPayload();
+  const [, setGrouped] = useGroupedPayload();
+  const [, setSelectAll] = useSelectAll();
 
   console.log(orderProduct, 'abcabcabcabcabcabcabcabcabcabcabc');
 
@@ -227,27 +242,47 @@ const ModalManager = () => {
   }, [updateResponse]);
 
   //Confirm return popup
-  const { data: response, setShouldPerformAction } = useApiHook<{
+  const {
+    data: response,
+    setShouldPerformAction,
+    loading: confirmLoading,
+  } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `return_orders/`,
     method: 'POST',
-    body: [newPayload],
+    body: newGrouped,
     performAction: false,
   });
-  const handleConfirmReturn = () => {
-    const payloadWithoutId = newPayload?.map(({ id, ...rest }: any) => ({
-      ...rest,
-    }));
 
-    console.log(response);
+  useEffect(() => {
+    SetPostLoading(confirmLoading);
+  }, [confirmLoading]);
+
+  console.log(response);
 
-    if (payloadWithoutId) {
-      setNewPayload(payloadWithoutId);
+  useEffect(() => {
+    if (response === null || (response && response?.data)) {
+      dispatch({ type: 'close' });
+      setNewGrouped([]);
+      setSelectedReturnOrder([]);
+      setCheck([]);
+      setNewPayload([]);
+      setGrouped([]);
+      setShouldPerformAction(false);
+      setSelectAll(false);
+    }
+  }, [response]);
+
+  const handleConfirmReturn = () => {
+    setShouldPerformAction(false);
+
+    if (newGrouped.length > 0) {
       setShouldPerformAction(true);
     } else {
       setShouldPerformAction(false);
     }
+    dispatch({ type: 'close' });
   };
 
   return (
@@ -267,7 +302,7 @@ const ModalManager = () => {
                 btnStyle: 'rounded',
                 onClick: handleConfirmReturn,
                 type: 'button',
-                disabled: !newPayload,
+                // disabled: forDisabledCheck.length === 0,
               },
             ],
 

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { Tabs } from 'antd';
 import styled from 'styled-components';
 import { useAtom } from 'jotai';
-import { selectedTabKeyAtom } from '../store';
 import QCLogs from './qclogs';
 import UpdateProduct from './UpdateProducts';
 import UnReceiveProduct from './UnReceiveProduct';
+import { selectedTabKeyAtom } from '../store';
 
 const ProductAction = () => {
   const [, setSelectedTabKey] = useAtom(selectedTabKeyAtom);

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

@@ -26,10 +26,8 @@ function AddNote() {
   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
@@ -56,6 +54,7 @@ function AddNote() {
           action: 'create',
           description: noteText,
           data_dump: '{}',
+          manual: 1,
         },
       ],
     };
@@ -81,7 +80,7 @@ function AddNote() {
         });
         setNoteLoadingStore(true);
         setNoteText('');
-        setNoteLoadingStore(false);
+        // setNoteLoadingStore(false);
         CallAPi(true);
       } else if (error) {
         // Error: Set error notification

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

@@ -4,6 +4,7 @@ import AddNote from './AddNote';
 import AuditLogs from './logs';
 import { useApiHook } from '@bjsdistribution/dms-component-library';
 import {
+  SeteauditLogToggle,
   useCallAPi,
   usegetNotes,
   usemoduleIds,
@@ -20,9 +21,7 @@ function Notes() {
   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);
+  const [auditState] = SeteauditLogToggle();
 
   // Fetch module IDs
   const { data: fetchedData, loading: apiLoading } = useApiHook<{ data: any }>({
@@ -44,13 +43,6 @@ function Notes() {
             }))
           ) || [];
 
-      // 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'
       );
@@ -59,48 +51,43 @@ function Notes() {
     }
   }, [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}
-    `,
+    }&module_object_id=${orderId || orderIdLocaation}`,
     method: 'GET',
     performAction: false,
   });
 
-  // &sub_module_ids=${allIds}
-
   useEffect(() => {
     setNoteLoadingStore(true);
+
     if (moduleIds) {
-      // Ensure `allIds` is set
-      setShouldPerformAction(true);
+      setShouldPerformAction(auditState);
     }
     if (!NotesLoading && NotesData?.data) {
       const updatedData = NotesData?.data
-        // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
-        // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
+        .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);
+      setNotes(combinedArray);
       setNoteLoadingStore(NotesLoading);
       loderStatus
         ? setShouldPerformAction(true)
         : setShouldPerformAction(false);
     }
-  }, [moduleIds, NotesLoading, loderStatus]); // Add `allIds` to dependencies
+  }, [moduleIds, NotesLoading, auditState]);
 
   return (
     <Container>

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

@@ -2,87 +2,108 @@ import React from 'react';
 import styled from 'styled-components';
 import AllowTracking from './AllowTracking';
 import { Button } from '@bjsdistribution/dms-component-library';
-// import {
-//   useAtom,
-//   useOrderDetails,
-//   usePrevOrderDetails,
-//   errorAtom,
-// } from '../../../store';
-// import useUpdateOrder from '../../../hooks/useUpdateOrder';
-// import { compareOrderDetailsStates, filterObject } from '../../../utils';
-// import { OrderServiceType } from '../../../types';
+import {
+  useAtom,
+  useOrderDetails,
+  usePrevOrderDetails,
+  errorAtom,
+  useCustomerInfo,
+  useLogsCallAPi,
+  useApiCalling,
+} from '../../../store';
+import useUpdateOrder from '../../../hooks/useUpdateOrder';
+import { compareOrderDetailsStates, filterObject } from '../../../utils';
+import { OrderServiceType } from '../../../types';
 
 function OrderDetailsFooter() {
-  // const [orderDetails, setOrderDetails] = useOrderDetails();
-  // const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
-  // const updateOrder = useUpdateOrder();
-  // const [errorState] = useAtom(errorAtom);
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setCustomerInfo] = useCustomerInfo();
+  const updateOrder = useUpdateOrder();
+  const [errorState] = useAtom(errorAtom);
+  const [, setLogsCallAPi] = useLogsCallAPi();
+  const [, setCallApi] = useApiCalling(); //single detail
 
-  // const errorFound = () => {
-  //   const isError =
-  //     errorState.w3wError.length > 0 || errorState.emailError.length > 0;
-  //   return isError;
-  // };
+  const errorFound = () => {
+    const isError =
+      errorState.w3wError.length > 0 ||
+      errorState.emailError.length > 0 ||
+      errorState.homeContactError.length > 0 ||
+      errorState.workCOntanctError.length > 0 ||
+      errorState.mobileError.length > 0 ||
+      errorState.postCodeError.length > 0;
 
-  // const isDifferent = () => {
-  //   const keysToRemovefromOrders = [
-  //     'order_locked',
-  //     'order_communications',
-  //     'updated_at',
-  //     'updated_by',
-  //     'order_services',
-  //   ];
-  //   const filteredOrderDetails = filterObject(
-  //     orderDetails,
-  //     keysToRemovefromOrders
-  //   );
-  //   const filteredPrevOrderDetails = filterObject(
-  //     prevOrderDetails,
-  //     keysToRemovefromOrders
-  //   );
+    return isError;
+  };
+
+  const isDifferent = () => {
+    const keysToRemovefromOrders = [
+      'order_locked',
+      'order_communications',
+      'updated_at',
+      'updated_by',
+      'order_services',
+    ];
+    const filteredOrderDetails = filterObject(
+      orderDetails,
+      keysToRemovefromOrders
+    );
+    const filteredPrevOrderDetails = filterObject(
+      prevOrderDetails,
+      keysToRemovefromOrders
+    );
 
-  //   const newOrderServices =
-  //     orderDetails?.order_services?.length > 0 &&
-  //     orderDetails.order_services.sort(
-  //       (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
-  //     );
+    const newOrderServices =
+      orderDetails?.order_services?.length > 0 &&
+      orderDetails.order_services.sort(
+        (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
+      );
 
-  //   const prevOrderServices =
-  //     prevOrderDetails?.order_services?.length > 0 &&
-  //     prevOrderDetails.order_services.sort(
-  //       (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
-  //     );
+    const prevOrderServices =
+      prevOrderDetails?.order_services?.length > 0 &&
+      prevOrderDetails.order_services.sort(
+        (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
+      );
 
-  //   const newOrderServicesSorted = JSON.stringify(newOrderServices);
-  //   const prevOrderServicesSorted = JSON.stringify(prevOrderServices);
-  //   const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
-  //   const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
-  //   const isSame =
-  //     orderDetailsSorted === prevOrderDetailsSorted &&
-  //     newOrderServicesSorted === prevOrderServicesSorted;
-  //   return !isSame;
-  // };
+    const newOrderServicesSorted = JSON.stringify(newOrderServices);
+    const prevOrderServicesSorted = JSON.stringify(prevOrderServices);
+    const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
+    const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
+    const isSame =
+      orderDetailsSorted === prevOrderDetailsSorted &&
+      newOrderServicesSorted === prevOrderServicesSorted;
+    return !isSame;
+  };
 
-  // const onSave = async () => {
-  //   const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
-  //   const response = await updateOrder([payload]);
+  const onSave = async () => {
+    const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
+    const response = await updateOrder([payload]);
 
-  //   if (response && response.data) {
-  //     setOrderDetails(response.data[0]);
-  //     setPrevOrderDetails(response.data[0]);
-  //   }
-  // };
-  const onSave = () => {
-    console.log('save');
+    setLogsCallAPi(prev => !prev);
+    setCallApi(false);
+
+    if (response && response?.data?.length > 0) {
+      setOrderDetails(response?.data[0]);
+      setPrevOrderDetails(response?.data[0]);
+      setCustomerInfo({
+        recipient_name: response?.data[0]?.order_recipient?.recipient_name,
+        postcode: response?.data[0]?.order_recipient?.postcode,
+      });
+      setTimeout(() => {
+        setLogsCallAPi(true);
+        setCallApi(true);
+      }, 2000);
+    } else {
+      setLogsCallAPi(false);
+      setCallApi(false);
+      setOrderDetails(prevOrderDetails);
+    }
   };
+
   return (
     <Container>
       <AllowTracking />
-      <Button
-        style={{ borderRadius: '20px' }}
-        onClick={onSave}
-        // disabled={!isDifferent() || errorFound()}
-      >
+      <Button onClick={onSave} disabled={!isDifferent() || errorFound()}>
         Save Details
       </Button>
     </Container>
@@ -96,12 +117,8 @@ const Container = styled.div`
   align-items: flex-start;
   border-top: 1px solid #edebe8;
   background: #f8fafc;
-  /* margin: 0px -15px -15px -15px; */
+  margin: 0px -15px -15px -15px;
   border-radius: 0px 0px 8px 8px;
-  /* margin-bottom: 22px; */
-  position: relative;
-  align-items: center;
-  /* top: 21px; */
 `;
 
 export default OrderDetailsFooter;

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

@@ -5,19 +5,12 @@ import { useOrderDetails } from '../../../store';
 
 function DeliveryInstructions() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
-  const orderRoutes = orderDetails?.order_routes;
 
   const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    const val = e.target.value;
-    const updatedOrderRoutes = {
-      ...(orderRoutes === null
-        ? { delivery_instructions: val }
-        : { ...orderRoutes, delivery_instructions: val }),
-    };
     setOrderDetails(prev => {
       return {
         ...prev,
-        order_routes: updatedOrderRoutes,
+        delivery_instructions: e.target.value,
       };
     });
   };
@@ -26,7 +19,7 @@ function DeliveryInstructions() {
     <Container>
       <Label label="Delivery Instructions" />
       <CustomTextArea
-        value={orderRoutes?.delivery_instructions || ''}
+        value={orderDetails?.delivery_instructions || ''}
         placeholder="add delivery instructions"
         onChange={onChange}
       />

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

@@ -6,19 +6,12 @@ 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 = {
-      ...(orderRoutes === null
-        ? { drop_time: val }
-        : { ...orderRoutes, drop_time: val }),
-    };
     setOrderDetails(prev => {
       return {
         ...prev,
-        order_routes: updatedOrderRoutes,
+        drop_time: e.target.value,
       };
     });
   };
@@ -31,7 +24,7 @@ function Droptime() {
         type="number"
         placeholder="0"
         onKeyDown={handleKeyDown}
-        value={orderRoutes?.drop_time}
+        value={orderDetails?.drop_time || ''}
         onChange={onChange}
       />
     </Container>
@@ -39,7 +32,6 @@ 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/VehicleType.tsx

@@ -1,13 +1,20 @@
-import {
-  Label,
-  SelectDropdown,
-  dropdownStyles,
-} from '@bjsdistribution/dms-component-library';
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import { vehicleTypeOptions } from '../../helper';
+import { useOrderDetails } from '../../../store';
 
 function VehicleTypeDropdown() {
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const onChange = (e: any) => {
+    setOrderDetails(prev => {
+      return {
+        ...prev,
+        vehicle_type: e.label,
+      };
+    });
+  };
+
   return (
     <FormContainer>
       <Label label="Vehicle Type" htmlFor="vehicleType" />
@@ -16,16 +23,10 @@ function VehicleTypeDropdown() {
         options={vehicleTypeOptions}
         inputId="vehicleType"
         openMenuOnFocus
-        isDisabled={true}
-        value={vehicleTypeOptions[1]}
-        styles={{
-          ...dropdownStyles,
-          control: styles => ({
-            ...styles,
-            borderRadius: '25px',
-            cursor: 'pointer',
-          }),
-        }}
+        value={vehicleTypeOptions?.filter(
+          (x: any) => x.label === orderDetails?.vehicle_type
+        )}
+        onChange={onChange}
       />
     </FormContainer>
   );