@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.20-prod

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

@@ -3,111 +3,29 @@ import React from 'react';
 import styled from 'styled-components';
 import { useOrderDetails, useOrderStaticData } from '../../../store';
 import { capitalize } from '../../../utils';
+import { OrdersType } from '../../../types';
 
 function AssemblyType() {
   const [orderData, setOrderData] = useOrderDetails();
   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 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('_', ' ')),
-      value: option.id.toString(),
+      value: option.type,
     })
   );
 
   const radioGroupHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    let updatedAssemblyTypeService = {};
-
-    let updatedDisassemblyTypeService = {};
-
-    let updatedOrderServices: any = [];
-
-    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 };
+    const newData: OrdersType = {
+      ...orderData,
+      assembly_type: event.target.value,
+    };
     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)
-    ) {
+    if (orderData?.assemble === false && orderData?.disassemble === false) {
       return true;
     } else {
       return false;
@@ -117,7 +35,7 @@ function AssemblyType() {
   return (
     <Container $isDisable={isServiceDisable()}>
       <RadioButtonGroup
-        selectedValue={assemblyTypeId?.toString() || ''}
+        selectedValue={orderData?.assembly_type || ''}
         heading="Assembly Type"
         options={assemblyTypeOptions || []}
         onChange={radioGroupHandler}

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

@@ -4,16 +4,12 @@ import ServiceSlider from '../../../../../common/services-slider/ServiceSlider';
 import {
   useOrderDetails,
   useOrderStaticData,
-  usePrevOrderDetails,
 } from '../../../store';
-import { OrderServiceType } from '../../../types';
+import { OrdersType } 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;
 
@@ -30,190 +26,22 @@ function OrderServices() {
   });
 
   const toggleServices = (id: number) => {
-    const clone = [...orderServices];
-    const selectedService = clone?.find(
-      (s: OrderServiceType) => s?.order_service_list_id === id
+    const selectedService = orderServicesOptions?.find(
+      (item: any) => item.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) {
-      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(
-          (service: OrderServiceType) => service.id !== selectedService.id
-        );
-        const newData = {
-          ...orderDetails,
-          order_services: updatedOrderServices,
-        };
-        setOrderDetails(newData);
-      } else {
-        let updatedSelectedService = {
-          ...selectedService,
-          is_deleted: !selectedService.is_deleted,
-        };
-
-        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:
-            newUpdatedOrderServices.length > 0
-              ? newUpdatedOrderServices
-              : updatedOrderServices,
-        };
-        setOrderDetails(newData);
-      }
-    } else {
-      // service not exist case
-      // if not matched then treat it as an new service
-      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);
-    }
+    const key = selectedService?.type;
+    const value = !orderDetails[key as keyof OrdersType];
+    setOrderDetails(prev => ({
+      ...prev,
+      [key]: value,
+    }));
   };
   const isDisabled = true;
 
   return (
     <Container disabled={isDisabled}>
       {sortedServices?.map((service: any) => {
-        const selected = !!orderServices?.find(
-          (s: OrderServiceType) =>
-            s?.order_service_list_id === service?.id && s.is_deleted === false
-        );
+        const selected = orderDetails[service?.type as keyof OrdersType];
         return (
           <ServiceSlider
             serviceName={service?.type?.replaceAll('_', ' ')}

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

@@ -8,13 +8,12 @@ function ServiceLevel() {
   const [orderStaticData] = useOrderStaticData();
   const [orderData, setOrderData] = useOrderDetails();
 
-  const serviceLevelId =
-    orderData?.order_services_detail?.order_service_level_id;
+  const serviceLevelId = orderData?.order_services_detail?.order_service_level_id?.toString();
 
   const serviceLevelOptions = orderStaticData?.order_service_levels?.map(
     (option: any) => ({
       label: capitalize(option.type.replaceAll('_', ' ')),
-      value: option.id.toString(),
+      value: option?.id?.toString(),
     })
   );
 
@@ -32,7 +31,7 @@ function ServiceLevel() {
   return (
     <Container disabled={isDisabled}>
       <RadioButtonGroup
-        selectedValue={serviceLevelId?.toString() || ''}
+        selectedValue={serviceLevelId || ''}
         heading="Service Level"
         options={serviceLevelOptions || []}
         onChange={radioGroupHandler}

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

@@ -14,7 +14,7 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function OrderDetails() {
+function OrderDetails({ orderLoading, depotDataLoading }: any) {
   const [orderData] = useOrderDetails();
   const customerData = orderData;
   const id = customerData?.customer_id;
@@ -44,7 +44,10 @@ function OrderDetails() {
 
   return (
     <>
-      <ExpandedContent />
+      <ExpandedContent
+        orderLoading={orderLoading}
+        depotDataLoading={depotDataLoading}
+      />
     </>
   );
 }

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

@@ -6,7 +6,7 @@ import DynamicTable from '../../DynamicTable';
 import { useOrderProductsResources } from '../../store';
 import { tableColumns } from '../helper';
 
-function Order() {
+function Order({ loading }: any) {
   const [orderResources] = useOrderProductsResources();
 
   const data =
@@ -17,7 +17,7 @@ function Order() {
   return (
     <Table>
       <CollapsableForm collapsedContent={<CollapsedContent />}>
-        <DynamicTable columns={tableColumns} data={data} />
+        <DynamicTable columns={tableColumns} data={data} loading={loading} />
       </CollapsableForm>
     </Table>
   );

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

@@ -3,8 +3,9 @@ import styled from 'styled-components';
 import ProductTable from '../../return-client-products/ProductTable';
 import NewReturnDropdown, {
   payloadAtom,
+  selectedOrderId,
 } from '../../notes/order-dropdown/NewReturnDropdown';
-import { Button, useApiHook } from '@bjsdistribution/dms-component-library';
+import { Button, useAxios } from '@bjsdistribution/dms-component-library';
 import { useAtom } from 'jotai';
 import { ApiResponse } from '../../types';
 import { usePostLoading, useSelectedProducts } from '../../../store';
@@ -13,25 +14,32 @@ import { useNavigate } from 'react-router-dom';
 import { notification } from 'antd';
 import { useOrderId } from '../../store';
 
-function ExpandedContent() {
+interface IPROS {
+  callReturnProducts: any;
+  loading: boolean;
+  locationloading: boolean;
+}
+
+function ExpandedContent(props: IPROS) {
   const [payload] = useAtom(payloadAtom);
   const [, setPostLoading] = usePostLoading();
   const [orderId] = useOrderId();
   const [isButtonDisabled, setIsButtonDisabled] = useState(true);
   const navigate = useNavigate();
   const [, setSelectedProducts] = useSelectedProducts();
+  const [, setSelectedOrderId] = useAtom(selectedOrderId);
 
   const {
     data: response,
-    setShouldPerformAction,
+
     loading: confirmLoading,
-  } = useApiHook<{
+    fetchData: callMoveProducts,
+  } = useAxios<{
     data: ApiResponse[];
   }>({
     endpoint: `/v1/return/product/move/?return_order_id=${orderId}`,
     method: 'POST',
     body: payload,
-    performAction: false,
   });
 
   useEffect(() => {
@@ -46,12 +54,22 @@ function ExpandedContent() {
     }
   }, [payload]);
 
-  const handleConfirmReturn = () => {
-    if (!isButtonDisabled) {
-      setShouldPerformAction(true);
-      setPostLoading(confirmLoading);
-    } else {
+  const sleep = (ms: number) => new Promise(res => setTimeout(res, ms));
+
+  const handleConfirmReturn = async () => {
+    if (isButtonDisabled) {
       console.error('Payload is incomplete:', payload);
+      return;
+    }
+
+    setPostLoading(true);
+
+    const response = await callMoveProducts();
+    //@ts-ignore
+    if (response?.code === 200) {
+      await sleep(2000);
+      props?.callReturnProducts();
+      setSelectedOrderId(null);
     }
   };
 
@@ -90,7 +108,11 @@ function ExpandedContent() {
 
   return (
     <Container>
-      <ProductTable />
+      <ProductTable
+        callReturnProducts={props?.callReturnProducts}
+        loading={props?.loading}
+        locationloading={props?.locationloading}
+      />
       <MidContainer>
         <SaveNoteContainer>
           <Button

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

@@ -15,12 +15,12 @@ interface ApiResponse {
   setShouldPerformAction: boolean;
 }
 
-function ProductsInfo() {
+function ProductsInfo({ locationloading }: any) {
   const [data] = useOrderDetails();
   const returnOrder = data;
 
   // For API Call
-  const [, setAPidata] = useProductDetails();
+  const [, setProductsData] = useProductDetails();
   const [, setLoading] = useLoading();
   const {
     data: returnOrdersData,
@@ -43,17 +43,21 @@ function ProductsInfo() {
     setLoading(loading);
     if (returnOrdersData && returnOrdersData.data) {
       const requiredData = returnOrdersData.data;
-      if (requiredData.length > 0) {
-        setAPidata(requiredData);
+      if (requiredData?.length > 0) {
+        setProductsData(requiredData);
       } else {
-        setAPidata(null);
+        setProductsData([]);
       }
     }
   }, [returnOrdersData, loading]);
 
   return (
     <CollapsableForm collapsedContent={<CollapsedContent />}>
-      <ExpandedContent />
+      <ExpandedContent
+        callReturnProducts={callReturnProducts}
+        loading={loading}
+        locationloading={locationloading}
+      />
     </CollapsableForm>
   );
 }

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

@@ -2,10 +2,20 @@ import React from 'react';
 import ReturnProductTable from './product-table/ReturnProductTable';
 import styled from 'styled-components';
 
-const ProductTable = () => {
+interface IPROS {
+  callReturnProducts: any;
+  loading: boolean;
+  locationloading: boolean;
+}
+
+const ProductTable = (props: IPROS) => {
   return (
     <Container>
-      <ReturnProductTable />
+      <ReturnProductTable
+        callReturnProducts={props?.callReturnProducts}
+        loading={props?.loading}
+        locationloading={props?.locationloading}
+      />
     </Container>
   );
 };