@bjsdistribution/dms-client-return 0.0.11 → 0.0.13

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

@@ -9,16 +9,21 @@ function AssemblyType() {
   const [orderStaticData] = useOrderStaticData();
   const orderServices = orderData?.order_services;
   const cloneServices = [...orderServices];
-
   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 = cloneServices?.find(
     (x: any) => x?.order_service_list_id === assembleOrderService?.id
   );
-  const assemblyTypeId = assemblyTypeService?.service_category_id;
-
+  const disassemblyTypeService = cloneServices?.find(
+    (x: any) => x?.order_service_list_id === disassembleOrderService?.id
+  );
+  const assemblyTypeId =
+    assemblyTypeService?.service_category_id ||
+    disassemblyTypeService?.service_category_id;
   const assemblyTypeOptions = orderStaticData?.order_service_list_category?.map(
     (option: any) => ({
       label: capitalize(option.type.replaceAll('_', ' ')),
@@ -27,30 +32,98 @@ function AssemblyType() {
   );
 
   const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const updatedAssemblyTypeService = {
-      ...assemblyTypeService!,
-      service_category_id: +event.target.value,
-    };
+    let updatedAssemblyTypeService = {};
+
+    let updatedDisassemblyTypeService = {};
 
-    const updatedOrderServices = cloneServices?.filter(
-      s => s?.order_service_list_id !== assembleOrderService?.id
-    );
+    let updatedOrderServices: any = [];
 
-    updatedOrderServices.push(updatedAssemblyTypeService);
+    if (
+      (assemblyTypeService?.is_deleted === false &&
+        disassemblyTypeService?.is_deleted === true &&
+        disassemblyTypeService !== undefined &&
+        disassemblyTypeService !== null) ||
+      (disassemblyTypeService?.is_deleted === false &&
+        assemblyTypeService?.is_deleted === true &&
+        assemblyTypeService !== undefined &&
+        assemblyTypeService !== null) ||
+      (assemblyTypeService?.is_deleted === false &&
+        disassemblyTypeService?.is_deleted === false)
+    ) {
+      updatedAssemblyTypeService = {
+        ...assemblyTypeService!,
+        service_category_id: +event.target.value,
+      };
+      updatedDisassemblyTypeService = {
+        ...disassemblyTypeService!,
+        service_category_id: +event.target.value,
+      };
+      updatedOrderServices = cloneServices?.filter(
+        s =>
+          s?.order_service_list_id !== assembleOrderService?.id &&
+          s?.order_service_list_id !== disassembleOrderService?.id
+      );
+      updatedOrderServices.push(updatedAssemblyTypeService);
+      updatedOrderServices.push(updatedDisassemblyTypeService);
+    } else if (
+      assemblyTypeService?.is_deleted === false &&
+      (disassemblyTypeService?.is_deleted === true ||
+        disassemblyTypeService === undefined ||
+        disassemblyTypeService === null)
+    ) {
+      updatedAssemblyTypeService = {
+        ...assemblyTypeService!,
+        service_category_id: +event.target.value,
+      };
+      updatedOrderServices = cloneServices?.filter(
+        s => s?.order_service_list_id !== assembleOrderService?.id
+      );
+      updatedOrderServices.push(updatedAssemblyTypeService);
+    } else {
+      updatedDisassemblyTypeService = {
+        ...disassemblyTypeService!,
+        service_category_id: +event.target.value,
+      };
+      updatedOrderServices = cloneServices?.filter(
+        s => s?.order_service_list_id !== disassembleOrderService?.id
+      );
+
+      updatedOrderServices.push(updatedDisassemblyTypeService);
+    }
     const newData = { ...orderData, order_services: updatedOrderServices };
     setOrderData(newData);
   };
 
+  const isServiceDisable = () => {
+    if (
+      (assemblyTypeService?.is_deleted === true &&
+        (disassemblyTypeService?.is_deleted === true ||
+          disassemblyTypeService === undefined ||
+          disassemblyTypeService === null)) ||
+      (disassemblyTypeService?.is_deleted === true &&
+        (assemblyTypeService?.is_deleted === true ||
+          assemblyTypeService === undefined ||
+          assemblyTypeService === null)) ||
+      (assemblyTypeService === undefined &&
+        disassemblyTypeService === undefined) ||
+      (assemblyTypeService === null && disassemblyTypeService === null)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   return (
-    <Container
-      $isDisable={assemblyTypeService?.is_deleted === true ? true : false}
-    >
+    <Container $isDisable={isServiceDisable()}>
       <RadioButtonGroup
         selectedValue={assemblyTypeId?.toString() || ''}
         heading="Assembly Type"
         options={assemblyTypeOptions || []}
         onChange={radioGroupHandler}
         required={false}
+        //@ts-ignore
+        isDisabled={isServiceDisable()}
       />
     </Container>
   );

package/src/components/order-view/order-details/expanded-content/services-section/DeliveryPoint.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';
@@ -42,14 +38,6 @@ function DeliveryPointDropdown() {
         )}
         openMenuOnFocus
         onChange={onChange}
-        styles={{
-          ...dropdownStyles,
-          control: styles => ({
-            ...styles,
-            borderRadius: '25px',
-            cursor: 'pointer',
-          }),
-        }}
       />
     </Container>
   );

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>