@bjsdistribution/dms-client-return 0.0.55 → 0.0.56

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.55",
+  "version": "0.0.56",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/header-filters/SelectionFilter.tsx

@@ -168,7 +168,7 @@ function SelectionFilter() {
       if (!currentSearch.includes('filter')) {
         console.log('inside include');
         // for dev
-        navigate(`/order/return/filter?${queryParams.toString()}`);
+        navigate(`/filter?${queryParams.toString()}`);
 
         // for local
         //navigate(`/filter?${queryParams.toString()}`);

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -306,7 +306,7 @@ const OrderTable = ({ loadingskeleton }: any) => {
                             paddingLeft: 0,
                           }}
                         >
-                          <NavLink to={`${item.id}`}>
+                          <NavLink to={`/${item.id}`}>
                             {displayValueOrNA(
                               item?.order_recipient?.recipient_name
                             )}

package/src/components/order-daily-overview/table/ReturnTable.tsx

@@ -138,7 +138,7 @@ const ReturnTable: React.FC = () => {
       customerId: customerId?.toString(),
     });
     //for dev
-    navigate(`/order/return/filter?${queryParams.toString()}`);
+    navigate(`/filter?${queryParams.toString()}`);
 
     //for local
     //navigate(`/filter?${queryParams.toString()}`);
@@ -167,7 +167,7 @@ const ReturnTable: React.FC = () => {
       type: RTS,
     });
     //for dev
-    navigate(`/order/return/filter?${queryParams.toString()}`);
+    navigate(`/filter?${queryParams.toString()}`);
 
     //for local
     //navigate(`/filter?${queryParams.toString()}`);

package/src/components/order-view/details-filters/left-side-filters/dropdowns/DropDowns.tsx

@@ -19,7 +19,7 @@ function DropDowns() {
 const DashBoardWrapper = styled.section`
   padding: 0 5px;
   display: flex;
-  align-content: center;
+  align-self: center;
   gap: 10px;
 `;
 

package/src/components/order-view/details-filters/left-side-filters/dropdowns/MenuDropDown.tsx

@@ -1,54 +1,66 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useCurrentAction } from '../../../store';
-import DropDownItem from './DropDownItem';
-import DropDownMenu from './DropDownMenu';
-import { DropDownContainer } from './DropdownStyles';
-import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
-
-const Options = [
-  // { label: 'Add Order Resource ', value: 'add-order-resources' },
-  { label: 'Split Order ', value: 'split-order' },
-];
-
-const MenuDropDown: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+import {
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import { bjsMenu } from '../../../fakedata';
+import { useCurrentAction, useStatusDetails } from '../../../store';
+function BjsMenu() {
   const [, setCurrentAction] = useCurrentAction();
-  const handleClick = () => {
-    setIsOpen(prev => !prev);
+  const handleSelectChange = (selectedOption: any) => {
+    setCurrentAction(selectedOption.value);
   };
 
-  const handleSelect = (selectedOption: any) => {
-    setCurrentAction(selectedOption);
-    setIsOpen(false);
-  };
+  const [orderStatus] = useStatusDetails();
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    };
+  const isReleased = orderStatus[0]?.released;
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+  const filteredOptions = bjsMenu.filter(option => {
+    if (isReleased) {
+      return option.value !== 'release-order';
+    } else {
+      return option;
+    }
+  });
 
   return (
-    <DropDownContainer ref={dropdownRef}>
-      <DropDownItem
-        label="BJS MENU"
-        icon={<DropDownLarge />}
-        onClick={handleClick}
-      />
-      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
-    </DropDownContainer>
+    <SelectDropdown
+      placeholder="BJS MENU"
+      inputId="bjsmenu"
+      options={filteredOptions}
+      onChange={handleSelectChange}
+      isSearchable={false}
+      styles={{
+        ...dropdownStyles,
+        ...filterDropdownStyles,
+        container: styles => ({
+          ...styles,
+          cursor: 'pointer',
+        }),
+        menu: styles => ({
+          ...styles,
+          top: '113%',
+          borderRadius: '5px',
+          width: 'max-content',
+          cursor: 'pointer',
+        }),
+        control: styles => ({
+          ...styles,
+          width: '105px',
+          boxShadow: 'none',
+          borderColor: 'transparent',
+          cursor: 'pointer',
+          backgroundColor: 'transparent',
+          '&:hover': {
+            boxShadow: 'none',
+            borderColor: 'transparent',
+          },
+        }),
+      }}
+      value="BJS MENU"
+    />
   );
-};
+}
 
-export default MenuDropDown;
+export default BjsMenu;

package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx

@@ -1,72 +1,85 @@
-import React, { useEffect, useRef, useState } from 'react';
+import {
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import { optionsMenu } from '../../../fakedata';
+import { useCurrentAction, useOrderDetails } from '../../../store';
 
-import { DropDownContainer } from './DropdownStyles';
-import DropDownMenu from './DropDownMenu';
-import DropDownItem from './DropDownItem';
-import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
-import { useCurrentAction, useIsOnHoldOrder } from '../../../store';
-
-const Options = [
-  { label: 'Create Reminder', value: 'create-task' },
-  { label: 'Confirm', value: 'confirm-order' },
-  // { label: 'Force Debrief', value: 'force-debrief' },
-  // { label: 'Clear Booking Status', value: 'booking-status' },
-  // { label: 'Remove From Route', value: 'remove-route' },
-  { label: 'Hold', value: 'hold-order' },
-  // { label: 'Flag', value: 'view-flag' },
-  { label: 'Cancel', value: 'cancel-order' },
-  { label: 'Charge Log', value: 'charge-log' },
-];
-
-const OptionsDropDown: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+function Options() {
   const [, setCurrentAction] = useCurrentAction();
-  const [hold] = useIsOnHoldOrder();
 
-  // console.log(action, 'action');
-  const handleClick = () => {
-    setIsOpen(prev => !prev);
+  const handleSelectChange = (selectedOption: any) => {
+    setCurrentAction(selectedOption.value);
   };
 
-  const filteredOptions = Options?.filter(option => {
-    if (hold) {
-      return option.value !== 'hold-order';
-    } else {
-      return option.value !== 'unhold-order';
-    }
-  });
-  const handleSelect = (selectedOption: any) => {
-    setCurrentAction(selectedOption);
-    setIsOpen(false);
-  };
+  const [orderDetails] = useOrderDetails();
+  const isOrderOnHold = orderDetails?.status === 'OO';
+  const isOrderCancelled = orderDetails?.status === 'CO';
+
+  const filteredOptions = optionsMenu.filter(option => {
+    let shouldExclude = false;
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
+    if (isOrderOnHold && option.value === 'hold-order') {
+      shouldExclude = true;
+    }
+    if (isOrderCancelled && option.value === 'cancel-order') {
+      shouldExclude = true;
+    }
+    if (!isOrderCancelled || isOrderOnHold) {
+      if (option.value === 'uncancel-order') {
+        shouldExclude = true;
       }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+    }
+    if (!isOrderOnHold && option.value === 'unhold-order') {
+      shouldExclude = true;
+    }
+
+    return !shouldExclude;
+  });
 
   return (
-    <DropDownContainer ref={dropdownRef}>
-      <DropDownItem
-        label="Options"
-        icon={<DropDownLarge />}
-        onClick={handleClick}
+    <Option>
+      <SelectDropdown
+        placeholder="OPTIONS"
+        inputId="bjsmenu"
+        options={filteredOptions}
+        onChange={handleSelectChange}
+        isSearchable={false}
+        styles={{
+          ...dropdownStyles,
+          ...filterDropdownStyles,
+          container: styles => ({
+            ...styles,
+            cursor: 'pointer',
+          }),
+          menu: styles => ({
+            ...styles,
+            top: '113%',
+            borderRadius: '5px',
+            width: 'max-content',
+            cursor: 'pointer',
+          }),
+          control: styles => ({
+            ...styles,
+            width: '105px',
+            boxShadow: 'none',
+            borderColor: 'transparent',
+            cursor: 'pointer',
+            backgroundColor: 'transparent',
+            '&:hover': {
+              boxShadow: 'none',
+              borderColor: 'transparent',
+            },
+          }),
+        }}
+        value="OPTIONS"
       />
-      {isOpen && (
-        <DropDownMenu options={filteredOptions} onSelect={handleSelect} />
-      )}
-    </DropDownContainer>
+    </Option>
   );
-};
-export default OptionsDropDown;
+}
+const Option = styled.div``;
+
+export default Options;

package/src/components/order-view/fakedata.ts

@@ -10,77 +10,14 @@ export const bjsMenu = [
     label: 'Split Order',
     value: 'split-order',
   },
-  {
-    label: 'Escalations',
-    value: 'escalations',
-  },
-  {
-    label: 'Release Order',
-    value: 'release-order',
-  },
 ];
 
-export const OptionsMenu = [
-  {
-    label: 'Log Service Refusal',
-    value: 'log-service-refusal',
-  },
-  {
-    label: 'Confirm',
-    value: 'confirm-order',
-  },
-  {
-    label: 'Force Debrief',
-    value: 'force-debrief',
-  },
-  {
-    label: 'Charge Log',
-    value: 'charge-log',
-  },
-  {
-    label: 'Log Feedback',
-    value: 'log-feedback',
-  },
-  {
-    label: 'On Hold',
-    value: 'hold-order',
-  },
-  {
-    label: 'Un Hold',
-    value: 'unhold-order',
-  },
-  {
-    label: 'Change Customer Account',
-    value: 'change-customer-account',
-  },
-  {
-    label: 'Proximity Report',
-    value: 'promixity-report',
-  },
-  {
-    label: 'Raise Collection',
-    value: 'raise-collection',
-  },
-  {
-    label: 'Remove from Route',
-    value: 'remove-from-route',
-  },
-  {
-    label: 'Add New Flag',
-    value: 'add-new-flag',
-  },
-  {
-    label: 'Un-Release Order',
-    value: 'unrelease-order',
-  },
-  {
-    label: 'Cancel',
-    value: 'cancel-order',
-  },
-  {
-    label: 'Clear Booking Status',
-    value: 'clear-booking-status',
-  },
+export const optionsMenu = [
+  { label: 'Create Reminder', value: 'create-task' },
+  { label: 'Confirm', value: 'confirm-order' },
+  { label: 'Hold', value: 'hold-order' },
+  { label: 'Cancel', value: 'cancel-order' },
+  // { label: 'Charge Log', value: 'charge-log' },
 ];
 
 export const PrintMenu = [

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

@@ -1,21 +1,16 @@
-import React, { useRef, useState } from 'react';
+import {
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
 import { PrintMenu } from '../../fakedata';
 import { useOrderDetails } from '../../store';
-import { DropDownContainer } from '../../details-filters/left-side-filters/dropdowns/DropdownStyles';
-import DropDownItem from '../../details-filters/left-side-filters/dropdowns/DropDownItem';
-import DropDownLarge from '../../../../assets/icons/DropDownLarge';
-import DropDownMenu from '../../details-filters/left-side-filters/dropdowns/DropDownMenu';
 
 function Print() {
   const [orderDetails] = useOrderDetails();
   const gsitId = orderDetails?.gsit_order_id;
-  const dropdownRef = useRef<HTMLDivElement>(null);
-  // console.log(gsitId, 'gsitId');
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClick = () => {
-    setIsOpen(prev => !prev);
-  };
 
   const getEnvironment = (): 'development' | 'us' => {
     console.log('project env', process.env.REACT_APP_API_PATH);
@@ -39,50 +34,77 @@ function Print() {
     if (val === 'Proof Of Delivery') {
       return '';
     }
-    if (val === 'Proof Of Delivery(DOC)') {
+    if (val === 'proofofdelivery(doc)') {
       return '';
     }
-    if (val === 'Order Delivery labels') {
+    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') {
-    //   return `${baseUrl}/generate_labels?pdf=true&product_type=Return&order_id=${gsitId}`;
-    // }
-    // if (val === 'returnscovernote') {
-    //   return '';
-    // }
-    else {
+    if (val === 'ordercollectionlabels') {
+      return `${baseUrl}/generate_labels?pdf=true&product_type=Collect&order_id=${gsitId}`;
+    }
+    if (val === 'orderreturnlabels') {
+      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;
-
-    console.log(selectedValue, 'erf');
     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 (
-    <DropDownContainer ref={dropdownRef}>
-      <DropDownItem
-        label="PRINT"
-        icon={<DropDownLarge />}
-        onClick={handleClick}
+    <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',
+            },
+          }),
+        }}
       />
-      {isOpen && (
-        <DropDownMenu options={PrintMenu} onSelect={handleSelectChange} />
-      )}
-    </DropDownContainer>
+    </Container>
   );
 }
 
+const Container = styled.div``;
+
 export default Print;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import BjsMenu from './BjsMenu';
-import Options from './Options';
 import Print from './Print';
+import Options from '../../details-filters/left-side-filters/dropdowns/OptionsDropDown';
 function DropDownOptions() {
   return (
     <Container>
@@ -16,7 +16,6 @@ function DropDownOptions() {
 const Container = styled.div`
   display: flex;
   padding: 0 20px;
-  /* height: 40px; */
   gap: 10px;
   align-items: center;
   border-top: 1px solid #ccc;

package/src/components/order-view/hooks/useUpdateOrder.ts

@@ -1,12 +1,10 @@
 import { getBaseEndpoint } from '@bjsdistribution/dms-component-library';
 import { getCookie } from '../utils';
 import { notification } from 'antd';
-import { useUpdateApiCall } from '../store';
 
 function useUpdateOrder() {
   let controller: AbortController;
   const ssoToken = getCookie('id_token');
-  const [, setCallApi] = useUpdateApiCall(); //single detail
 
   const update = async (data: any) => {
     const endpoint = `${getBaseEndpoint()}/orders/update/`;
@@ -40,7 +38,6 @@ function useUpdateOrder() {
         message: 'Success',
         description: 'Order has been updated.',
       });
-      setCallApi(true);
       return json;
     } catch (err) {
       //   setLoading(false);