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

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

@@ -0,0 +1,635 @@
+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
+    );
+
+    const serviceKeys = [
+      'assemble',
+      'disassemble',
+      'unpack_items',
+      'collect_disposal',
+      'take_packaging_away',
+      'assembly_type',
+    ];
+
+    let orderServicesPayload: Record<string, any> = {};
+
+    const includesKey = serviceKeys.some(key => key in ordersApiPayload);
+
+    if (includesKey) {
+      for (const key of serviceKeys) {
+        orderServicesPayload[key as keyof typeof ordersApiPayload] =
+          key in ordersApiPayload
+            ? ordersApiPayload[key as keyof typeof ordersApiPayload]
+            : orderDetails[key as keyof OrdersType];
+        delete ordersApiPayload[key as keyof typeof ordersApiPayload];
+        if (
+          orderServicesPayload?.assemble === false &&
+          orderServicesPayload?.disassemble === false
+        ) {
+          orderServicesPayload.assembly_type = null;
+        }
+      }
+    }
+
+    if (Object.keys(orderServicesPayload).length > 0) {
+      ordersApiPayload.order_services = [orderServicesPayload];
+    }
+
+    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;
+      }
+    }
+
+    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

@@ -0,0 +1,65 @@
+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;