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

package/src/components/order-view/flags-action-modal/TextSection.tsx

@@ -1,34 +1,37 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Label, TextArea } from '@bjsdistribution/dms-component-library';
-import { useSinglePayload } from '../order-actions/store';
+import { useUpdateTask } from '../order-actions/store';
 
 function TextSection() {
-  const [payload, setPayload] = useSinglePayload();
+  const [taskPayload, setTaskPayload] = useUpdateTask();
 
   const onChangeDetails = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setPayload({
-      ...payload,
+    setTaskPayload({
+      ...taskPayload,
       description: event.target.value,
     });
   };
 
   return (
     <Text>
-      <Label label="Details"></Label>
+      <Label label="Details" />
       <TextField
         placeholder="Type here...."
-        value={payload.description}
+        value={taskPayload?.description || ''}
         onChange={onChangeDetails}
       />
     </Text>
   );
 }
+
 const TextField = styled(TextArea)`
   width: 97% !important;
 `;
+
 const Text = styled.div`
   display: grid;
   margin-top: 2%;
 `;
+
 export default TextSection;

package/src/components/order-view/flags-action-modal/index.tsx

@@ -8,20 +8,18 @@ import {
 import HeaderSection from './Header';
 import TextSection from './TextSection';
 import ButtonsSection from './Dropdowns';
-import { ActionSection, RadioButtonsSection } from './Actions';
+import { RadioButtonsSection, SaveDetails } from './Actions';
 import {
-  useAllStaticData,
-  useCategoryData,
-  useDepartmentData,
+  // useTasksData,
+  useStaticData,
+  useFlagById,
   useFlagRefId,
-  useSingleFlagData,
-  useSinglePayload,
-  useTaskPriority,
-  useTaskTypeData,
-  useTaskTypeExtended,
+  useTasksData,
+  useUpdateTask,
 } from '../order-actions/store';
 import DetailSection from './DetailSection';
 import { allTypes } from '../order-actions/types';
+import { useOrderId } from '../store';
 
 interface ApiResponse {
   message: string;
@@ -32,101 +30,90 @@ interface ApiResponse {
 }
 
 function ViewFlag() {
-  const [dataArray, setSingleFlag] = useSingleFlagData();
-  const [flagRefId] = useFlagRefId();
-  const [payload, setPayload] = useSinglePayload();
-  // const fetchData = useFetchSingleFlagsData();
-  const [staticData, setStaticData] = useAllStaticData();
-  const [, setPriority] = useTaskPriority();
-  const [, setTaskCategory] = useCategoryData();
-  const [, setTaskTypes] = useTaskTypeData();
-  const [, setTaskTypeExtended] = useTaskTypeExtended();
-  const [, setDepartmentData] = useDepartmentData();
+  const [, setStaticData] = useStaticData();
+  const [flagById, setFlagById] = useFlagById();
+  const [taskPayload, setTaskPayload] = useUpdateTask();
+  const [selectedFlagId] = useFlagRefId();
+  const [orderId] = useOrderId();
+  const [, setTasksData] = useTasksData();
 
   //single flag data
-  const {
-    data: singleFlagData,
-    fetchData: fetchedSingleFlagData,
-    loading,
-  } = useAxios<ApiResponse>({
-    endpoint: `/tasks/${flagRefId}`,
+  const { data: flagDataById, fetchData: fetchedFlagById, loading } = useAxios<
+    ApiResponse
+  >({
+    endpoint: `/v1/task/${selectedFlagId}`,
     method: 'GET',
   });
 
-  //Unresolved API
-  const { fetchData: callUnresolvedTaskApi } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/tasks/`,
-    method: 'GET',
-    pagination: { is_pagination: false },
-  });
-
   // API Call
   const { data: fetchedStaticData } = useApiHook<ApiResponse>({
-    endpoint: `/tasks/getStaticData/all/`,
+    endpoint: `/v1/task/getStaticData/all/`,
     method: 'GET',
   });
 
   useEffect(() => {
     if (fetchedStaticData) {
-      setStaticData(fetchedStaticData.data);
+      setStaticData(fetchedStaticData?.data);
     }
   }, [fetchedStaticData]);
 
-  //extracted types from whole static data
-  useEffect(() => {
-    if (staticData) {
-      setPriority(staticData?.map(data => data.tasks_priority).flat());
-      setTaskTypes(staticData?.map(data => data.tasks_types).flat());
-      setTaskCategory(staticData?.map(data => data.task_categories).flat());
-      setTaskTypeExtended(
-        staticData?.map(data => data.task_sub_categories).flat()
-      );
-      setDepartmentData(staticData?.map(data => data.department).flat());
-    }
-  }, [staticData]);
+  //Unresolved API
+  const { fetchData: callUnresolvedTaskApi } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/v1/task/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: [{ field: 'order_id', op: '=', value: orderId }],
+  });
 
   useEffect(() => {
-    if (flagRefId) {
-      fetchedSingleFlagData();
+    if (selectedFlagId) {
+      fetchedFlagById();
     }
-  }, [flagRefId]);
+  }, [selectedFlagId]);
 
   useEffect(() => {
-    if (singleFlagData && singleFlagData?.data) {
-      setSingleFlag(singleFlagData?.data[0]);
+    if (flagDataById && flagDataById?.data) {
+      setFlagById(flagDataById?.data[0]);
     }
   }, [loading]);
 
   useEffect(() => {
-    setPayload({
-      ...payload,
-      task_type_id: dataArray?.task_type_id,
-      description: dataArray?.description,
-      task_priority_id: dataArray?.task_priority_id,
-      is_resolved: false,
-      id: dataArray?.id,
-      is_private: dataArray?.is_private,
-    });
-  }, [dataArray]);
+    if (flagById) {
+      setTaskPayload({
+        ...taskPayload,
+        flag_type: flagById?.task_type_id,
+        description: flagById?.description,
+        priority: flagById?.task_priority_id,
+        id: flagById?.id,
+        is_private: flagById?.is_private,
+      });
+    }
+  }, [flagById]);
 
   return (
     <>
-      {dataArray && (
+      {
         <BackgroundModals>
           <MainContainer>
-            <HeaderSection callUnresolvedTaskApi={callUnresolvedTaskApi} />
+            <HeaderSection
+              callUnresolvedTaskApi={callUnresolvedTaskApi}
+              setTasksData={setTasksData}
+            />
             <DetailSection />
             <TextSection />
             <ButtonsSection />
             <SectionsContainer>
-              <ActionSection callUnresolvedTaskApi={callUnresolvedTaskApi} />
+              <SaveDetails
+                callUnresolvedTaskApi={callUnresolvedTaskApi}
+                setTasksData={setTasksData}
+              />
               <RadioButtonsSection />
             </SectionsContainer>
           </MainContainer>
         </BackgroundModals>
-      )}
+      }
     </>
   );
 }

package/src/components/order-view/general-information/dropdowns/Print.tsx

@@ -1,110 +1,176 @@
-import {
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { PrintMenu } from '../../fakedata';
-import { useOrderDetails } from '../../store';
+import { useOrderDetails, useOrderStaticData } from '../../store';
+import { Dropdown, Space } from 'antd';
+import ArrowDownIcon from '../../../../assets/icons/ArrowDownIcon';
+import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
 
 function Print() {
   const [orderDetails] = useOrderDetails();
   const gsitId = orderDetails?.gsit_order_id;
 
-  const getEnvironment = (): 'development' | 'us' => {
-    console.log('project env', process.env.REACT_APP_API_PATH);
-    return process.env.REACT_APP_API_PATH ===
-      'https://us.dms.api.bjshomedelivery.com'
-      ? 'us'
-      : 'development';
+  const orderId = useMemo(() => {
+    return orderDetails?.id;
+  }, [orderDetails]);
+  //new
+  const [orderStaticData] = useOrderStaticData();
+  const orderTypeID = useMemo(() => {
+    return orderDetails?.order_type_id;
+  }, [orderDetails]);
+
+  const getEnvironment = ():
+    | 'development'
+    | 'release_us'
+    | 'release_uk'
+    | 'staging' => {
+    const projectEnv = process.env.REACT_APP_PROJECT_ENV;
+    const apiPath = process.env.REACT_APP_API_PATH;
+
+    if (apiPath === 'https://us.dms.api.bjshomedelivery.com') {
+      return 'release_us';
+    }
+    if (apiPath === 'https://development.dms.api.bjshomedelivery.com') {
+      return 'development';
+    }
+    if (apiPath === 'https://staging.dms.api.bjshomedelivery.com') {
+      return 'staging';
+    }
+
+    if (projectEnv === 'release_uk') {
+      return 'release_uk';
+    }
+    if (projectEnv === 'release_us') {
+      return 'release_us';
+    }
+    if (projectEnv === 'staging') {
+      return 'staging';
+    }
+    return 'development';
   };
 
   const getBaseUrl = (): string => {
     const environment = getEnvironment();
-    return environment === 'us'
-      ? 'https://us.toolbox.bjshomedelivery.com/api/v1/gsit'
-      : 'https://staging.toolbox.bjshomedelivery.com/api/v1/gsit';
+    switch (environment) {
+      case 'release_uk':
+      case 'release_us':
+        return 'https://us.toolbox.bjshomedelivery.com/api/v1/gsit';
+      case 'staging':
+        return 'https://staging.toolbox.bjshomedelivery.com/api/v1/gsit';
+      default:
+        return 'https://development.toolbox.bjshomedelivery.com/api/v1/gsit';
+    }
   };
 
   const getUrl = (option: string) => {
     const val = option?.toLowerCase()?.replaceAll(' ', '');
     const baseUrl = getBaseUrl();
 
-    if (val === 'Proof Of Delivery') {
-      return '';
-    }
-    if (val === 'proofofdelivery(doc)') {
+    if (!gsitId) {
+      console.error('Missing orderId. Cannot generate Return Labels URL.');
       return '';
     }
-    if (val === 'orderdeliverylabels') {
-      return `${baseUrl}/generate_labels?pdf=true&product_type=Deliver&order_id=${gsitId}`;
-    }
-    if (val === 'ordercollectionlabels') {
-      return `${baseUrl}/generate_labels?pdf=true&product_type=Collect&order_id=${gsitId}`;
-    }
-    if (val === 'orderreturnlabels') {
+    if (val === 'returnlabels') {
       return `${baseUrl}/generate_labels?pdf=true&product_type=Return&order_id=${gsitId}`;
-    }
-    if (val === 'returnscovernote') {
-      return '';
     } else {
       return '';
     }
   };
 
   const handleSelectChange = (selectedOption: any) => {
-    console.log(selectedOption);
     const selectedValue = selectedOption?.value;
+    const baseEndpoint = getBaseEndpoint();
     if (selectedValue) {
-      console.log(selectedValue);
-      const url = getUrl(selectedValue);
-      console.log('Generated URL:', url);
-      // You can navigate to the URL or handle it further here
-      window.open(url, '_blank');
+      //return
+      if (selectedValue === 'returncovernote') {
+        window.open(
+          `${baseEndpoint}/orders/return_cover_notes/?order_id=${orderId}`,
+          '_blank'
+        );
+        //proof
+      } else if (selectedValue === 'proofofdelivery') {
+        window.open(
+          `${baseEndpoint}/orders/generate_note/?order_id=${orderId}&output_format=pdf`,
+          '_blank'
+        );
+      } else {
+        const url = getUrl(selectedValue);
+        window.open(url, '_blank');
+      }
+    }
+  };
+
+  const isOptionDisabled = (optionValue: any) => {
+    const orderType = orderStaticData?.order_type?.find(
+      (type: any) => type?.id === orderTypeID
+    );
+    if (optionValue === 'ordercovernote') {
+      if (orderType?.type === 'return') {
+        return false;
+      }
+      return true;
     }
+    return false;
+  };
+
+  const filteredOptions = PrintMenu?.map((option: any) => ({
+    key: option.value,
+    label: option.label,
+    value: option.value,
+  }));
+
+  const menuItems = {
+    items: filteredOptions?.map((option: any) => {
+      const disabled = isOptionDisabled(option.value);
+
+      return {
+        key: option.value,
+        label: (
+          <div
+            onClick={e => {
+              e.stopPropagation();
+              if (!disabled) {
+                handleSelectChange(option);
+              }
+            }}
+            style={{
+              color: disabled ? '#bfbfbf' : undefined,
+              cursor: disabled ? 'not-allowed' : 'pointer',
+            }}
+          >
+            {option.label}
+          </div>
+        ),
+        disabled,
+      };
+    }),
   };
 
   return (
     <Container>
-      <SelectDropdown
-        placeholder="PRINT"
-        options={PrintMenu}
-        value="PRINT"
-        isSearchable={false}
-        onChange={handleSelectChange}
-        styles={{
-          ...dropdownStyles,
-          ...filterDropdownStyles,
-          container: styles => ({
-            ...styles,
-            cursor: 'pointer',
-          }),
-          menu: styles => ({
-            ...styles,
-            top: '113%',
-            borderRadius: '5px',
-            width: 'max-content',
-            cursor: 'pointer',
-          }),
-          control: styles => ({
-            ...styles,
-            width: '90px',
-            boxShadow: 'none',
-            borderColor: 'transparent',
-            cursor: 'pointer',
-            backgroundColor: 'transparent',
-            '&:hover': {
-              boxShadow: 'none',
-              borderColor: 'transparent',
-            },
-          }),
-        }}
-      />
+      <Dropdown menu={menuItems} trigger={['hover']}>
+        <a onClick={e => e.preventDefault()} style={{ cursor: 'pointer' }}>
+          <StyledSpace>
+            PRINT
+            <ArrowDownIcon fill={'#f0f2f2'} />
+          </StyledSpace>
+        </a>
+      </Dropdown>
     </Container>
   );
 }
 
 const Container = styled.div``;
 
+const StyledSpace = styled(Space)`
+  .ant-space-item {
+    color: #6a7378;
+    text-align: center;
+    font-family: Lato;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+  }
+`;
+
 export default Print;

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

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import React from 'react';
 import { Skeleton } from 'antd';
-import { formatDateTime } from '@bjsdistribution/dms-component-library';
+import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
 import { useAuditLogLoadingState, usegetNotes } from '../store';
 import { NotesTableData } from '../notes/logs/fakeData';
 
@@ -35,7 +35,9 @@ const GenericAuditLogsTable = () => {
                     <div className="bold" title={note?.created_by}>
                       {note?.created_by}
                     </div>
-                    <div>{formatDateTime(note?.created_at)}</div>
+                    <div>{`${formatUtcToLocal(note?.created_at).date} ${
+                      formatUtcToLocal(note?.created_at).time
+                    }`}</div>
                   </td>
                   <td
                     dangerouslySetInnerHTML={{ __html: note?.description }}
@@ -94,8 +96,7 @@ export const AuditTableWrapper = styled.div`
 `;
 
 const ScrollableTableWrapper = styled.div`
-  height: 250px;
-  min-height: 200px;
+  height: 550px;
   overflow: auto;
 `;
 

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

@@ -9,7 +9,7 @@ import OrderActions from './order-actions';
 import { useApiHook, useAxios } from '@bjsdistribution/dms-component-library';
 import {
   useOrderDetails,
-  useOrderStaticData,
+  // useOrderStaticData,
   useStatusDetails,
   useOrderId,
   useDepotOptions,
@@ -31,7 +31,7 @@ import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
 import { notification } from 'antd';
 import DetailsFilters from './details-filters/DetailsFilters';
-import { useSubContracterData, useVisibilityData } from '../store';
+import { useSubContracterData } from '../store';
 import Notification from './notification';
 import Order from './order-resources/expanded-content';
 import { setResourcesCall, useAllOrderStatus } from './order-actions/store';
@@ -55,7 +55,6 @@ function OrderView() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
   const [, setLoading] = useState<boolean>(false);
-  const [, setOrderStaticData] = useOrderStaticData();
   const [, setOrderStatus] = useStatusDetails();
   const [, setDepotOptions] = useDepotOptions();
   const [, setCustomerInfo] = useCustomerInfo();
@@ -66,11 +65,10 @@ function OrderView() {
   const [, setCUstomerId] = useCUstomerId();
   const [, setRouteId] = useRouteId();
   const [liveRecalling] = useLiveRecalling();
-  const [, setVisibilityData] = useVisibilityData();
   const [, setSubContracterData] = useSubContracterData();
   const [recallOrders] = useGlobalStateHitOrder();
   const [, setStatusVal] = useAllOrderStatus();
-  const gsitId = orderDetails?.gsit_order_id;
+  const order_id = orderDetails?.id;
 
   useEffect(() => {
     setStatusVal(orderDetails?.status_value);
@@ -89,9 +87,9 @@ function OrderView() {
     pagination: { page: 1, per_page: 100 },
     filters: [
       {
-        field: 'object_id',
+        field: 'order_id',
         op: '=',
-        value: `${gsitId}`,
+        value: `${order_id}`,
       },
     ],
   });
@@ -146,7 +144,7 @@ function OrderView() {
       }
     } else {
       const paths = location.pathname.split('/');
-      setOrderId(paths[paths.length - 1]);
+      setOrderId(paths[paths?.length - 1]);
     }
   }, [location.search, loadingExternal]);
 
@@ -162,13 +160,6 @@ function OrderView() {
     performAction: false,
   });
 
-  const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/orders/getStaticData/all/`,
-    method: 'GET',
-  });
-
   //Order status api
   const {
     data: fetchedStatusData,
@@ -187,6 +178,8 @@ function OrderView() {
     endpoint: `/depot/`,
     method: 'GET',
     filters: [{ field: 'visibility', op: '=', value: true }],
+    //@ts-ignore
+    pagination: { is_pagination: false },
   });
   useEffect(() => {
     if (orderId) {
@@ -195,19 +188,6 @@ function OrderView() {
     }
   }, [orderId, liveRecalling, recallOrders]);
 
-  useEffect(() => {
-    setLoading(staticDataLoading);
-    if (fetchedStaticData && fetchedStaticData.data) {
-      const result = fetchedStaticData?.data;
-      setOrderStaticData(result[0]);
-      setVisibilityData(
-        fetchedStaticData?.data?.flatMap(
-          (i: any) => i?.resource_visibility_type
-        )
-      );
-    }
-  }, [staticDataLoading]);
-
   useEffect(() => {
     setLoading(loading);
     if (fetchedData && fetchedData.data) {
@@ -240,9 +220,6 @@ function OrderView() {
         // setOrderStatus(null);
       }
     }
-    return () => {
-      // setOrderId(null);
-    };
   }, [statusDataLoading, fetchedStatusData]);
 
   const [getResources] = useAtom(setResourcesCall);
@@ -263,9 +240,6 @@ function OrderView() {
         setDepotOptions([]);
       }
     }
-    return () => {
-      // setOrderId(null);
-    };
   }, [depotDataLoading]);
 
   // Order resources
@@ -303,9 +277,6 @@ function OrderView() {
     if (orderId) {
       setOrderResources(fetchedResourcesData);
     }
-    return () => {
-      // setOrderId(null);
-    };
   }, [fetchedResourcesData, orderResources, setOrderResources]);
 
   // // Toolbox resources
@@ -330,9 +301,6 @@ function OrderView() {
   //   if (orderId) {
   //     setOrderToolbox(fetchedToolboxData);
   //   }
-  //   return () => {
-  //     // setOrderId(undefined);
-  //   };
   // }, [fetchedToolboxData, orderToolbox, setOrderToolbox]);
 
   useEffect(() => {
@@ -388,7 +356,7 @@ function OrderView() {
     return () => {
       setGsitOrderId(undefined);
     };
-  }, [gsitId]);
+  }, [order_id]);
 
   const { data: fetchedSubcontractotData, loading: apiLoading } = useApiHook<{
     data: ApiResponse[];
@@ -408,7 +376,6 @@ function OrderView() {
       setSubContracterData(formattedData);
     }
   }, [fetchedSubcontractotData, fetchedSubcontractotData, apiLoading]);
-
   return (
     <MainContainer>
       <GeneralHeader />