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

package/src/components/order-view/order-actions/actions/force-debrief/ForceDebriefModal.tsx

@@ -1,652 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
-import {
-  useActiveTab,
-  useChargesState,
-  useCurrentAction,
-  useCustomerDetails,
-  useCustomerInfo,
-  useEscalationCategory,
-  useEscalationLevel,
-  useEscalationReason,
-  useFailureReason,
-  useGlobalEscData,
-  useGlobalStateHitAuditLog,
-  useGlobalStateHitOrder,
-  useNewStatus,
-  useOrderCancelReason,
-  useOrderCustomersList,
-  useOrderDetails,
-  useOrderHoldReason,
-  usePrevOrderDetails,
-  useProductDetails,
-} from '../../../store';
-import OrderCharges from './charges/order-charges';
-import CollectionAddOns from './charges/collection-add-ons';
-import DisposalCharge from './charges/disposal-charges';
-import styled from 'styled-components';
-import BaseCharges from './charges/base-charge';
-import DeliveryAddOns from './charges/delivery-add-ons';
-import AdhocSection from './charges/adhoc';
-import OrderInfo from './order-info';
-import ForceDebriefSelector from './Selector';
-import {
-  Checkbox,
-  Label,
-  useApiHook,
-  useAxios,
-} from '@bjsdistribution/dms-component-library';
-import Escalation from './escalation';
-import FDNotification from './notifications';
-
-import { compareOrderDetailsStates, filterObject } from '../../../utils';
-import { AdhocCharge, ApiResponse, OrdersType } from '../../../types';
-import { notification } from 'antd';
-import BaseChargeConfirmationModal from './BaseChargeConfirmationModal';
-import { v4 as uuidv4 } from 'uuid';
-
-interface IProps {
-  callOrdersApi: any;
-  callOrderStatusApi: any;
-  callOrderAlertsApi: any;
-}
-
-function ForceDebriefModal(props: IProps) {
-  const [customerInfo, setCustomerInfo] = useCustomerInfo();
-  const [allCustomers, setAllCustomers] = useOrderCustomersList();
-  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
-  const [, setCurrentAction] = useCurrentAction();
-
-  const [activeTab, setActiveTab] = useActiveTab();
-  const handleSwitchChange = (newValue: any) => setActiveTab(newValue);
-  const [chargesState, setCharges] = useChargesState();
-  const [inputValue, setInputValue] = useState<Record<string, string>>({}); // only for UI purpose
-  const [staticData, setDebriefStaticData] = useState([]);
-  const [orderDetails, setOrderDetails] = useOrderDetails();
-  const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
-  const [isEscalationEnabled, setIsEscalationEnabled] = useState<boolean>(true);
-  const [newStatus, setNewStatus] = useNewStatus();
-  const [cancellationReason, setCancellationReason] = useOrderCancelReason();
-  const [orderHold, setOrderHold] = useOrderHoldReason();
-  const [failureReason, setFailureReason] = useFailureReason();
-  const [escalationCategory, setEscalationCategory] = useEscalationCategory();
-  const [escalationLevel, setEscalationLevel] = useEscalationLevel();
-  const [escalationReason, setEscalationReason] = useEscalationReason();
-  const [, setRecallOrders] = useGlobalStateHitOrder();
-  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [, setGlobalEscData] = useGlobalEscData();
-
-  const [showAmountConfirmModal, setShowAmountConfirmModal] = useState<boolean>(
-    false
-  );
-
-  const [productdata] = useProductDetails();
-  const sortedProductData = productdata?.sort((a: any, b: any) => {
-    return a?.status === b?.status ? 0 : a?.status ? -1 : 1;
-  });
-
-  const isDeleted = Array.isArray(sortedProductData)
-    ? sortedProductData?.filter(item => item?.status === true)
-    : [];
-
-  //customers API
-  const [orderData] = useOrderDetails();
-  const customersData = orderData;
-  const id = customersData?.customer_id;
-
-  //Customers list API call
-  const {
-    data: fetchCustomerData,
-    loading: customerLoading,
-    fetchData,
-  } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/v1/customer/list`,
-    method: 'GET',
-    pagination: { is_pagination: false },
-    filters: [{ field: 'status', op: '=', value: '1' }],
-  });
-
-  useEffect(() => {
-    if (fetchCustomerData && fetchCustomerData?.data) {
-      const res = fetchCustomerData?.data;
-      setAllCustomers(res);
-    }
-  }, [fetchCustomerData, customerLoading]);
-
-  useEffect(() => {
-    fetchData();
-  }, []);
-
-  // For API Call
-  const [customerData, setCustomerData] = useCustomerDetails();
-  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `customers/${id}`,
-    method: 'GET',
-    performAction: false,
-  });
-
-  useEffect(() => {
-    if (id) {
-      setShouldPerformAction(true);
-    }
-  }, [id]);
-
-  useEffect(() => {
-    if (fetchedData && fetchedData?.data) {
-      const requiredData = fetchedData?.data;
-      setCustomerData(requiredData);
-    }
-  }, [fetchedData, loading]);
-  const selectedCustomer = allCustomers?.find(
-    (customer: any) => customer?.id === customerData?.id
-  );
-
-  const adhocChargesFields: AdhocCharge[] = Array.from({ length: 9 }, () => ({
-    id: uuidv4(),
-    adhoc_charges_description: '',
-    adhoc_charges: 0,
-  }));
-
-  const {
-    fetchData: fetchAllDebriefStaticData,
-    data: debriefStaticData,
-    loading: debriefLoading,
-  } = useAxios<{
-    data: any;
-  }>({
-    endpoint: `/finance/debrief/getData/all/`,
-    method: 'GET',
-  });
-
-  useEffect(() => {
-    setCharges(prev => ({
-      ...prev,
-      adhoc_charges: adhocChargesFields,
-    }));
-
-    // call debrief static api for getting base charges type
-    fetchAllDebriefStaticData();
-  }, []);
-
-  useEffect(() => {
-    if (debriefStaticData?.data) {
-      setDebriefStaticData(debriefStaticData?.data[0]);
-    }
-  }, [debriefLoading]);
-
-  const { fetchData: callUpdateOrderAPI } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/orders/update/`,
-    method: 'PUT',
-  });
-
-  const { fetchData: callForceDebriefApi } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/invoices/force-debrief/`,
-    method: 'POST',
-  });
-
-  const { fetchData: createEscalation } = useAxios<{
-    data: any;
-  }>({
-    endpoint: `/orders/escalations/create/`,
-    method: 'POST',
-  });
-
-  const initialValues = () => {
-    setOrderDetails(prevOrderDetails);
-    setNewStatus('');
-    setCancellationReason('');
-    setOrderHold('');
-    setFailureReason('');
-    setEscalationCategory('');
-    setEscalationLevel('');
-    setEscalationReason('');
-    setActiveTab('success');
-  };
-
-  const closeModal = () => {
-    initialValues();
-    setCurrentAction(undefined);
-  };
-
-  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;
-  };
-
-  const debriefchargesApi = async (finalPayload: any, failurePayload: any) => {
-    try {
-      const responseForceDebrief = (await callForceDebriefApi({
-        payload: {
-          debrief_data: finalPayload,
-          ...(activeTab === 'failure'
-            ? { failure_data: failurePayload }
-            : { failure_data: {} }),
-        },
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      if (responseForceDebrief.code === 200) {
-        notification.success({
-          message: 'Success',
-          description: `${responseForceDebrief?.message}`,
-        });
-      }
-    } catch (err) {}
-  };
-
-  const ordersUpdateApi = async () => {
-    const ordersApiPayload = 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 ordersApiPayload) {
-        (ordersApiPayload as Record<ServiceKey, any>)[key] =
-          ordersApiPayload[key as keyof typeof ordersApiPayload];
-      } else if (key in orderDetails) {
-        (ordersApiPayload as Record<ServiceKey, any>)[key] =
-          orderDetails[key as keyof OrdersType];
-      }
-    }
-
-    if (
-      ordersApiPayload?.assemble === false &&
-      ordersApiPayload?.disassemble === false
-    ) {
-      ordersApiPayload.assembly_type = null;
-    }
-
-    try {
-      let response = (await callUpdateOrderAPI({
-        payload: [ordersApiPayload],
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      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,
-        });
-        await setRecallOrders(true);
-      }
-    } catch (err) {
-      setOrderDetails(prevOrderDetails);
-    }
-  };
-
-  const escalationCreateApi = async (escalationPayload: any) => {
-    try {
-      const apiResponse = (await createEscalation({
-        payload: escalationPayload,
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      if (apiResponse?.code === 200) {
-        notification.success({
-          message: 'Success',
-          description: `${apiResponse?.message}`,
-        });
-
-        setGlobalEscData(apiResponse?.data);
-      }
-    } catch (err) {}
-  };
-
-  const onSubmit = async () => {
-    setRecallOrders(false);
-    const ordersPayload = {
-      consignment: orderDetails?.consignment,
-      order_number: orderDetails?.order_number,
-      customer_id: customerData?.id,
-      customer_name: customerData?.customer_name,
-      client_name: selectedCustomer?.client_name,
-      recipient_name: orderDetails?.order_recipient?.recipient_name,
-      order_id: orderDetails?.id,
-      order_type: orderDetails?.order_type?.type,
-      legacy_order_id: orderDetails?.gsit_order_id,
-      postcode: orderDetails?.order_recipient?.postcode,
-      ...(activeTab === 'failure' && { failure_new_status: newStatus }),
-    };
-    const adhocCharges = chargesState?.adhoc_charges
-      ?.filter(
-        item =>
-          !(item.adhoc_charges === 0 && item.adhoc_charges_description === '')
-      )
-      .map(({ adhoc_charges_description, adhoc_charges }) => ({
-        adhoc_charges_description,
-        adhoc_charges,
-      }));
-    const chargesPayload: any = { ...chargesState };
-    chargesPayload.adhoc_charges = adhocCharges;
-    chargesPayload.debrief_status = activeTab;
-    if (activeTab === 'success') {
-      delete chargesPayload.new_order_status;
-    }
-
-    const failurePayload = {
-      failure_reason_id: failureReason?.id,
-      ...(newStatus === 'Cancelled' && {
-        cancelled_reason_id: cancellationReason?.value,
-      }),
-      ...(newStatus === 'On Hold' && { hold_reason_id: orderHold?.value }),
-      failure_order_status: newStatus,
-      status: activeTab,
-    };
-
-    const finalPayload = {
-      ...ordersPayload,
-      status: activeTab,
-      charges: [chargesPayload],
-      ...(activeTab === 'failure' && { failureData: failurePayload }),
-    }; // check adhoc charges if 0 and description is empty then
-
-    // APPLY ALL VALIDATIONS HERE BEFORE CALLING ANY API
-
-    if (activeTab === 'failure') {
-      if (!failureReason?.id) {
-        notification.error({
-          message: 'Error',
-          description: 'Failure reason is mandatory',
-        });
-        return;
-      }
-
-      if (newStatus?.length === 0) {
-        notification.error({
-          message: 'Error',
-          description: 'New status is mandatory',
-        });
-        return;
-      }
-
-      if (newStatus === 'On Hold' && orderHold?.length === 0) {
-        notification.error({
-          message: 'Error',
-          description: 'Hold reason is mandatory',
-        });
-        return;
-      }
-
-      if (newStatus === 'Cancelled' && cancellationReason?.length === 0) {
-        notification.error({
-          message: 'Error',
-          description: 'Cancel reason is mandatory',
-        });
-        return;
-      }
-    }
-
-    // Validate escalation fields early – before any API calls
-    if (activeTab === 'failure' && isEscalationEnabled) {
-      if (
-        !escalationCategory?.value ||
-        !escalationLevel?.value ||
-        !escalationReason?.value
-      ) {
-        notification.error({
-          message: 'Error',
-          description:
-            'Escalation Category, Level and Reason are all mandatory',
-        });
-        return;
-      }
-    }
-
-    if (isDifferent()) {
-      await ordersUpdateApi();
-    }
-
-    if (activeTab === 'failure' && isEscalationEnabled) {
-      const escalationPayload = [
-        {
-          order_id: orderDetails?.id,
-          escalation_reason_id: escalationReason?.value,
-          escalation_category_id: escalationCategory?.value,
-          escalation_level_id: escalationLevel?.value,
-          is_deleted: false,
-          route_id: orderDetails?.order_routes?.route_id,
-        },
-      ];
-
-      await escalationCreateApi(escalationPayload);
-    }
-
-    await debriefchargesApi(finalPayload, failurePayload);
-    await setRecallAuditLog(true);
-    // call status api and alerts api
-    initialValues();
-    await props?.callOrderStatusApi();
-    await props?.callOrderAlertsApi();
-    await props?.callOrdersApi();
-    // closeModal();
-  };
-
-  const onForceDebrief = () => {
-    if (chargesState?.base_charge > 200) {
-      setShowAmountConfirmModal(true);
-    } else {
-      onSubmit();
-    }
-  };
-
-  return (
-    <OrderActionModal
-      headerTitle="Order Debrief"
-      onCloseHeader={closeModal}
-      infoText={infoText}
-      onSubmit={onForceDebrief}
-      submitBtnTitle={'Complete Order'}
-      // isSubmitDisabled={true}
-      maxWidth="95vw"
-      headerActions={
-        <ForceDebriefSelector onSwitchChange={handleSwitchChange} />
-      }
-    >
-      <MainContainer>
-        <FDNotification />
-        <ContentContainer>
-          <OrderInfo />
-        </ContentContainer>
-        <ContentContainer>
-          <Container>
-            <Label
-              label="Delivery Instructions"
-              htmlFor="deliveryInstruction"
-            />
-            <Text>{orderDetails?.delivery_instructions || 'N/A'}</Text>
-          </Container>
-
-          <Container>
-            <Label label="Other Instructions" htmlFor="otherInstruction" />
-            <Text>{orderDetails?.other_instructions || 'N/A'}</Text>
-          </Container>
-        </ContentContainer>
-        {/* ORDER-PRODUCT SECTION */}
-        {isDeleted?.length > 0 && (
-          <ProductDiv>
-            <Container>
-              {isDeleted?.map((item, index) => (
-                <ProductContainer key={index}>
-                  <Status>{'*'}</Status>
-                  <Status>{item?.status_value || 'N/A'}</Status>
-                  <Status>{item?.order_product_type?.type || 'N/A'}</Status>
-                  <Status>{item?.sku || 'N/A'}</Status>
-                  <Status>{`Part 1 of 1`}</Status>
-                  <Status>{'Weight' + ':' + item?.weight || 'N/A'}</Status>
-                  <Status>{'Cube' + ':' + item?.cube || 'N/A'}</Status>
-                </ProductContainer>
-              ))}
-            </Container>
-          </ProductDiv>
-        )}
-
-        {/* CHARGES SECTION */}
-        <ContentContainer>
-          <ContainerInner>
-            <BaseCharges
-              inputValue={inputValue}
-              setInputValue={setInputValue}
-              staticData={staticData}
-            />
-            <DeliveryAddOns
-              inputValue={inputValue}
-              setInputValue={setInputValue}
-            />
-          </ContainerInner>
-          <ContainerInner>
-            <CollectionAddOns
-              inputValue={inputValue}
-              setInputValue={setInputValue}
-            />
-            <DisposalCharge
-              inputValue={inputValue}
-              setInputValue={setInputValue}
-            />
-          </ContainerInner>
-          <OrderCharges inputValue={inputValue} setInputValue={setInputValue} />
-          <AdhocSection />
-        </ContentContainer>
-        {activeTab === 'failure' && (
-          <ContentContainer style={{ flexDirection: 'column', gap: '10px' }}>
-            <div style={{ display: 'flex', gap: '10px' }}>
-              Escalation
-              <Checkbox
-                checked={isEscalationEnabled}
-                onChange={event => setIsEscalationEnabled(event.target.checked)}
-              />
-            </div>
-            <Escalation />
-          </ContentContainer>
-        )}
-      </MainContainer>
-      {showAmountConfirmModal && (
-        <BaseChargeConfirmationModal
-          setConfirmationModal={setShowAmountConfirmModal}
-          onProceed={onSubmit}
-        />
-      )}
-    </OrderActionModal>
-  );
-}
-
-const Status = styled.span`
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  text-transform: capitalize;
-  color: #3a3630;
-`;
-
-const ProductContainer = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-`;
-
-const MainContainer = styled.div`
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-`;
-
-const ContainerInner = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-`;
-
-const Container = styled.div`
-  width: 100%;
-`;
-
-const Text = styled.div`
-  color: #363a30;
-  font-size: 14px;
-  white-space: break-spaces;
-`;
-
-export const ContentContainer = styled.div`
-  display: flex;
-  padding: 12px;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 40px;
-  flex: 1 0 0;
-  border-radius: 15px;
-  background: #f8fafc;
-  width: 100%;
-  white-space: nowrap;
-`;
-
-export const ProductDiv = styled.div`
-  display: flex;
-  padding: 12px;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: 40px;
-  flex: 1 0 0;
-  border-radius: 15px;
-  background: #f8fafc;
-  width: 100%;
-  white-space: nowrap;
-  min-height: 60px;
-  overflow: scroll;
-  max-height: 150px;
-`;
-export default React.memo(ForceDebriefModal);

package/src/components/order-view/order-actions/actions/force-debrief/Selector.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import SwitchSelector from 'react-switch-selector';
-import { notification } from 'antd';
-
-interface ForceDebriefSelectorProps {
-  onSwitchChange: (newValue: string) => void;
-}
-
-export const Options = [
-  {
-    label: 'Success',
-    value: 'success',
-    selectedBackgroundColor: '#57DB7A',
-  },
-  {
-    label: 'Failure',
-    value: 'failure',
-    selectedBackgroundColor: '#E95252',
-  },
-];
-
-const ForceDebriefSelector: React.FC<ForceDebriefSelectorProps> = ({
-  onSwitchChange,
-}) => {
-  const initialSelectedIndex = Options?.findIndex(
-    ({ value }) => value === 'success'
-  );
-
-  const handleSwitchChange = (selectedOptionValue: unknown) => {
-    if (typeof selectedOptionValue === 'string') {
-      onSwitchChange(selectedOptionValue);
-    } else {
-      notification.error({
-        message: 'Error',
-        description:
-          typeof selectedOptionValue ||
-          'Unexpected type for selectedOptionValue:',
-      });
-    }
-  };
-
-  return (
-    <StyledSwitch>
-      <SwitchSelector
-        onChange={handleSwitchChange}
-        options={Options}
-        initialSelectedIndex={initialSelectedIndex}
-        backgroundColor={'#cbc8c2'}
-        fontColor={'#f5f6fa'}
-        optionBorderRadius={30}
-      />
-    </StyledSwitch>
-  );
-};
-
-const StyledSwitch = styled.div`
-  width: 25%;
-  height: 40px;
-  .react-switch-selector-wrapper {
-    background: #777777;
-  }
-`;
-
-export default ForceDebriefSelector;