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

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

@@ -16,7 +16,7 @@ import styled from 'styled-components';
 import dayjs from 'dayjs';
 import {
   useAssignData,
-  useCustomerData,
+  // useCustomerData,
   useStatusOrderData,
 } from '../../../store';
 import StatusIcon from '../../../../assets/icons/StatusIcon';
@@ -27,9 +27,12 @@ import {
   StyledFilterBtnLabel,
 } from '../../table/table-data/styles';
 import { filtersReducerReturnAtom } from './ReturnFilterStore';
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../common/interface';
+
 const ReturnOrderFilter = () => {
   const [, dispatch] = useAtom(filtersReducerReturnAtom);
-  const [customers] = useCustomerData();
+  // const [customers] = useCustomerData();
   const [selectedDate, setSelectedDate] = useState<any | null>();
   const [statusOfOrder] = useStatusOrderData();
   const [selectedClient, setSelectedClient] = useState<any | null>();
@@ -37,6 +40,18 @@ const ReturnOrderFilter = () => {
   const [selectedAssignee, setSelectedAssignee] = useState<any | null>();
   const [assignData] = useAssignData();
 
+  //API for client data
+  const { data: fetchedCustomerData, fetchData } = useAxios<ApiResponse>({
+    endpoint: `/v1/return/order/customers/`,
+    method: 'GET',
+    //@ts-ignore
+    pagination: { is_pagination: false },
+  });
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   // date change here
   const handleDateChange = (date: any | null) => {
     setSelectedDate(date ? date?.$d : null);
@@ -55,7 +70,7 @@ const ReturnOrderFilter = () => {
     }
   }, [selectedDate]);
   //client options
-  const clientOptions = customers?.map((option: any) => ({
+  const clientOptions = fetchedCustomerData?.data?.map((option: any) => ({
     label:
       option?.customer_name?.charAt(0)?.toUpperCase() +
       option?.customer_name?.slice(1),
@@ -66,7 +81,7 @@ const ReturnOrderFilter = () => {
     label:
       option?.status_type?.charAt(0)?.toUpperCase() +
       option?.status_type?.slice(1),
-    value: option?.id,
+    value: option?.type,
   }));
   const handleClientChange = (value: any) => {
     if (value === selectedClient) return;

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -27,6 +27,7 @@ import {
 } from '../../store/store';
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
+import { NavLink } from 'react-router-dom';
 
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
@@ -116,7 +117,7 @@ const ReturnOrderTable = () => {
     paginationData,
     setShouldPerformAction,
   } = useApiHook<ApiResponse>({
-    endpoint: '/return_order_products/',
+    endpoint: '/v1/return/product/pending/',
     method: 'GET',
     filters: filters,
     pagination: pagination,
@@ -174,14 +175,14 @@ const ReturnOrderTable = () => {
 
     if (isChecked) {
       const filteredData = returnData?.filter(
-        (loc: any) => loc?.order_product_return_action?.type === 'RTS'
+        (loc: any) => loc?.product_return_action === 'RTS'
       );
       const selectedOrders = filteredData.map((loc: any) => ({
         id: loc.id,
-        return_locations: loc?.return_locations,
+        return_locations: loc?.return_location_name,
         return_location: loc?.return_location,
         products: loc?.legacy_product_id,
-        order_product_return_action: loc?.order_product_return_action,
+        product_return_action: loc?.product_return_action,
         return_location_token: loc?.return_location,
       }));
       const newPayload = filteredData.map((loc: any) => ({
@@ -189,7 +190,7 @@ const ReturnOrderTable = () => {
         account_number: createReturn?.account_number,
         customer_id: +createReturn?.customer_id,
         products: [loc?.legacy_product_id],
-        return_action: loc?.order_product_return_action?.type,
+        return_action: loc?.product_return_action,
         return_location_token: loc?.return_location || null,
       }));
 
@@ -205,8 +206,8 @@ const ReturnOrderTable = () => {
   const handleSelectOrderReturn = (
     id: any,
     return_location: any,
-    return_locations: any,
-    order_product_return_action: any,
+    return_location_name: any,
+    product_return_action: any,
     legacy_product_id: any
   ) => {
     setSelectedReturnOrder((prevSelectedLocations: any) => {
@@ -222,7 +223,7 @@ const ReturnOrderTable = () => {
         setReturnPayload(prevState => ({
           ...prevState,
           products: legacy_product_id,
-          return_action: order_product_return_action?.type || null,
+          return_action: product_return_action || null,
           return_location_token: return_location || null,
           // new_location: new_location,
         }));
@@ -239,7 +240,7 @@ const ReturnOrderTable = () => {
           account_number: createReturn?.account_number,
           customer_id: +createReturn?.customer_id,
           products: [legacy_product_id],
-          return_action: order_product_return_action?.type || null,
+          return_action: product_return_action || null,
           return_location_token: return_location || null,
         };
 
@@ -250,14 +251,14 @@ const ReturnOrderTable = () => {
           {
             id,
             return_location,
-            return_locations,
-            order_product_return_action,
+            return_location_name,
+            product_return_action,
           },
         ];
         setSelectAll(
           updatedSelectedLocations?.length ===
             returnData?.filter(
-              (loc: any) => loc?.order_product_return_action?.type === 'RTS'
+              (loc: any) => loc?.product_return_action === 'RTS'
             )?.length
         );
         return updatedSelectedLocations;
@@ -295,7 +296,6 @@ const ReturnOrderTable = () => {
 
       return acc;
     }, []);
-
     const mergedPayload = Object.values(groupedPayload);
     setGrouped(mergedPayload);
   }, [newpayload]);
@@ -310,7 +310,7 @@ const ReturnOrderTable = () => {
                 <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th> */}
               {returnData?.some(
-                (item: any) => item?.order_product_return_action?.type === 'RTS'
+                (item: any) => item?.product_return_action === 'RTS'
               ) ? (
                 <th className="emailInvoiceCheckbox">
                   <Checkbox checked={selectAll} onChange={handleSelectAll} />
@@ -318,25 +318,19 @@ const ReturnOrderTable = () => {
               ) : (
                 <th></th>
               )}
-              <th onClick={() => handleSort('orders_products_stock.location')}>
+              <th onClick={() => handleSort('location')}>
                 <div className="sortIconClass">
-                  Product Location{' '}
-                  {renderSortIcon('orders_products_stock.location')}
+                  Product Location {renderSortIcon('location')}
                 </div>
               </th>
-              <th onClick={() => handleSort('new_location')}>
+              <th onClick={() => handleSort('return_location_name')}>
                 <div className="sortIconClass">
-                  Return Location {renderSortIcon('new_location')}
+                  Return Location {renderSortIcon('return_location_name')}
                 </div>
               </th>
-              <th
-                onClick={() =>
-                  handleSort('order_data.order_recipient.recipient_name')
-                }
-              >
+              <th onClick={() => handleSort('recipient_name')}>
                 <div className="sortIconClass">
-                  Recipient{' '}
-                  {renderSortIcon('order_data.order_recipient.recipient_name')}
+                  Recipient {renderSortIcon('recipient_name')}
                 </div>
               </th>
               <th>Return Action</th>
@@ -349,16 +343,15 @@ const ReturnOrderTable = () => {
                 </div>
               </th>
               <th>CBM</th>
-              <th onClick={() => handleSort('return_reasons.reason')}>
+              <th onClick={() => handleSort('return_reason')}>
                 <div className="sortIconClass">
-                  Return Reason {renderSortIcon('return_reasons.reason')}
+                  Return Reason {renderSortIcon('return_reason')}
                 </div>
               </th>
               <th>Collected</th>
-              <th onClick={() => handleSort('collection_reasons.reason')}>
+              <th onClick={() => handleSort('collection_reason')}>
                 <div className="sortIconClass">
-                  Collection Reason{' '}
-                  {renderSortIcon('collection_reasons.reason')}
+                  Collection Reason {renderSortIcon('collection_reason')}
                 </div>
               </th>
               <th className="emailInvoiceShare">Labels</th>
@@ -383,7 +376,7 @@ const ReturnOrderTable = () => {
               sortedData?.map((item: any, index: any) => (
                 <tr key={item.id}>
                   <td>
-                    {item?.order_product_return_action?.type === 'RTS' ? (
+                    {item?.product_return_action === 'RTS' ? (
                       <Checkbox
                         className="custom-check"
                         checked={selectedReturnOrder.some(
@@ -394,8 +387,8 @@ const ReturnOrderTable = () => {
                           handleSelectOrderReturn(
                             item?.id,
                             item?.return_location,
-                            item?.return_locations,
-                            item?.order_product_return_action,
+                            item?.return_location_name,
+                            item?.product_return_action,
                             item?.legacy_product_id
                           )
                         }
@@ -404,17 +397,13 @@ const ReturnOrderTable = () => {
                   </td>
 
                   <td>
-                    {item?.orders_products_stock?.location !== null &&
-                    item?.orders_products_stock?.location !== undefined ? (
-                      item.orders_products_stock.location
+                    {item?.location !== null && item?.location !== undefined ? (
+                      item?.location
                     ) : (
                       <div className="awaiting">Awaiting</div>
                     )}
                   </td>
-                  <td>
-                    {' '}
-                    {displayValueOrNA(item?.return_locations?.location_name)}
-                  </td>
+                  <td> {displayValueOrNA(item?.return_location_name)}</td>
                   <td>
                     <ul style={{ listStyleType: 'none', padding: 0 }}>
                       <li
@@ -424,39 +413,32 @@ const ReturnOrderTable = () => {
                           paddingLeft: 0,
                         }}
                       >
-                        {displayValueOrNA(
-                          item?.order_data?.order_recipient?.recipient_name
-                        )}
+                        <NavLink to={`/orders/view/${item?.order_id}`}>
+                          {displayValueOrNA(item?.recipient_name)}
+                        </NavLink>
                       </li>
                       <li style={{ color: '#888075' }}>
-                        {displayValueOrNA(
-                          item?.order_data?.order_recipient?.postcode
-                        )}
+                        {displayValueOrNA(item?.postcode)}
                       </li>
                     </ul>
                   </td>
-                  <td>
-                    {displayValueOrNA(item?.order_product_return_action?.type)}
-                  </td>
+                  <td>{displayValueOrNA(item?.product_return_action)}</td>
                   <td>{displayValueOrNA(item?.code)}</td>
                   <td>{displayValueOrNA(item?.description)}</td>
-                  <td>{displayValueOrNA(item?.parts_count)}</td>
+                  <td>{displayValueOrNA(item?.part)}</td>
                   <td>
                     {displayValueOrNA(item?.weight)}{' '}
                     {item?.weight && item?.weight !== null ? 'KG' : ''}
                   </td>
                   <td>{displayValueOrNA(item?.cube)}</td>
-                  <td>{displayValueOrNA(item?.return_reasons?.reason)}</td>
+                  <td>{displayValueOrNA(item?.return_reason)}</td>
                   <td>
-                    {item?.order_product_returns?.length > 0
-                      ? item?.order_product_returns?.map((ret: any) =>
-                          ret?.collected_at
-                            ? format(new Date(ret?.collected_at), 'dd/MM/yyyy')
-                            : 'UNKNOWN'
-                        )
+                    {item?.collected_at
+                      ? format(new Date(item?.collected_at), 'dd/MM/yyyy')
                       : 'UNKNOWN'}
                   </td>
-                  <td>{displayValueOrNA(item?.collection_reasons?.reason)}</td>
+
+                  <td>{displayValueOrNA(item?.collection_reason)}</td>
                   <td>
                     <ul className="actionbox">
                       <CustomDrop

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

@@ -1,11 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  useAtom,
-  useClientData,
-  useOrderStaticData,
-} from '../../order-view/store';
+import { useAtom, useClientData } from '../../order-view/store';
 import { useStatsLoading } from '../store/store';
-import { useApiHook } from '@bjsdistribution/dms-component-library';
 import {
   ColumStyle,
   EmptyDataContainer,
@@ -20,19 +15,10 @@ import { useCustomerData } from '../../store';
 import SortIcon from '../../../common/SortIcon';
 import CaretDownFilledIcon from '../../../common/CaretDownFilledIcon';
 
-interface ApiResponse {
-  message: string;
-  code: number;
-  error: string | null;
-  error_traceback: string | null;
-  data: [];
-}
-
 const ReturnTable: React.FC = () => {
   const [clientData] = useClientData();
   const [updatedData, setUpdatedData] = useState<any>([]);
   const [statsLoading] = useStatsLoading();
-  const [, setOrderStaticData] = useOrderStaticData();
   const [, dispatch] = useAtom(filtersReducerAtom);
   const navigate = useNavigate();
   const [customers] = useCustomerData();
@@ -84,21 +70,6 @@ const ReturnTable: React.FC = () => {
     );
   };
 
-  //API call
-  const { data: fetchedStaticData, loading: staticDataLoading } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/orders/getStaticData/all/`,
-    method: 'GET',
-  });
-
-  useEffect(() => {
-    if (fetchedStaticData && fetchedStaticData.data) {
-      const result = fetchedStaticData?.data;
-      setOrderStaticData(result[0]);
-    }
-  }, [staticDataLoading, fetchedStaticData]);
-
   //updated client data
   useEffect(() => {
     const updatedClientData = clientData?.map(client => {

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

@@ -1,26 +1,76 @@
 import React from 'react';
 import styled from 'styled-components';
 import OptionsDropDown from './OptionsDropDown';
-import MenuDropDown from './MenuDropDown';
 import Print from '../../../general-information/dropdowns/Print';
+import BjsMenuDropDown from './MenuDropDown';
+import { useCurrentAction, useOrderDetails } from '../../../store';
 // components
 
 function DropDowns() {
+  const [orderDetails] = useOrderDetails();
+  const [, setCurrentAction] = useCurrentAction();
+
+  const isEmailId = orderDetails?.order_recipient?.contact_email;
+  const isContactNum = orderDetails?.order_recipient?.contact_home;
+
+  const actions = [];
+
+  if (isContactNum) {
+    actions?.push({
+      label: 'Send SMS',
+      onClick: () => setCurrentAction('send-sms'),
+    });
+  }
+
+  if (isEmailId) {
+    actions?.push({
+      label: 'Send Email',
+      onClick: () => setCurrentAction('send-email'),
+    });
+  }
+
   return (
     <>
       <DashBoardWrapper>
-        <MenuDropDown />
+        <BjsMenuDropDown />
         <OptionsDropDown />
         <Print />
+        {actions?.map((action, index) => (
+          <FontContainer
+            key={index}
+            onClick={action.onClick}
+            style={{ cursor: 'pointer' }}
+          >
+            {action.label}
+          </FontContainer>
+        ))}
       </DashBoardWrapper>
     </>
   );
 }
+
 const DashBoardWrapper = styled.section`
   padding: 0 5px;
   display: flex;
   align-self: center;
   gap: 10px;
+  align-items: center;
+`;
+
+export const FontContainer: any = styled.div<{ disabled?: boolean }>`
+  color: #6a7378;
+  text-align: center;
+  font-family: 'lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+  text-transform: uppercase;
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  @media screen and (max-width: 1210px) {
+    font-size: 11px;
+    line-height: 12px;
+  }
 `;
 
 export default DropDowns;

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

@@ -1,15 +1,14 @@
-import {
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import { bjsMenu } from '../../../fakedata';
 import { useCurrentAction, useStatusDetails } from '../../../store';
-function BjsMenu() {
+import ArrowDownIcon from '../../../../../assets/icons/ArrowDownIcon';
+import { Dropdown, Space } from 'antd';
+import styled from 'styled-components';
+
+function BjsMenuDropDown() {
   const [, setCurrentAction] = useCurrentAction();
   const handleSelectChange = (selectedOption: any) => {
-    setCurrentAction(selectedOption.value);
+    setCurrentAction(selectedOption);
   };
 
   const [orderStatus] = useStatusDetails();
@@ -24,43 +23,38 @@ function BjsMenu() {
     }
   });
 
+  const menuItems = {
+    items: filteredOptions?.map(option => ({
+      key: option.value,
+      label: (
+        <div onClick={() => handleSelectChange(option.value)}>
+          {option.label}
+        </div>
+      ),
+    })),
+  };
+
   return (
-    <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"
-    />
+    <Dropdown menu={menuItems} trigger={['hover']}>
+      <a onClick={e => e.preventDefault()} style={{ cursor: 'pointer' }}>
+        <StyledSpace>
+          BJS MENU
+          <ArrowDownIcon fill={'#f0f2f2'} />
+        </StyledSpace>
+      </a>
+    </Dropdown>
   );
 }
 
-export default BjsMenu;
+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 BjsMenuDropDown;