@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

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

@@ -1,251 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import AllowTracking from './AllowTracking';
-import { Button, useAxios } from '@bjsdistribution/dms-component-library';
-import {
-  useAtom,
-  useOrderDetails,
-  usePrevOrderDetails,
-  errorAtom,
-  useCustomerInfo,
-  useGlobalStateHitAuditLog,
-  useGlobalStateHitOrder,
-  useLiveRecalling,
-  useOrderAlertsData,
-  useStatusDetails,
-} from '../../../store';
-// import useUpdateOrder from '../../../hooks/useUpdateOrder';
-import { compareOrderDetailsStates, filterObject } from '../../../utils';
-import { ApiResponse, OrdersType } 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 [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [, setRecallOrders] = useGlobalStateHitOrder();
-  const [isClientPortal] = useClientPortal();
-  const [, setRecalling] = useLiveRecalling();
-  const [, setOrderAlertsData] = useOrderAlertsData();
-  const [, setOrderStatus] = useStatusDetails();
-
-  // call alerts api
-  const { fetchData: callOrderAlertsApi } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `v1/orders/alerts/?order_id=${orderDetails?.id}`,
-    method: 'GET',
-  });
-
-  //Order status api
-  const { fetchData: callOrderStatusApi } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/orders/get_live_status/${orderDetails?.id}`,
-    method: 'GET',
-  });
-  //update order
-  const { fetchData: callUpdateOrderAPI } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/orders/update/`,
-    method: 'PUT',
-  });
-
-  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;
-
-    return isError;
-  };
-
-  const isDifferent = () => {
-    const keysToRemovefromOrders = [
-      'order_locked',
-      'order_communications',
-      'updated_at',
-      'updated_by',
-    ];
-    const filteredOrderDetails = filterObject(
-      orderDetails,
-      keysToRemovefromOrders
-    );
-    const filteredPrevOrderDetails = filterObject(
-      prevOrderDetails,
-      keysToRemovefromOrders
-    );
-
-    const orderDetailsSorted = JSON.stringify(filteredOrderDetails);
-    const prevOrderDetailsSorted = JSON.stringify(filteredPrevOrderDetails);
-    const isSame = orderDetailsSorted === prevOrderDetailsSorted;
-    return !isSame;
-  };
-  //Northern/Southern Ireland PATCH API
-  const { fetchData: callCustomDetailsAPI } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `v1/orders/update/customs_details?order_id=${orderDetails?.id}`,
-    method: 'PATCH',
-  });
-  const onSave = async () => {
-    if (orderDetails?.id) {
-      console.log('yooooooo11111');
-
-      const {
-        consignor_eori,
-        packaging_type,
-        consignee_country,
-        commodity_code,
-        country_of_origin,
-        item_invoice_amount,
-        procedure_code,
-        ni_additional_information_codes,
-        additional_procedure_code,
-        additional_procedures,
-      } = orderDetails?.order_customs_details ?? {};
-
-      let customDetailsPayload: Record<string, any> = {
-        order_id: orderDetails?.id,
-        consignor_eori,
-        packaging_type,
-        consignee_country,
-        commodity_code,
-        country_of_origin,
-        item_invoice_amount,
-        procedure_code,
-        ni_additional_information_codes,
-        additional_procedure_code,
-        additional_procedures,
-      };
-
-      // remove null/undefined values
-      customDetailsPayload = Object.fromEntries(
-        Object.entries(customDetailsPayload).filter(
-          ([_, value]) => value !== null && value !== undefined
-        )
-      );
-
-      // northern/southern details API
-      callCustomDetailsAPI({
-        payload: customDetailsPayload,
-      });
-    }
-    console.log('yoooooooooo');
-    setRecallAuditLog(false);
-    setRecallOrders(false);
-    setRecalling(false);
-    const payload = compareOrderDetailsStates(prevOrderDetails, orderDetails);
-
-    type ServiceKey =
-      | 'assemble'
-      | 'disassemble'
-      | 'unpack_items'
-      | 'collect_disposal'
-      | 'take_packaging_away'
-      | 'assembly_type';
-
-    const serviceKeys: ServiceKey[] = [
-      'assemble',
-      'disassemble',
-      'unpack_items',
-      'collect_disposal',
-      'take_packaging_away',
-      'assembly_type',
-    ];
-
-    for (const key of serviceKeys) {
-      if (key in payload) {
-        (payload as Record<ServiceKey, any>)[key] =
-          payload[key as keyof typeof payload];
-      } else if (key in orderDetails) {
-        (payload as Record<ServiceKey, any>)[key] =
-          orderDetails[key as keyof OrdersType];
-      }
-    }
-
-    if (payload?.assemble === false && payload?.disassemble === false) {
-      payload.assembly_type = null;
-    }
-
-    console.log('final payload for update--->', [payload]);
-    let response = (await callUpdateOrderAPI({
-      payload: [{ ...payload, id: orderDetails?.id }],
-    })) 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,
-        return_action: response?.data[0]?.return_action,
-
-      });
-      setRecallAuditLog(true);
-    } else {
-      setOrderDetails(prevOrderDetails);
-    }
-
-    const alertsApiRes = (await callOrderAlertsApi()) as {
-      code: number | null;
-      error?: string | null | undefined;
-      [key: string]: any;
-    };
-    if (alertsApiRes?.code === 200 && alertsApiRes?.data) {
-      setOrderAlertsData(alertsApiRes?.data);
-    }
-
-    const orderStatusApiRes = (await callOrderStatusApi()) as {
-      code: number | null;
-      error?: string | null | undefined;
-      [key: string]: any;
-    };
-    if (orderStatusApiRes?.code === 200 && orderStatusApiRes?.data) {
-      setOrderStatus(orderStatusApiRes?.data);
-    }
-  };
-  //here changes needed
-  return (
-    <Container>
-      <AllowTracking />
-      <Button
-        onClick={onSave}
-        disabled={isClientPortal ? true : !isDifferent() || errorFound()}
-      >
-        Save Details
-      </Button>
-    </Container>
-  );
-}
-
-const Container = styled.div`
-  display: flex;
-  justify-content: space-between;
-  padding: 10px 15px;
-  align-items: flex-start;
-  border-top: 1px solid #edebe8;
-  background: #f8fafc;
-  margin: 0px -15px -15px -15px;
-  border-radius: 0px 0px 8px 8px;
-`;
-
-export default OrderDetailsFooter;

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

@@ -1,122 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import CustomerSection from './customer-section';
-import OrdersSection from './orders-section';
-import InstructionSection from './instruction-section';
-import ServicesSection from './services-section';
-import OrderDetailsFooter from './footer';
-import { Skeleton } from 'antd';
-import { FormSection } from '@bjsdistribution/dms-component-library';
-import { useIsShowNorthSouth } from '../../../store';
-import { useOrderDetails } from '../../store';
-import NorthernSouthernInfoView from '../../northern-southern-info';
-
-function ExpandedContent({ orderLoading, depotDataLoading }: any) {
-  const [isNorthSouth] = useIsShowNorthSouth();
-  const [orderDetails] = useOrderDetails();
-
-  useEffect(() => {
-    console.log('north sourthsalhdjas', isNorthSouth);
-  }, [isNorthSouth]);
-  return (
-    <>
-      <MainContainer>
-        {orderLoading || depotDataLoading ? (
-          <>
-            <CustomFormSection>
-              <Skeleton paragraph={{ rows: 4 }} />
-              <Skeleton paragraph={{ rows: 4 }} />
-            </CustomFormSection>
-          </>
-        ) : (
-          <>
-            <Container>
-              <HalfWidth>
-                <CustomerSection />
-              </HalfWidth>
-              <HalfWidth>
-                <OrdersSection />
-              </HalfWidth>
-              <InstructionSection />
-              {(isNorthSouth === true ||
-                (orderDetails?.show_customs_details &&
-                  isNorthSouth !== false)) && <NorthernSouthernInfoView />}
-            </Container>
-
-            <ServicesSection />
-            <OrderDetailsFooter />
-          </>
-        )}
-      </MainContainer>
-    </>
-  );
-}
-
-const HalfWidth = styled.div`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-
-  @media (min-width: 769px) {
-    flex-direction: row; /* Change to row for large screens */
-    width: 50%;
-  }
-
-  @media (min-width: 1024px) {
-    width: auto;
-  }
-
-  @media (min-width: 1440px) {
-    width: 50%;
-  }
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: space-between;
-
-  @media (min-width: 769px) {
-    flex-direction: row;
-  }
-
-  @media (min-width: 1024px) {
-    justify-content: flex-start;
-  }
-`;
-
-// const InstructionContainer = styled.div`
-//   display: flex;
-//   justify-content: center;
-// `;
-
-// const Overlay = css`
-//   overflow: visible;
-//   pointer-events: none;
-//   background: none !important;
-//   -webkit-user-select: none;
-//   -moz-user-select: none;
-//   -ms-user-select: none;
-//   user-select: none;
-// `;
-
-const MainContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  /* padding-bottom: 30px; */
-  @media (max-width: 768px) {
-    gap: 10px;
-  }
-`;
-
-const CustomFormSection = styled(FormSection)`
-  flex: 1;
-  border-radius: 8px;
-  background: #f8fafc;
-  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
-`;
-
-export default ExpandedContent;

package/src/components/order-view/order-details/expanded-content/instruction-section/DeliveryInstructions.tsx

@@ -1,42 +0,0 @@
-import { Label, TextArea } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { useOrderDetails } from '../../../store';
-
-function DeliveryInstructions() {
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-
-  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        delivery_instructions: e.target.value,
-      };
-    });
-  };
-
-  return (
-    <Container>
-      <Label label="Delivery Instructions" />
-      <CustomTextArea
-        value={orderDetails?.delivery_instructions || ''}
-        placeholder="add delivery instructions"
-        onChange={onChange}
-      />
-    </Container>
-  );
-}
-
-const CustomTextArea = styled(TextArea)`
-  flex: 1;
-  resize: none;
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-export default DeliveryInstructions;

package/src/components/order-view/order-details/expanded-content/instruction-section/OrderStatusNote.tsx

@@ -1,42 +0,0 @@
-import { Label, TextArea } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { useOrderDetails } from '../../../store';
-
-function OrderStatusNote() {
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-
-  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        order_status_note: e.target.value,
-      };
-    });
-  };
-
-  return (
-    <Container>
-      <Label label="Order Status Note" />
-      <CustomTextArea
-        value={orderDetails?.order_status_note || ''}
-        placeholder='add order status note'
-        onChange={onChange}
-      />
-    </Container>
-  );
-}
-
-const CustomTextArea = styled(TextArea)`
-  flex: 1;
-  resize: none;
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-export default OrderStatusNote;

package/src/components/order-view/order-details/expanded-content/instruction-section/OtherInstructions.tsx

@@ -1,42 +0,0 @@
-import { Label, TextArea } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { useOrderDetails } from '../../../store';
-
-function OtherInstructions() {
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-
-  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setOrderDetails(prev => {
-      return {
-        ...prev,
-        other_instructions: e.target.value,
-      };
-    });
-  };
-
-  return (
-    <Container>
-      <Label label="Other Instructions (simple instructions)" />
-      <CustomTextArea
-        value={orderDetails?.other_instructions || ''}
-        placeholder="add other instructions"
-        onChange={onChange}
-      />
-    </Container>
-  );
-}
-
-const CustomTextArea = styled(TextArea)`
-  flex: 1;
-  resize: none;
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-export default OtherInstructions;

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

@@ -1,36 +0,0 @@
-import { FormSection } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import Header from '../../common/Header';
-import OrderStatusNote from './OrderStatusNote';
-import DeliveryInstructions from './DeliveryInstructions';
-import OtherInstructions from './OtherInstructions';
-
-function InstructionSection() {
-  return (
-    <CustomFormSection>
-      <Header label="Instructions / Notes" />
-      <FormInputs>
-        <OrderStatusNote />
-        <DeliveryInstructions />
-        <OtherInstructions />
-      </FormInputs>
-    </CustomFormSection>
-  );
-}
-const FormInputs = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 7px;
-  flex: 1;
-`;
-
-const CustomFormSection = styled(FormSection)`
-  flex: 1;
-  border-radius: 8px;
-  background: #f8fafc;
-  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
-  padding: 24px !important;
-`;
-
-export default InstructionSection;

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

@@ -1,93 +0,0 @@
-import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import {
-  usegetClientData,
-  useOrderDetails,
-  useStatusDetails,
-} from '../../../store';
-import { useClientPortal, useSubContracterData } from '../../../../store';
-
-function Carrier() {
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-  const [subContracterData] = useSubContracterData();
-  const [orderStatus] = useStatusDetails();
-  const [isClientPortal] = useClientPortal();
-  const [clientData] = usegetClientData();
-
-  const localClientData = JSON.parse(
-    localStorage?.getItem('Client_iD') || '{}'
-  );
-  const clientId = Number(localClientData?.client_id);
-
-  // Build options from subContracterData
-  const carrierOptions =
-    subContracterData?.map((carrier: any) => ({
-      label: carrier?.name,
-      value: carrier?.id,
-    })) || [];
-
-  // find the value which is selected
-  const selectedCarrierOption = carrierOptions?.find(
-    (option: any) => option?.value === orderDetails?.carrier_id
-  );
-
-  // get client name when no carrierid found
-  const fallbackClientName = clientData?.find(
-    (client: any) => Number(client?.client_id) === clientId
-  )?.name;
-
-  // fall if no carrierid
-  const fallbackOption = fallbackClientName
-    ? { label: fallbackClientName, value: '' }
-    : null;
-
-  const onChange = (selectedOption: any) => {
-    setOrderDetails(prev => ({
-      ...prev,
-      carrier_id: selectedOption?.value,
-    }));
-  };
-
-  const order = orderStatus?.[0] || {};
-
-  const otherStatuses = [
-    order?.released,
-    order?.received === true || order?.received === 'True',
-    order?.scheduled,
-    order?.confirmed,
-    order?.delivered,
-    order?.completed,
-  ].filter(val => val !== undefined);
-
-  const allOthersTrue =
-    otherStatuses.length > 0 && otherStatuses.every(s => s === true);
-
-  const isDisabled = isClientPortal
-    ? true
-    : allOthersTrue && order?.routed === true;
-
-  return (
-    <FormContainer>
-      <Label label="Carrier" htmlFor="CarrierDropdown" />
-      <SelectDropdown
-        placeholder="Select Carrier"
-        inputId="CarrierDropdown"
-        openMenuOnFocus={false}
-        value={selectedCarrierOption || fallbackOption || null}
-        options={carrierOptions}
-        onChange={onChange}
-        isDisabled={isDisabled}
-      />
-    </FormContainer>
-  );
-}
-
-const FormContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-export default Carrier;

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

@@ -1,44 +0,0 @@
-import {
-  Label,
-  displayValueOrNA,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import CopyText from '../../../../../common/copy/CopyText';
-import { useOrderDetails } from '../../../store';
-
-function ConsignmentNumber() {
-  const [orderDetails] = useOrderDetails();
-  return (
-    <Container>
-      <Wrapper>
-        <Label label="Consignment Number" />
-        <CopyText text={displayValueOrNA(orderDetails.consignment)} />
-      </Wrapper>
-      <Consignment>{displayValueOrNA(orderDetails.consignment)}</Consignment>
-    </Container>
-  );
-}
-
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-`;
-
-const Consignment = styled.span`
-  color: #249e45;
-  font-family: 'Lato', sans-serif;
-  font-size: 13px;
-  font-style: normal;
-  font-weight: 400;
-`;
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  flex: 1;
-`;
-
-export default ConsignmentNumber;