@bjsdistribution/dms-client-return 0.0.12 → 0.0.14

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

@@ -1,13 +1,19 @@
 import React from 'react';
 import styled from 'styled-components';
 import ServiceSlider from '../../../../../common/services-slider/ServiceSlider';
-import { useOrderDetails, useOrderStaticData } from '../../../store';
+import {
+  useOrderDetails,
+  useOrderStaticData,
+  usePrevOrderDetails,
+} from '../../../store';
 import { OrderServiceType } from '../../../types';
 
 function OrderServices() {
   const [orderStaticData] = useOrderStaticData();
   const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails] = usePrevOrderDetails();
   const orderServices = orderDetails?.order_services;
+  const prevOrderServices = prevOrderDetails?.order_services;
 
   const orderServicesOptions = orderStaticData?.order_service_list;
 
@@ -16,12 +22,27 @@ function OrderServices() {
     const selectedService = clone?.find(
       (s: OrderServiceType) => s?.order_service_list_id === id
     );
+    const assembleOrderService = orderStaticData?.order_service_list?.find(
+      (x: any) => x?.type?.toLowerCase() === 'assemble'
+    );
+    const disassembleOrderService = orderStaticData?.order_service_list?.find(
+      (x: any) => x?.type?.toLowerCase() === 'disassemble'
+    );
+
+    const assemblyTypeService = clone?.find(
+      (x: any) => x?.order_service_list_id === assembleOrderService?.id
+    );
+
+    const disassemblyTypeService = clone?.find(
+      (x: any) => x?.order_service_list_id === disassembleOrderService?.id
+    );
+
     if (selectedService !== undefined) {
-      //TO DO -> special case for assemble service but need discussion before proceeding anything
-      // const assembleOrderService = orderStaticData?.order_service_list?.find(
-      //   (x: any) => x?.type?.toLowerCase() === 'assemble'
-      // );
-      // const isAssembleService = assembleOrderService?.id === id;
+      const isAssembleService =
+        assembleOrderService?.id === selectedService?.order_service_list_id;
+
+      const isDisassembleService =
+        disassembleOrderService?.id === selectedService?.order_service_list_id;
 
       if (selectedService.new_id) {
         const updatedOrderServices = clone.filter(
@@ -33,36 +54,140 @@ function OrderServices() {
         };
         setOrderDetails(newData);
       } else {
-        const updatedSelectedService = {
+        let updatedSelectedService = {
           ...selectedService,
           is_deleted: !selectedService.is_deleted,
         };
-        // if(isAssembleService && updatedSelectedService.is_deleted === true) {
-        // TO DO -> handle later
-        // }
-        const updatedOrderServices = clone.filter(
+
+        let updatedOrderServices = [];
+        let newUpdatedOrderServices: any = [];
+
+        updatedOrderServices = clone.filter(
           (service: OrderServiceType) => service.id !== selectedService.id
         );
+
         updatedOrderServices.push(updatedSelectedService);
+        if (
+          (isAssembleService &&
+            updatedSelectedService?.is_deleted === true &&
+            (disassemblyTypeService?.is_deleted === true ||
+              disassemblyTypeService === undefined ||
+              disassemblyTypeService === null)) ||
+          (isDisassembleService &&
+            updatedSelectedService?.is_deleted === true &&
+            (assemblyTypeService?.is_deleted === true ||
+              assemblyTypeService === undefined ||
+              assemblyTypeService === null))
+        ) {
+          const prevSelectedService = prevOrderServices?.find(
+            (s: OrderServiceType) => s?.order_service_list_id === id
+          );
+          updatedSelectedService = {
+            ...selectedService,
+            is_deleted: true,
+            service_category_id: prevSelectedService?.service_category_id,
+          };
+          updatedOrderServices = clone.filter(
+            (service: OrderServiceType) => service.id !== selectedService.id
+          );
+
+          updatedOrderServices.push(updatedSelectedService);
+          // new cases
+          if (
+            isAssembleService &&
+            disassemblyTypeService?.is_deleted === true &&
+            disassemblyTypeService !== undefined &&
+            disassemblyTypeService !== null
+          ) {
+            const newUpdatedSelectedService = {
+              ...disassemblyTypeService,
+              is_deleted: true,
+              service_category_id: prevSelectedService?.service_category_id,
+            };
+            newUpdatedOrderServices = updatedOrderServices?.filter(
+              (service: OrderServiceType) =>
+                service.id !== disassemblyTypeService.id
+            );
+            newUpdatedOrderServices?.push(newUpdatedSelectedService);
+          }
+          // new cases
+          if (
+            isDisassembleService &&
+            assemblyTypeService?.is_deleted === true &&
+            assemblyTypeService !== undefined &&
+            assemblyTypeService !== null
+          ) {
+            const newUpdatedSelectedService = {
+              ...assemblyTypeService,
+              is_deleted: true,
+              service_category_id: prevSelectedService?.service_category_id,
+            };
+            newUpdatedOrderServices = updatedOrderServices?.filter(
+              (service: OrderServiceType) =>
+                service.id !== assemblyTypeService.id
+            );
+            newUpdatedOrderServices?.push(newUpdatedSelectedService);
+          }
+        }
+
         const newData = {
           ...orderDetails,
-          order_services: updatedOrderServices,
+          order_services:
+            newUpdatedOrderServices.length > 0
+              ? newUpdatedOrderServices
+              : updatedOrderServices,
         };
         setOrderDetails(newData);
       }
     } else {
       // service not exist case
       // if not matched then treat it as an new service
-      const largestId = Math.max(
-        ...clone?.map((o: OrderServiceType) => +o?.order_service_list_id!)
-      );
-      const service: OrderServiceType = {
+      let largestId: number;
+      if (clone === undefined || clone.length === 0) {
+        largestId = 0;
+      } else {
+        largestId = Math.max(
+          ...clone?.map((o: OrderServiceType) => +o?.order_service_list_id!)
+        );
+      }
+
+      let service: OrderServiceType = {};
+      // Normal service addition
+      service = {
         is_deleted: false,
         order_service_list_id: id,
         new_id:
           largestId !== undefined && largestId !== null ? largestId + 1 : 1,
         id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
       };
+      // special case if assembly already exist and we are adding disassemble service and vice-versa
+      if (
+        assemblyTypeService?.is_deleted === false &&
+        disassembleOrderService?.id === id
+      ) {
+        service = {
+          is_deleted: false,
+          order_service_list_id: id,
+          new_id:
+            largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          service_category_id: assemblyTypeService?.service_category_id,
+        };
+      }
+
+      if (
+        disassemblyTypeService?.is_deleted === false &&
+        assembleOrderService?.id === id
+      ) {
+        service = {
+          is_deleted: false,
+          order_service_list_id: id,
+          new_id:
+            largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          id: largestId !== undefined && largestId !== null ? largestId + 1 : 1,
+          service_category_id: disassemblyTypeService?.service_category_id,
+        };
+      }
       clone.push(service);
       const newData = { ...orderDetails, order_services: clone };
       setOrderDetails(newData);

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

@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  Label,
-  SelectDropdown,
-  dropdownStyles,
-} from '@bjsdistribution/dms-component-library';
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
 import styled from 'styled-components';
 import { capitalize } from '../../../utils';
@@ -36,14 +32,6 @@ 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,13 +1,16 @@
 import React from 'react';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
-import {
-  Label,
-  SelectDropdown,
-  dropdownStyles,
-} from '@bjsdistribution/dms-component-library';
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 import { capitalize } from '../../../utils';
 
+function convertTo12HourFormat(time24: any) {
+  const [hours, minutes] = time24?.split(':')?.map(Number);
+  const period = hours >= 12 ? 'PM' : 'AM';
+  const hours12 = hours % 12 || 12; // Convert to 12-hour format
+  return `${hours12}:${minutes?.toString()?.padStart(2, '0')} ${period}`;
+}
+
 function TimedServiceDropdown() {
   const [orderStaticData] = useOrderStaticData();
   const [orderData, setOrderData] = useOrderDetails();
@@ -15,10 +18,17 @@ function TimedServiceDropdown() {
   const timesServiceId = orderData?.order_services_detail?.timed_service_id;
 
   const timedServicesOptions = orderStaticData?.order_timed_services?.map(
-    (option: any) => ({
-      label: capitalize(option.type.replaceAll('_', ' ')),
-      value: option.id,
-    })
+    (option: any) => {
+      const startTime = convertTo12HourFormat(option?.start_time);
+      const endTime = convertTo12HourFormat(option?.end_time);
+      const label = `${capitalize(
+        option?.type?.replaceAll('_', ' ')
+      )} (${startTime} - ${endTime})`;
+      return {
+        label: label,
+        value: option?.id,
+      };
+    }
   );
 
   const onChange = (event: any) => {
@@ -41,15 +51,6 @@ function TimedServiceDropdown() {
         )}
         inputId="timedServiceDropdown"
         onChange={onChange}
-        styles={{
-          ...dropdownStyles,
-
-          control: styles => ({
-            ...styles,
-            borderRadius: '25px',
-            cursor: 'pointer',
-          }),
-        }}
       />
     </Container>
   );

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

@@ -14,7 +14,7 @@ import {
 import Badge from './Badge';
 import {
   countReducerAtom,
-  selectedProductIdAtom,
+  letselectedProductIdAtom,
   useAtom,
   useProductDetails,
 } from '../../../store';
@@ -33,7 +33,7 @@ function Product({ status, productId }: IProps) {
   const [, dispatch] = useAtom(countReducerAtom);
   const [multiProduct] = useProductDetails();
   const productdata = multiProduct?.find((item: any) => item.id === productId);
-  const [, setSelectedProductId] = useAtom(selectedProductIdAtom);
+  const [, setSelectedProductId] = useAtom(letselectedProductIdAtom);
   if (!productdata) {
     return null;
   }

package/src/components/order-view/return-client-products/ProductTable.tsx

@@ -11,7 +11,7 @@ const ProductTable = () => {
 };
 
 const Container = styled.div`
-  height: 230px; /* Set height to limit container size */
+  /* height: 230px;  */
   overflow: auto; /* Enable scrolling */
   scrollbar-width: thin;
 `;

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -1,32 +1,56 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import {
   StyledTable,
   StyledTableWrapper,
 } from '../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
-import { Checkbox } from '@bjsdistribution/dms-component-library';
-// import { data } from '../../../order-daily-overview/table/table-data/Fakedata';
+import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
 import ActionIcon from '../../../../assets/icons/ActionIcon';
 import { useSelectedOrders } from '../../../store';
-import { useProductDetails } from '../../store';
+import { useOrderId, useProductDetails } from '../../store';
+import { ApiResponse } from '../../types';
 
 const ReturnProductTable = () => {
   const [selectedInvoices] = useSelectedOrders();
-  const [selectAll] = useState(false);
-  const [productData] = useProductDetails();
+  const [selectAll, setSelectAll] = useState(false);
+  const [productData, setProductData] = useProductDetails();
+  const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
+  const [orderId] = useOrderId();
 
-  // const handleSelectAll = (e: any) => {
-  //   setSelectAll(e.target.checked);
-  //   if (e.target.checked) {
-  //     setSelectedInvoices(
-  //       productData.map((invoice: any) => ({
-  //         id: invoice.id,
-  //         status_id: 3,
-  //       }))
-  //     );
-  //   } else {
-  //     setSelectedInvoices([]);
-  //   }
-  // };
+  const handleActionClick = useCallback((id: number) => {
+    setSelectedRowId(id);
+  }, []);
+
+  const { data: isresponse, setShouldPerformAction: setaction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `order/order_products/delete/`,
+    method: 'DELETE',
+    body: [{ id: selectedRowId, order_id: orderId }],
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (isresponse && isresponse.data) {
+      handleRemoveRow();
+      setSelectedRowId(null);
+    }
+  }, [isresponse]);
+
+  const handleRemoveRow = useCallback(() => {
+    if (selectedRowId !== null) {
+      setProductData((prevData: any) =>
+        prevData.filter((item: any) => item.id !== selectedRowId)
+      );
+    }
+  }, [selectedRowId, setProductData]);
+
+  const onDeleteProducts = useCallback(() => {
+    setaction(true);
+  }, [setaction, selectedRowId]);
+
+  const handleSelectAll = useCallback(() => {
+    setSelectAll(prevSelectAll => !prevSelectAll);
+  }, []);
 
   return (
     <div>
@@ -35,69 +59,54 @@ const ReturnProductTable = () => {
           <thead>
             <tr>
               <th className="emailInvoiceCheckbox">
-                <Checkbox checked={selectAll} onChange={() => {}} />
+                <Checkbox checked={selectAll} onChange={handleSelectAll} />
               </th>
-              <th> Location</th>
+              <th>Location</th>
               <th>Sender</th>
               <th>Code</th>
-              <th> Description</th>
+              <th>Description</th>
               <th>Return Reason</th>
               <th>Part</th>
-              <th> Action</th>
+              <th>Action</th>
             </tr>
           </thead>
           <tbody>
-            {productData?.map((invoice: any) => (
-              <tr key={invoice.id}>
-                <td>
-                  <Checkbox
-                    checked={selectedInvoices?.some(
-                      (selectedInvoice: any) =>
-                        selectedInvoice?.id === invoice.id
-                    )}
-                  />
-                </td>
-
-                <td>{'N/A'}</td>
-
-                <td>
-                  {/* <ul style={{ listStyleType: 'none', padding: 0 }}> */}
-                  {/* <li> */}
-                  {'N/A'}
-                  {/* </li> */}
-                  {/* </ul> */}
-                </td>
-
-                <td>{invoice?.code}</td>
-                <td>{invoice?.description}</td>
-                <td>{'N/A'}</td>
-                <td>1 of 1</td>
-
-                {/* <td onClick={() => dispatch({ type: 'email-sent' })}>
-                    <IconContainers>
-                      <i>
-                        <ExportIcon />
-                      </i>
-                    </IconContainers>
+            {productData && productData.length > 0 ? (
+              productData.map((invoice: any) => (
+                <tr key={invoice.id}>
+                  <td>
+                    <Checkbox
+                      checked={selectedInvoices.some(
+                        selectedInvoice => selectedInvoice.id === invoice.id
+                      )}
+                    />
                   </td>
+                  <td>{'N/A'}</td>
+                  <td>{'N/A'}</td>
+                  <td>{invoice.code}</td>
+                  <td>{invoice.description}</td>
+                  <td>{'N/A'}</td>
+                  <td>1 of 1</td>
                   <td>
-                    <IconContainers>
-                      <i>
-                        <PdfIcon />
-                      </i>
-                      <i>
-                        <ArrivalIcon />
-                      </i>
-                      <i>
-                        <PdfIcon />
-                      </i>
-                    </IconContainers>
-                  </td> */}
-                <td>
-                  <ActionIcon />
+                    <div
+                      onClick={() => {
+                        handleActionClick(invoice.id);
+                        onDeleteProducts();
+                      }}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      <ActionIcon />
+                    </div>
+                  </td>
+                </tr>
+              ))
+            ) : (
+              <tr>
+                <td colSpan={8} style={{ textAlign: 'center' }}>
+                  No records found
                 </td>
               </tr>
-            ))}
+            )}
           </tbody>
         </StyledTable>
       </StyledTableWrapper>

package/src/components/order-view/return-client-products/product-table-footer/ProductDetailsFooter.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import styled from 'styled-components';
 import { Button } from '@bjsdistribution/dms-component-library';
 import NewReturnDropdown from '../../notes/order-dropdown/NewReturnDropdown';
-import { notification } from 'antd';
+// import { notification } from 'antd';
 
 function OrderDetailsFooter() {
   const onSave = () => {
     // alert('saved');
-    notification.success({
-      message: 'Success',
-      description: ' Saved successfully.',
-    });
+    // notification.success({
+    //   message: 'Success',
+    //   description: ' Saved successfully.',
+    // });
   };
 
   return (