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

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

@@ -8,24 +8,26 @@ import {
   usePrevOrderDetails,
   errorAtom,
   useCustomerInfo,
-  useUpdateApiCall,
-  useLiveRecalling,
   useGlobalStateHitAuditLog,
+  useOrderStaticData,
   useGlobalStateHitOrder,
 } from '../../../store';
+// import useUpdateOrder from '../../../hooks/useUpdateOrder';
 import { compareOrderDetailsStates, filterObject } from '../../../utils';
 import { ApiResponse, OrderServiceType } from '../../../types';
 import { notification } from 'antd';
+import { useClientPortal } from '../../../../store';
 
 function OrderDetailsFooter() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
   const [, setCustomerInfo] = useCustomerInfo();
+  // const updateOrder = useUpdateOrder();
   const [errorState] = useAtom(errorAtom);
-  const [, setCallApi] = useUpdateApiCall(); //single detail
-  const [, setRecalling] = useLiveRecalling();
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
+  const [orderStaticData] = useOrderStaticData();
   const [, setRecallOrders] = useGlobalStateHitOrder();
+  const [isClientPortal] = useClientPortal();
 
   //update order
   const { fetchData: callUpdateOrderAPI } = useAxios<{
@@ -37,12 +39,12 @@ function OrderDetailsFooter() {
 
   const errorFound = () => {
     const isError =
-      errorState?.w3wError.length > 0 ||
-      errorState?.emailError.length > 0 ||
-      errorState?.homeContactError.length > 0 ||
-      errorState?.workCOntanctError.length > 0 ||
-      errorState?.mobileError.length > 0 ||
-      errorState?.postCodeError.length > 0;
+      errorState.w3wError.length > 0 ||
+      errorState.emailError.length > 0 ||
+      errorState.homeContactError.length > 0 ||
+      errorState.workCOntanctError.length > 0 ||
+      errorState.mobileError.length > 0 ||
+      errorState.postCodeError.length > 0;
 
     return isError;
   };
@@ -66,13 +68,13 @@ function OrderDetailsFooter() {
 
     const newOrderServices =
       orderDetails?.order_services?.length > 0 &&
-      orderDetails.order_services.sort(
+      orderDetails?.order_services?.sort(
         (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
       );
 
     const prevOrderServices =
       prevOrderDetails?.order_services?.length > 0 &&
-      prevOrderDetails.order_services.sort(
+      prevOrderDetails?.order_services.sort(
         (a: OrderServiceType, b: OrderServiceType) => a.id! - b.id!
       );
 
@@ -90,42 +92,81 @@ function OrderDetailsFooter() {
     setRecallAuditLog(false);
     setRecallOrders(false);
     const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
-    let response = (await callUpdateOrderAPI({
-      payload: [payload],
-    })) as {
-      code: number | null;
-      error?: string | null | undefined;
-      [key: string]: any;
-    };
-    setCallApi(false);
-    setRecallOrders(true);
-    // setLogsCallAPi(prev => !prev);
-    if (response && response?.data?.length > 0) {
-      notification.success({
-        message: 'Success',
-        description: `${response?.message}`,
+    const clone = [...orderDetails?.order_services];
+
+    // ASSEMBLE AND DISASSEMBLE SERVICES CHECK FOR ASSEMBLE TYPE
+    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 (
+      assemblyTypeService !== undefined &&
+      assemblyTypeService?.is_deleted === false &&
+      (assemblyTypeService?.service_category_id === undefined ||
+        assemblyTypeService?.service_category_id === null)
+    ) {
+      notification.info({
+        message: 'Info',
+        description: 'Assembly Type is required',
       });
-      setOrderDetails(response?.data[0]);
-      setPrevOrderDetails(response?.data[0]);
-      setCustomerInfo({
-        recipient_name: response?.data[0]?.order_recipient?.recipient_name,
-        postcode: response?.data[0]?.order_recipient?.postcode,
+      return;
+    } else if (
+      disassemblyTypeService !== undefined &&
+      disassemblyTypeService?.is_deleted === false &&
+      (disassemblyTypeService?.service_category_id === undefined ||
+        disassemblyTypeService?.service_category_id === null)
+    ) {
+      notification.info({
+        message: 'Info',
+        description: 'Assembly Type is required',
       });
-      setRecalling(true);
-      setTimeout(() => {
-        setRecalling(false);
-        setRecallAuditLog(false);
-      }, 1000);
-      setCallApi(true);
+      return;
     } else {
-      setOrderDetails(prevOrderDetails);
+      let response = (await callUpdateOrderAPI({
+        payload: [payload],
+      })) as {
+        code: number | null;
+        error?: string | null | undefined;
+        [key: string]: any;
+      };
+      // const response = await updateOrder([payload]);
+      setRecallOrders(true);
+      if (response.code == 200 && response?.data?.length > 0) {
+        notification.success({
+          message: 'Success',
+          description: `${response?.message}`,
+        });
+        setOrderDetails(response?.data[0]);
+        setPrevOrderDetails(response?.data[0]);
+        setCustomerInfo({
+          recipient_name: response?.data[0]?.order_recipient?.recipient_name,
+          postcode: response?.data[0]?.order_recipient?.postcode,
+        });
+        setRecallAuditLog(true);
+      } else {
+        setOrderDetails(prevOrderDetails);
+      }
     }
   };
 
   return (
     <Container>
       <AllowTracking />
-      <Button onClick={onSave} disabled={!isDifferent() || errorFound()}>
+      <Button
+        onClick={onSave}
+        disabled={isClientPortal ? true : !isDifferent() || errorFound()}
+      >
         Save Details
       </Button>
     </Container>

package/src/components/order-view/order-details/expanded-content/orders-section/Carrier.tsx

@@ -1,12 +1,13 @@
 import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import { useOrderDetails } from '../../../store';
+import { useOrderDetails, useStatusDetails } from '../../../store';
 import { useSubContracterData } from '../../../../store';
 
 function Carrier() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [subContracterData] = useSubContracterData();
+  const [orderStatus] = useStatusDetails();
 
   const carrierOptions = subContracterData?.map((carrier: any) => ({
     label: carrier.name,
@@ -16,15 +17,13 @@ function Carrier() {
   const onChange = (selectedOption: any) => {
     setOrderDetails(prev => ({
       ...prev,
-      carrier_id: selectedOption?.value,
+      carrier_id: selectedOption.value,
     }));
   };
 
   return (
-    <Container>
-      <Wrapper>
-        <Label label="Carrier" htmlFor="carrier" />
-      </Wrapper>
+    <FormContainer>
+      <Label label="Carrier" htmlFor="CarrierDropdown" />
       <SelectDropdown
         placeholder="Select Carrier"
         inputId="CarrierDropdown"
@@ -36,18 +35,15 @@ function Carrier() {
         }
         options={carrierOptions}
         onChange={onChange}
+        isDisabled={
+          orderStatus?.length > 0 && orderStatus[0]?.confirmed === true
+        }
       />
-    </Container>
+    </FormContainer>
   );
 }
 
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`;
-
-const Container = styled.div`
+const FormContainer = styled.div`
   display: flex;
   flex-direction: column;
   gap: 6px;

package/src/components/order-view/order-details/expanded-content/orders-section/DeliveryDate.tsx

@@ -8,12 +8,15 @@ import {
   useStatusDetails,
 } from '../../../store';
 import dayjs from 'dayjs';
+import { useClientPortal } from '../../../../store';
 
 function DeliveryDate() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails] = usePrevOrderDetails();
   const [orderStatus] = useStatusDetails();
+  const [isClientPortal] = useClientPortal();
   const routedStatus = orderStatus?.[0]?.routed;
+  const isOrderOnHold = orderDetails?.status === 'OO';
 
   const actionDate = orderDetails?.action_date
     ? new Date(orderDetails?.action_date)
@@ -61,7 +64,13 @@ function DeliveryDate() {
         format="DD/MM/YY"
         disabledDate={current => current && current < dayjs().startOf('day')}
         allowClear={false}
-        disabled={routedStatus}
+        disabled={
+          isClientPortal
+            ? true
+            : routedStatus ||
+              orderStatus[0]?.confirmed === true ||
+              isOrderOnHold
+        }
       />
     </MainContainer>
   );

package/src/components/order-view/order-details/expanded-content/orders-section/ScheduleAfter.tsx

@@ -9,8 +9,9 @@ function ScheduleAfter() {
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails] = usePrevOrderDetails();
   const scheduleDate = orderDetails?.schedule_after
-    ? new Date(orderDetails.schedule_after)
+    ? new Date(orderDetails?.schedule_after)
     : null;
+
   const onChange: DatePickerProps['onChange'] = (date, _dateString) => {
     const selectedDate = date?.format('YYYY-MM-DDTHH:mm:ss');
     if (

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

@@ -8,9 +8,10 @@ import { Button, useApiHook } from '@bjsdistribution/dms-component-library';
 import { useAtom } from 'jotai';
 import { ApiResponse } from '../../types';
 import { usePostLoading, useSelectedProducts } from '../../../store';
-import { useOrderId } from '../../store';
+// import { useOrderId } from '../../store';
 import { useNavigate } from 'react-router-dom';
 import { notification } from 'antd';
+import { useOrderId } from '../../store';
 
 function ExpandedContent() {
   const [payload] = useAtom(payloadAtom);
@@ -27,7 +28,7 @@ function ExpandedContent() {
   } = useApiHook<{
     data: ApiResponse[];
   }>({
-    endpoint: `return_order_products/move/${orderId}`,
+    endpoint: `/v1/return/product/move/?return_order_id=${orderId}`,
     method: 'POST',
     body: payload,
     performAction: false,

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

@@ -4,7 +4,7 @@ import CollapsedContent from './collapsed-content';
 import CollapsableForm from '../../../common/expand-collapse';
 import { useOrderDetails, useProductDetails } from '../store';
 import { useLoading } from '../../order-daily-overview/store/store';
-import { useApiHook } from '@bjsdistribution/dms-component-library';
+import { useAxios } from '@bjsdistribution/dms-component-library';
 
 interface ApiResponse {
   message: string;
@@ -17,36 +17,39 @@ interface ApiResponse {
 
 function ProductsInfo() {
   const [data] = useOrderDetails();
-  const customerData = data;
+  const returnOrder = data;
 
   // For API Call
   const [, setAPidata] = useProductDetails();
   const [, setLoading] = useLoading();
-  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+  const {
+    data: returnOrdersData,
+    loading,
+    fetchData: callReturnProducts,
+  } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `return_order_products/${customerData.id}`,
+    endpoint: `/v1/return/products/${returnOrder?.id}`,
     method: 'GET',
-    performAction: false,
   });
 
   useEffect(() => {
-    if (customerData.id) {
-      setShouldPerformAction(true);
+    if (returnOrder?.id) {
+      callReturnProducts();
     }
-  }, [customerData.id]);
+  }, [returnOrder.id]);
 
   useEffect(() => {
     setLoading(loading);
-    if (fetchedData && fetchedData.data) {
-      const requiredData = fetchedData.data;
+    if (returnOrdersData && returnOrdersData.data) {
+      const requiredData = returnOrdersData.data;
       if (requiredData.length > 0) {
         setAPidata(requiredData);
       } else {
         setAPidata(null);
       }
     }
-  }, [fetchedData, loading]);
+  }, [returnOrdersData, loading]);
 
   return (
     <CollapsableForm collapsedContent={<CollapsedContent />}>

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

@@ -3,14 +3,18 @@ import {
   StyledTable,
   StyledTableWrapper,
 } from '../../../order-daily-overview/return-order-table/return-orders-filters/returnstyles';
-import { Checkbox, useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  Checkbox,
+  displayValueOrNA,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
 import ActionIcon from '../../../../assets/icons/ActionIcon';
-// import { useSelectedOrders } from '../../../store';
-import { useOrderId, useOrderStaticData, useProductDetails } from '../../store';
+import { useOrderId, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
 import { notification } from 'antd';
 import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
 
 const ReturnProductTable = () => {
   const [selectedProducts, setSelectedProducts] = useSelectedProducts();
@@ -74,22 +78,6 @@ const ReturnProductTable = () => {
     );
   };
 
-  const [orderStaticData] = useOrderStaticData();
-
-  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
-    (option: any) => ({
-      label: option.reason,
-      value: option.id,
-    })
-  );
-
-  const getReturnReasonLabel = (returnReasonId: number) => {
-    const matchedReason = returnReasonsOptions?.find(
-      (option: any) => option.value === returnReasonId
-    );
-    return matchedReason ? matchedReason.label : 'N/A';
-  };
-
   const disableCheckbox =
     productData?.length == 0 || returnOrderData?.length == 0;
 
@@ -126,15 +114,29 @@ const ReturnProductTable = () => {
                       disabled={disableCheckbox}
                     />
                   </td>
-                  <td>{product?.orders_products_stock?.location || 'N/A'}</td>
+                  <td>{product?.location || 'N/A'}</td>
                   <td>
-                    {product?.order_data?.order_recipient?.recipient_name}{' '}
-                    {product?.order_data?.order_recipient?.postcode}
+                    <ul style={{ listStyleType: 'none', padding: 0 }}>
+                      <li
+                        style={{
+                          color: '#0099ff',
+                          fontWeight: 600,
+                          paddingLeft: 0,
+                        }}
+                      >
+                        <NavLink to={`/orders/view/${product?.order_id}`}>
+                          {displayValueOrNA(product?.recipient_name)}
+                        </NavLink>
+                      </li>
+                      <li style={{ color: '#888075' }}>
+                        {displayValueOrNA(product?.postcode)}
+                      </li>
+                    </ul>
                   </td>
                   <td>{product?.code}</td>
                   <td>{product?.description}</td>
-                  <td>{getReturnReasonLabel(product?.return_reason_id)}</td>
-                  <td>1 of 1</td>
+                  <td>{product?.return_reason}</td>
+                  <td>{product?.part}</td>
                   <td>
                     <div
                       onClick={() => {

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

@@ -1,6 +1,7 @@
 import { atom, useAtom } from 'jotai';
 import { atomWithReducer } from 'jotai/utils';
 import {
+  CancelOrderProductsType,
   CreateProduct,
   OrderActionsType,
   OrdersType,
@@ -185,6 +186,60 @@ export const useBulkUpdateSelectedRow = () => {
   return useAtom(bulkUpdateSelectedRow);
 };
 
+export const initialConfirmOrderErrValues = {
+  homeContactError: '',
+  workContactError: '',
+  mobileError: '',
+  emailError: '',
+};
+
+const errorConfirmOrderAtom = atom(initialConfirmOrderErrValues);
+
+function useErrorConfirmOrder() {
+  return useAtom(errorConfirmOrderAtom);
+}
+
+const OrderDetailsConfirmOrder = atom<OrdersType>(ordersInitialValue);
+function useOrderDetailsConfirmOrder() {
+  return useAtom(OrderDetailsConfirmOrder);
+}
+
+const selectedAction = atom<string>('');
+
+export function useSelectionAction() {
+  return useAtom(selectedAction);
+}
+
+// REFUSED SERVICES STATE STARTS
+
+const confirmedDate = atom<{
+  previousDate: string | null;
+  currentDate: string | null;
+}>({
+  previousDate: null,
+  currentDate: null,
+});
+
+export function useNotificationConfirmedDate() {
+  return useAtom(confirmedDate);
+}
+
+const cancelOrderProducts = atom<CancelOrderProductsType[]>([]);
+export function useCancelOrderProducts() {
+  return useAtom(cancelOrderProducts);
+}
+
+// changes customer Account state
+const customerData = atom<any[]>([]);
+export const useCustomerData = () => {
+  return useAtom(customerData);
+};
+
+const orderAlertsData = atom<any>({});
+export function useOrderAlertsData() {
+  return useAtom(orderAlertsData);
+}
+
 export {
   useTabType,
   useInfoType,
@@ -193,7 +248,10 @@ export {
   useIsOnHoldOrder,
   useOrderStaticData,
   useEscalationIDs,
+  useErrorConfirmOrder,
+  useOrderDetailsConfirmOrder,
 };
+
 // Remainder count
 const OrderDetails = atom<OrdersType>(ordersInitialValue);
 function useOrderDetails() {
@@ -418,7 +476,7 @@ export function useCUstomerId() {
   return useAtom(CUstomerId);
 }
 
-const RouteId = atom<number | undefined>(undefined);
+const RouteId = atom<any | null>(null);
 
 export function useRouteId() {
   return useAtom(RouteId);
@@ -483,7 +541,6 @@ export function useGlobalStateHitOrder() {
   return useAtom(globalOrderGetApi);
 }
 
-
 // Popup state Manage
 const initialState = null;
 

package/src/components/order-view/system-event-logs/columns/Date.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
-import { formatDate } from '../../order-actions/utils';
+import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
 
 function Date(props: any) {
   const data = props?.row?.original.created_at;
   return (
     <RowContainer>
-      <Row>{formatDate(data)}</Row>
+      <Row>{`${formatUtcToLocal(data).date} ${
+        formatUtcToLocal(data).time
+      }`}</Row>
     </RowContainer>
   );
 }

package/src/components/order-view/system-event-logs/columns/Event.tsx

@@ -1,20 +1,20 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useEventNotesData } from '../../store';
+// import { useEventNotesData } from '../../store';
 
 function Event(props: any) {
-  const data = props?.row?.original.event_information_id;
-  const [notesData] = useEventNotesData();
+  const data = props?.row?.original?.event_description;
+  // const [notesData] = useEventNotesData();
 
-  const getDescription = (eventId: number | undefined) => {
-    if (eventId === undefined || notesData?.length === 0) return '';
+  // const getDescription = (eventId: number | undefined) => {
+  //   if (eventId === undefined || notesData?.length === 0) return '';
 
-    const eventData = notesData?.find((note: any) => note?.id === eventId);
-    return eventData ? eventData?.description : 'N/A';
-  };
+  //   const eventData = notesData?.find((note: any) => note?.id === eventId);
+  //   return eventData ? eventData?.description : 'N/A';
+  // };
   return (
     <RowContainer>
-      <Row>{getDescription(data)}</Row>
+      <Row>{data}</Row>
     </RowContainer>
   );
 }

package/src/components/order-view/system-event-logs/columns/Note.tsx

@@ -6,7 +6,7 @@ function Note(props: any) {
 
   return (
     <RowContainer title={data}>
-      <Row>{data}</Row>
+      <Row dangerouslySetInnerHTML={{ __html: data || '' }} />
     </RowContainer>
   );
 }

package/src/components/order-view/system-event-logs/expanded-content/index.tsx

@@ -1,39 +1,39 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import CollapsedContent from '../collapsed-content';
 import styled from 'styled-components';
 import CollapsableForm from '../../../../common/expand-collapse';
 import DynamicTable from '../../DynamicTable';
-import { useEventNotesData, useOrderProductSystemLogs } from '../../store';
+import { useOrderProductSystemLogs } from '../../store';
 import { tableColumns } from '../helper';
-import { useAxios } from '@bjsdistribution/dms-component-library';
-import { ApiResponse } from '../../types';
+// import { useAxios } from '@bjsdistribution/dms-component-library';
+// import { ApiResponse } from '../../types';
 
 function SystemLogs() {
   const [systemLogs] = useOrderProductSystemLogs();
-  const [, setNotesData] = useEventNotesData();
+  // const [, setNotesData] = useEventNotesData();
 
-  //event API
-  const {
-    data: systemLogsData,
-    fetchData: callSystemLogAPI,
-    loading,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/events/get/event_information/`,
-    method: 'GET',
-    pagination: { is_pagination: false },
-  });
+  // event API
+  // const {
+  //   data: systemLogsData,
+  //   fetchData: callSystemLogAPI,
+  //   loading,
+  // } = useAxios<{
+  //   data: ApiResponse[];
+  // }>({
+  //   endpoint: `/events/get/event/`,
+  //   method: 'GET',
+  //   pagination: { is_pagination: false },
+  // });
 
-  useEffect(() => {
-    callSystemLogAPI();
-  }, []);
+  // useEffect(() => {
+  //   callSystemLogAPI();
+  // }, []);
 
-  useEffect(() => {
-    if (systemLogsData && systemLogsData?.data) {
-      setNotesData(systemLogsData?.data);
-    }
-  }, [loading]);
+  // useEffect(() => {
+  //   if (systemLogsData && systemLogsData?.data) {
+  //     setNotesData(systemLogsData?.data);
+  //   }
+  // }, [loading]);
 
   return (
     <Table>

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

@@ -256,3 +256,16 @@ export type CustomersType = {
   exceptional_days: any[];
   customer_users: any[];
 };
+
+export interface CancelOrderProductsType {
+  order_product_id?: number;
+  action?: string; // deliver/ return/ deallocate
+  return_action?: string;
+  return_reason?: string;
+  // redundant fields
+  code?: string;
+  description?: string;
+  sku?: string;
+  product_type?: string;
+  previous_product_type?: string;
+}