@bjsdistribution/dms-client-return 0.1.7-prod → 0.1.8-prod

package/src/components/order-view/order-actions/actions/force-debrief/order-info/success-content/index.tsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  CalendarIcon,
+  Label,
+  TextArea,
+} from '@bjsdistribution/dms-component-library';
+import { Input } from '../../styles';
+import {
+  useChargesState,
+  useOrderDetails,
+  useProductDetails,
+} from '../../../../../store';
+import { getBaseUrlSymbol } from '../../../../../utils';
+
+const formatDate = (date: any) => {
+  const padZero = (num: any) => num.toString().padStart(2, '0');
+  const year = new Date(date).getFullYear();
+  const month = padZero(new Date(date).getMonth() + 1);
+  const day = padZero(new Date(date).getDate());
+  return `${day}/${month}/${year}`;
+};
+
+function SuccessContent() {
+  const [orderDetails] = useOrderDetails();
+  const [chargesState] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const [productdata] = useProductDetails();
+  const sortedProductData = productdata?.sort((a: any, b: any) => {
+    return a?.status === b?.status ? 0 : a?.status ? -1 : 1;
+  });
+
+  const products = Array.isArray(sortedProductData)
+    ? sortedProductData?.filter(item => item?.status === true)
+    : [];
+
+  const excludedFields = [
+    'debrief_notes',
+    'new_order_status',
+    'base_charge_type',
+    'adhoc_charges',
+    'debrief_status',
+  ]; // Fields to exclude
+  let totalChargesAmount = 0;
+
+  for (const [key, value] of Object.entries(chargesState)) {
+    if (!excludedFields.includes(key) && typeof value === 'number') {
+      totalChargesAmount += value;
+    }
+  }
+
+  const formattedDate =
+    orderDetails?.action_date === null
+      ? ' '
+      : formatDate(orderDetails?.action_date);
+
+  const adhocTotalCharges =
+    chargesState?.adhoc_charges?.length > 0
+      ? chargesState?.adhoc_charges?.reduce(
+          (acc, item) => acc + item.adhoc_charges,
+          0
+        )
+      : 0;
+
+  return (
+    <Wrapper>
+      <FieldGroup>
+        <Label label="Signed By" htmlFor="signedby" />
+        <StyledInput
+          id="signedby"
+          placeholder=""
+          value={orderDetails?.order_recipient?.recipient_name || ''}
+          onChange={() => {}}
+          disabled
+        />
+
+        <Label label="Date" htmlFor="datefield" />
+        <DateInput>
+          <Text>{formattedDate}</Text>
+          <CalendarIcon />
+        </DateInput>
+
+        <GroupedFields>
+          <PairGroup>
+            <SmallGroup>
+              <Label label="Items" htmlFor="items" />
+              <Text>{products?.length}</Text>
+            </SmallGroup>
+            <SmallGroup>
+              <Label label="Zone" htmlFor="zone" />
+              <Text>{orderDetails?.zone_code}</Text>
+            </SmallGroup>
+          </PairGroup>
+
+          <PairGroup>
+            <SmallGroup>
+              <Label label="Weight" htmlFor="weight" />
+              <Text>{orderDetails?.weight}Kg</Text>
+            </SmallGroup>
+
+            <SmallGroup>
+              <Label label="Total Charge" htmlFor="totalCharge" />
+              <div
+                style={{ display: 'flex', gap: '4px', alignItems: 'center' }}
+              >
+                <CurrencyWrapper>{baseUrlSymbol}</CurrencyWrapper>
+                <Text>{totalChargesAmount + adhocTotalCharges}</Text>
+              </div>
+            </SmallGroup>
+          </PairGroup>
+        </GroupedFields>
+      </FieldGroup>
+
+      <DropdownGrid>
+        <FieldGroup wide>
+          <Label label="Order Status Notes" htmlFor="notes" />
+          <TextInput
+            id="notes"
+            placeholder="Type notes here..."
+            value={orderDetails?.order_status_note || ''}
+            readOnly
+          />
+        </FieldGroup>
+
+        <FieldGroup wide>
+          <Label label="Charge Description" htmlFor="chargedescription" />
+          <TextInput
+            id="chargedescription"
+            placeholder="Type charge description here..."
+            onChange={() => {}}
+          />
+        </FieldGroup>
+      </DropdownGrid>
+    </Wrapper>
+  );
+}
+
+const CurrencyWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  color: #999;
+`;
+
+const DropdownGrid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 48%;
+`;
+
+const GroupedFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+`;
+
+const PairGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const SmallGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  width: 48%;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 100%;
+  padding: 10px 0;
+`;
+
+const FieldGroup = styled.div<{ wide?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: ${props => (props.wide ? 2 : 1)};
+`;
+
+const TextInput = styled(TextArea)`
+  resize: none;
+  width: 100%;
+  min-height: 180px;
+`;
+
+const StyledInput = styled(Input)`
+  width: 100%;
+  height: 38px;
+`;
+
+const DateInput = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid #e0e2e7;
+  background-color: #fff;
+  color: #363a30;
+  height: 38px;
+  font-size: 14px;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+`;
+
+const Text = styled.div`
+  color: #363a30;
+  font-size: 14px;
+`;
+
+export default SuccessContent;

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export const Title = styled.span`
+  font-family: 'Lato', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: #6a7378;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const FieldRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 300px;
+  justify-content: space-between;
+`;
+
+export const Label = styled.label`
+  font-size: 14px;
+  color: #7b7874;
+`;
+
+export const Input = styled.input`
+  width: 70px;
+  padding: 6px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+`;
+
+export const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const CurrencySymbol = styled.span`
+  color: #858d9d;
+`;

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

@@ -34,6 +34,7 @@ import { useReminderNotiData, useTasksData } from './store';
 import ChargeLog from './actions/charge-log';
 import ReminderModal from './actions/create-task-reminder';
 import TaskModal from './actions/create-task-reminder/TaskModal';
+import ForceDebriefModal from './actions/force-debrief/ForceDebriefModal';
 
 function OrderActions() {
   const [currentAction, setCurrentAction] = useCurrentAction();
@@ -237,6 +238,15 @@ function OrderActions() {
         return <ConfirmOrder callOrderAlertsApi={callOrderAlertsApi} />;
       case 'send-sms':
         return <SendSmsModal />;
+
+      case 'force-debrief':
+        return (
+          <ForceDebriefModal
+            callOrdersApi={callOrdersApi}
+            callOrderStatusApi={fetchStatusData}
+            callOrderAlertsApi={callOrderAlertsApi}
+          />
+        );
       case 'send-email':
         return <SendEmailModal />;
       case 'change-customer-account':

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

@@ -30,7 +30,7 @@ const CustomFormSection = styled(FormSection)`
   border-radius: 8px;
   background: #f8fafc;
   box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
-  padding: 10px !important;
+  padding: 24px !important;
 `;
 
 export default InstructionSection;

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,30 @@ import { useNavigate } from 'react-router-dom';
 import { notification } from 'antd';
 import { useOrderId } from '../../store';
 
-function ExpandedContent() {
+interface IPROS {
+  callReturnProducts: any;
+}
+
+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 +52,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 +106,7 @@ function ExpandedContent() {
 
   return (
     <Container>
-      <ProductTable />
+      <ProductTable callReturnProducts={props?.callReturnProducts} />
       <MidContainer>
         <SaveNoteContainer>
           <Button

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

@@ -20,7 +20,7 @@ function ProductsInfo() {
   const returnOrder = data;
 
   // For API Call
-  const [, setAPidata] = useProductDetails();
+  const [, setProductsData] = useProductDetails();
   const [, setLoading] = useLoading();
   const {
     data: returnOrdersData,
@@ -44,16 +44,16 @@ function ProductsInfo() {
     if (returnOrdersData && returnOrdersData.data) {
       const requiredData = returnOrdersData.data;
       if (requiredData.length > 0) {
-        setAPidata(requiredData);
+        setProductsData(requiredData);
       } else {
-        setAPidata(null);
+        setProductsData(null);
       }
     }
   }, [returnOrdersData, loading]);
 
   return (
     <CollapsableForm collapsedContent={<CollapsedContent />}>
-      <ExpandedContent />
+      <ExpandedContent callReturnProducts={callReturnProducts} />
     </CollapsableForm>
   );
 }

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

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

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

@@ -6,7 +6,7 @@ import {
 import {
   Checkbox,
   displayValueOrNA,
-  useApiHook,
+  useAxios,
 } from '@bjsdistribution/dms-component-library';
 import ActionIcon from '../../../../assets/icons/ActionIcon';
 import { useOrderId, useProductDetails } from '../../store';
@@ -16,7 +16,11 @@ import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 
-const ReturnProductTable = () => {
+interface IPROS {
+  callReturnProducts: any;
+}
+
+const ReturnProductTable = (props: IPROS) => {
   const [selectedProducts, setSelectedProducts] = useSelectedProducts();
   const [selectAll, setSelectAll] = useState(false);
   const [productData, setProductData] = useProductDetails();
@@ -24,17 +28,16 @@ const ReturnProductTable = () => {
   const [orderId] = useOrderId();
   const [returnOrderData] = useNewReturnOrderData();
 
-  const handleActionClick = (id: number) => {
-    setSelectedRowId(id);
-  };
+  // const handleActionClick = (id: number) => {
+  //   setSelectedRowId(id);
+  // };
 
-  const { data: isresponse, setShouldPerformAction: setAction } = useApiHook<{
+  const { data: isresponse, fetchData: callDeleteProduct } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `order/order_products/delete/`,
-    method: 'DELETE',
-    body: [{ id: selectedRowId, order_id: orderId }],
-    performAction: false,
+    endpoint: `v1/return/product/remove/`,
+    method: 'POST',
+    body: { return_order_product_id: selectedRowId, return_order_id: +orderId },
   });
 
   useEffect(() => {
@@ -56,9 +59,9 @@ const ReturnProductTable = () => {
     }
   };
 
-  const onDeleteProducts = () => {
-    setAction(true);
-  };
+  // const onDeleteProducts = () => {
+  //   callDeleteProduct();
+  // };
 
   const handleSelectAll = () => {
     if (selectAll) {
@@ -78,6 +81,43 @@ const ReturnProductTable = () => {
     );
   };
 
+  //delete product API
+  const deleteProduct = async (selectedProductId: any) => {
+    try {
+      const response = (await callDeleteProduct({
+        payload: {
+          return_order_product_id: selectedProductId,
+          return_order_id: +orderId,
+        },
+      })) as {
+        code: number | null;
+        error?: string | null;
+        data?: any[];
+        message?: string;
+      };
+
+      if (response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          description: response?.message || 'Product deleted successfully.',
+        });
+        props?.callReturnProducts();
+      } else {
+        notification.error({
+          message: 'Deletion Failed',
+          description: response?.message || 'Could not delete the product.',
+        });
+      }
+    } catch (error) {
+      console.error('Error deleting product:', error);
+      notification.error({
+        message: 'Error',
+        //@ts-ignore
+        description: error?.message || 'An unexpected error occurred.',
+      });
+    }
+  };
+
   const disableCheckbox =
     productData?.length == 0 || returnOrderData?.length == 0;
 
@@ -140,8 +180,7 @@ const ReturnProductTable = () => {
                   <td>
                     <div
                       onClick={() => {
-                        handleActionClick(product?.id);
-                        onDeleteProducts();
+                        deleteProduct(product?.id);
                       }}
                       style={{ cursor: 'pointer' }}
                     >

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

@@ -2,6 +2,7 @@ import { atom, useAtom } from 'jotai';
 import { atomWithReducer } from 'jotai/utils';
 import {
   CancelOrderProductsType,
+  ChargesType,
   CreateProduct,
   OrderActionsType,
   OrdersType,
@@ -109,6 +110,9 @@ export const ordersInitialValue: OrdersType = {
   id: null,
   name: '',
   carrier_id: null,
+  order_type: {
+    type: null,
+  },
 };
 
 export const orderProductInitialvalue: CreateProduct = {
@@ -140,6 +144,42 @@ export const updateOrderProducts: UpdateOrderProduct = {
   return_reason_id: 0,
 };
 
+//force debrief
+const chargesIntialValue: ChargesType = {
+  base_charge_type: 1,
+  base_charge: 0,
+  weight: 0,
+  drop_time: 0,
+  timed_service: 0,
+  wait_time: 0,
+  extra_floor: 0,
+  bulky_items: 0,
+  re_label: 0,
+  extra_cube: 0,
+  additional_box: 0,
+  additional_item: 0,
+  weekend: 0,
+  re_allocation: 0,
+  pre_dated: 0,
+  re_package: 0,
+  disassemble: 0,
+  qc: 0,
+  collection_qc: 0,
+  return_to_client: 0,
+  roc: 0,
+  unpack: 0,
+  packaging_disposal: 0,
+  assembly: 0,
+  debrief_notes: '',
+  recycle: 0,
+  admin: 0,
+  disposal: 0,
+  disposal_recycling: 0,
+  debrief_status: '',
+  new_order_status: '',
+  adhoc_charges: [],
+};
+
 export const usedate = () => {
   return useAtom(date);
 };
@@ -243,6 +283,11 @@ export function useOrderAlertsData() {
   return useAtom(orderAlertsData);
 }
 
+const customerList = atom<any>([]);
+export function useOrderCustomersList() {
+  return useAtom(customerList);
+}
+
 export {
   useTabType,
   useInfoType,
@@ -558,6 +603,67 @@ export function useGlobalStateHitOrder() {
   return useAtom(globalOrderGetApi);
 }
 
+//force debrief states
+const globalEscData = atom<any>([]);
+export function useGlobalEscData() {
+  return useAtom(globalEscData);
+}
+
+const activeTab = atom<any>('success');
+
+export function useActiveTab() {
+  return useAtom(activeTab);
+}
+
+const chargesStateAtom = atom<ChargesType>(chargesIntialValue);
+
+export function useChargesState() {
+  return useAtom(chargesStateAtom);
+}
+
+const failureReasonAtom = atom<any>('');
+export function useFailureReason() {
+  return useAtom(failureReasonAtom);
+}
+
+const escalationCategoryAtom = atom<any>('');
+
+export function useEscalationCategory() {
+  return useAtom(escalationCategoryAtom);
+}
+
+const escalationLevelAtom = atom<any>('');
+
+export function useEscalationLevel() {
+  return useAtom(escalationLevelAtom);
+}
+
+const escalationReasonAtom = atom<any>('');
+
+export function useEscalationReason() {
+  return useAtom(escalationReasonAtom);
+}
+
+const newStatusAtom = atom<any>('');
+export function useNewStatus() {
+  return useAtom(newStatusAtom);
+}
+
+const orderCancelReasonAtom = atom<any>('');
+export function useOrderCancelReason() {
+  return useAtom(orderCancelReasonAtom);
+}
+
+const orderHoldReasonAtom = atom<any>('');
+export function useOrderHoldReason() {
+  return useAtom(orderHoldReasonAtom);
+}
+
+const isFailureReasonChangedAtom = atom<boolean>(false);
+export function useIsFailureReasonChanged() {
+  return useAtom(isFailureReasonChangedAtom);
+}
+
 // Popup state Manage
 const initialState = null;