@bjsdistribution/dms-client-return 0.0.80 → 0.0.82

package/src/components/order-view/notes/NoteType.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
 import styled from 'styled-components';
 import { useSelectedData, useVisibilityData } from '../../store';
@@ -7,6 +7,17 @@ function NoteType() {
   const [visibilityData] = useVisibilityData();
   const [selected, setSelected] = useSelectedData();
 
+  useEffect(() => {
+    if (visibilityData && !selected) {
+      const defaultOption = visibilityData?.find(
+        (option: any) => option.type === 'Private'
+      );
+      if (defaultOption) {
+        setSelected(defaultOption.value);
+      }
+    }
+  }, [visibilityData, selected, setSelected]);
+
   const handleRadioButtonChange = (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {

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

@@ -15,16 +15,9 @@ import {
 function Notes() {
   const [moduleIds, setModuleIds] = usemoduleIds();
   const [orderId] = useOrderId();
-  // const location = useLocation();
-  // const pathname = location.pathname;
-  // const orderIdLocaation = pathname.split('/')[1];
-
-  const [recallAuditLog] = useGlobalStateHitAuditLog();
-
-  const [, setAuditLogLoading] = useAuditLogLoadingState();
-
   const [, setNotes] = usegetNotes();
-  // const [loderStatus] = useCallAPi();
+  const [, setAuditLogLoading] = useAuditLogLoadingState();
+  const [recallAuditLog, setAuditLogs] = useGlobalStateHitAuditLog();
 
   // Fetch module IDs
   const { data: fetchedData, loading: apiLoading } = useApiHook<{ data: any }>({
@@ -38,22 +31,21 @@ function Notes() {
         fetchedData?.data
           .filter((item: any) => item?.name === 'ORDER')
           .flatMap((item: any) =>
-            item?.static_child_mappings?.map((child: any) => ({
-              id: child?.child_module?.id,
-              name: child?.child_module?.name,
-              parentId: child?.parent_module?.id,
-              parentName: child?.parent_module?.name,
-            }))
+            item?.static_child_mappings
+              ?.filter(
+                (child: any) => child?.child_module?.name === 'ORDER-NOTE'
+              )
+              .map((child: any) => ({
+                id: child?.child_module?.id,
+                parentId: child?.parent_module?.id,
+              }))
           ) || [];
 
-      const orderNoteModule = modules?.find(
-        (module: any) => module?.name === 'ORDER-NOTE'
-      );
-
-      setModuleIds(orderNoteModule || modules[0] || null);
+      setModuleIds(modules[0] || null);
     }
   }, [apiLoading, fetchedData]);
 
+  // Fetch Notes Data
   const {
     data: NotesData,
     loading: NotesLoading,
@@ -69,13 +61,7 @@ function Notes() {
       setShouldPerformAction(true);
     }
     if (!NotesLoading && NotesData?.data) {
-      // const updatedData = NotesData?.data
-      // .filter((item: any) => item['ORDER-NOTE'] || item['ORDER'])
-      // .map((item: any) => [item['ORDER-NOTE'], item['ORDER']])
-      // .flat()
-      // .filter(Boolean);
-
-      const updatedData = NotesData.data
+      const updatedData = NotesData?.data
         .filter(
           (item: any) =>
             item['ORDER-NOTE'] || item['ORDER'] || item['ORDER-RETURN']
@@ -84,12 +70,11 @@ function Notes() {
           item['ORDER-NOTE'],
           item['ORDER'],
           item['ORDER-RETURN'],
-        ]);
+        ])
+        .flat()
+        .filter(Boolean);
 
-      // const orderData = NotesData?.data[0]?.ORDER || [];
-      // const orderNotesData = NotesData?.data[1]?.['ORDER-NOTE'] || [];
-      // const allNotes = [...orderData, ...orderNotesData];
-      const combinedArray = updatedData.flat();
+      const combinedArray = updatedData?.flat();
       combinedArray.sort(
         (a: any, b: any) =>
           new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
@@ -102,9 +87,19 @@ function Notes() {
     setAuditLogLoading(NotesLoading);
   }, [moduleIds, orderId, NotesLoading, recallAuditLog]);
 
+  const handleGetLogs = () => {
+    setAuditLogs(true);
+    setTimeout(() => {
+      setAuditLogs(false);
+    }, 1000);
+  };
+
   return (
     <Container>
-      <CardHeader>NOTES</CardHeader>
+      <CardHeader>
+        NOTES
+        <SmallButton onClick={handleGetLogs}>UPDATE LOGS</SmallButton>
+      </CardHeader>
       <CustomizedFormSection>
         <AddNote />
         <AuditLogs />
@@ -129,6 +124,9 @@ const CardHeader = styled.div`
   text-transform: uppercase;
   font-family: 'Roboto', sans-serif;
   font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 `;
 
 const CustomizedFormSection = styled.div`
@@ -142,4 +140,19 @@ const CustomizedFormSection = styled.div`
   border-bottom-left-radius: 8px;
   box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
 `;
+
+const SmallButton = styled.button`
+  background-color: #363a30;
+  color: #ffffff;
+  font-size: 12px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+
+  &:hover {
+    background-color: #feba30;
+  }
+`;
 export default Notes;

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

@@ -16,12 +16,16 @@ interface ActionsDropdownProps {
   disabled?: boolean;
   defaultValue?: any;
   onChange?: any;
+  required?: boolean;
 }
 
 function OrderActionsDropdown(props: ActionsDropdownProps) {
   return (
     <Container className={props.className}>
-      <Label>{props.label}</Label>
+      <Label>
+        {props.label}
+        {props.required && <RequiredAsterisk>*</RequiredAsterisk>}
+      </Label>
       <AntSelect
         options={props.options}
         placeholder={props.placeholder}
@@ -38,6 +42,11 @@ function OrderActionsDropdown(props: ActionsDropdownProps) {
   );
 }
 
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+`;
+
 const Label = styled.label`
   color: #6a7378;
   font-family: 'Lato', sans-serif;

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

@@ -84,6 +84,12 @@ function CancelOrder() {
       //@ts-ignore
       if (response?.data && response?.code === 200) {
         setShouldPerformAction(true);
+        notification.success({
+          message: 'Success',
+          description:
+            //@ts-ignore
+            response?.message || 'Sucess',
+        });
       } else {
         // alert(response?.error_traceback);
         notification.error({
@@ -132,6 +138,7 @@ function CancelOrder() {
         <Top>
           <TopLeft>
             <OrderActionsDropdown
+              required
               label="Cancelation Reason"
               placeholder="Select Cancelation Reason"
               options={cancelReasonOptions || []}
@@ -145,8 +152,11 @@ function CancelOrder() {
           </TopLeft>
           <TopRight>
             <Container>
-              <Label>Cancelation Note</Label>
-              <TextArea
+              <div style={{ display: 'flex', flexDirection: 'row' }}>
+                <Label>Cancelation Note</Label>{' '}
+                <RequiredAsterisk>*</RequiredAsterisk>
+              </div>
+              <TArea
                 rows={5}
                 onChange={onChangeNotes}
                 value={cancelNotes}
@@ -162,6 +172,15 @@ function CancelOrder() {
     </OrderActionModal>
   );
 }
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+  font-size: x-small;
+`;
+
+const TArea = styled(TextArea)`
+  resize: none;
+`;
 
 const Label = styled.label`
   color: #6a7378;

package/src/components/order-view/order-actions/actions/confirm-order/tables/NotesTable.tsx

@@ -5,6 +5,7 @@ import { useOrderId } from '../../../../store';
 
 import { Empty, Skeleton } from 'antd';
 import { format } from 'date-fns';
+import CustomScrollBar from '../../../../../../common/scrollbar';
 import {
   EmptyDataContainer,
   StyledTable,
@@ -56,7 +57,7 @@ function NotesTable() {
   });
   useEffect(() => {
     setNoteLoadingStore(true);
-    if (moduleIds && orderId) {
+    if (moduleIds) {
       setShouldPerformAction(true);
     }
     if (!NotesLoading && NotesData?.data) {
@@ -76,56 +77,58 @@ function NotesTable() {
     <Container>
       <Title>Notes ({notes?.length})</Title>
       <StyledTableWrapper>
-        <StyledTable className="scrollClass">
-          <thead>
-            <tr>
-              <th>Created</th>
-              <th>Notes</th>
-            </tr>
-          </thead>
-          <tbody>
-            {loading ? (
+        <CustomScrollBar>
+          <StyledTable className="scrollClass">
+            <thead>
               <tr>
-                <td colSpan={6}>
-                  <Skeleton active />
-                </td>
-                <td colSpan={6}></td>
+                <th>Created</th>
+                <th>Notes</th>
               </tr>
-            ) : notes?.length === 0 ? (
-              <tr>
-                <td className="emptyTd" colSpan={7}>
-                  <EmptyDataContainer>
-                    <Empty />
-                  </EmptyDataContainer>
-                </td>
-              </tr>
-            ) : (
-              notes?.map((order: any) => (
-                <tr key={order.id}>
-                  <td>
-                    <div
-                      style={{
-                        fontWeight: 'bold',
-                        textTransform: 'capitalize',
-                      }}
-                    >
-                      {order?.created_by}
-                    </div>
-                    <div>
-                      {format(
-                        new Date(order?.created_at),
-                        "dd/MM/yyyy '@' HH:mm"
-                      )}
-                    </div>
+            </thead>
+            <tbody>
+              {loading ? (
+                <tr>
+                  <td colSpan={6}>
+                    <Skeleton active />
+                  </td>
+                  <td colSpan={6}></td>
+                </tr>
+              ) : notes?.length === 0 ? (
+                <tr>
+                  <td className="emptyTd" colSpan={7}>
+                    <EmptyDataContainer>
+                      <Empty />
+                    </EmptyDataContainer>
                   </td>
-                  <td
-                    dangerouslySetInnerHTML={{ __html: order?.description }}
-                  ></td>
                 </tr>
-              ))
-            )}
-          </tbody>
-        </StyledTable>
+              ) : (
+                notes?.map((order: any) => (
+                  <tr key={order.id}>
+                    <td>
+                      <div
+                        style={{
+                          fontWeight: 'bold',
+                          textTransform: 'capitalize',
+                        }}
+                      >
+                        {order?.created_by}
+                      </div>
+                      <div>
+                        {format(
+                          new Date(order?.created_at),
+                          "dd/MM/yyyy '@' HH:mm"
+                        )}
+                      </div>
+                    </td>
+                    <td
+                      dangerouslySetInnerHTML={{ __html: order?.description }}
+                    ></td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </StyledTable>
+        </CustomScrollBar>
       </StyledTableWrapper>
     </Container>
   );
@@ -147,7 +150,7 @@ const Container = styled.div`
   flex-direction: column;
   gap: 8px;
   > div {
-    min-height: 165px;
+    min-height: 350px;
   }
 `;
 

package/src/components/order-view/order-actions/actions/split-order/SplitOrderTable.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useProductDetails } from '../../../store';
 
 import { Empty, Skeleton } from 'antd';
-import { useLoading } from '../../../../order-daily-overview/store/store';
 import { Checkbox } from '@bjsdistribution/dms-component-library';
+import { useLoading } from '../../../../order-daily-overview/store/store';
 import { useSelectedSplit, useSplitOrderPayload } from '../../store';
 import {
   EmptyDataContainer,
@@ -18,13 +18,14 @@ function SplitOrderTable() {
   const [selectAll, setSelectAll] = useState(false);
   const [payload, setPayload] = useSplitOrderPayload();
 
+  // Handle Select All
   const handleSelectAll = (e: any) => {
-    setSelectAll(e.target.checked);
-    if (e.target.checked) {
+    const isChecked = e.target.checked;
+    setSelectAll(isChecked);
+
+    if (isChecked) {
       setSelectedSplit(
-        orderProductDetails.map((order: any) => ({
-          id: order.id,
-        }))
+        orderProductDetails?.map((order: any) => ({ id: order.id }))
       );
     } else {
       setSelectedSplit([]);
@@ -32,16 +33,16 @@ function SplitOrderTable() {
   };
 
   const handleSelectedSplitList = (id: any) => {
-    setSelectedSplit((prevSelectedOrder: any) => {
-      const isSelected = prevSelectedOrder?.some(
-        (order: any) => order.id === id
-      );
+    setSelectedSplit(prevSelectedOrder => {
+      const isSelected = prevSelectedOrder?.some(order => order.id === id);
+
+      const updatedSelection = isSelected
+        ? prevSelectedOrder?.filter(order => order.id !== id)
+        : [...prevSelectedOrder, { id }];
+
+      setSelectAll(updatedSelection?.length === orderProductDetails?.length);
 
-      if (isSelected) {
-        return prevSelectedOrder?.filter((order: any) => order.id !== id);
-      } else {
-        return [...prevSelectedOrder, { id: id }];
-      }
+      return updatedSelection;
     });
   };
 
@@ -52,7 +53,7 @@ function SplitOrderTable() {
       products: selectedSplits?.map(order => order.id),
       force: true,
     });
-  }, [orderProductDetails, selectedSplits]);
+  }, [selectedSplits, setPayload]);
 
   return (
     <StyledTableWrapper id="tableScrolling">
@@ -60,7 +61,14 @@ function SplitOrderTable() {
         <thead>
           <tr>
             <th>
-              <Checkbox checked={selectAll} onChange={handleSelectAll} />
+              <Checkbox
+                checked={selectAll}
+                onChange={handleSelectAll}
+                disabled={
+                  orderProductDetails?.length === 0 ||
+                  orderProductDetails?.length === null
+                }
+              />
             </th>
             <th>Type</th>
             <th>Code</th>
@@ -82,17 +90,18 @@ function SplitOrderTable() {
             <tr>
               <td className="emptyTd" colSpan={7}>
                 <EmptyDataContainer>
-                  <Empty />
+                  <Empty description="No Data Found" />
                 </EmptyDataContainer>
               </td>
             </tr>
           ) : (
+            orderProductDetails?.length > 0 &&
             orderProductDetails?.map((order: any) => (
               <tr key={order.id}>
                 <td>
                   <Checkbox
                     checked={selectedSplits?.some(
-                      (selectedInvoice: any) => selectedInvoice?.id === order.id
+                      selectedOrder => selectedOrder.id === order.id
                     )}
                     onChange={() => handleSelectedSplitList(order.id)}
                   />

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

@@ -7,6 +7,7 @@ import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../../types';
 
 import { useSelectedSplit, useSplitOrderPayload } from '../../store';
+import { notification } from 'antd';
 
 function SplitOrder() {
   const [, setCurrentAction] = useCurrentAction();
@@ -21,7 +22,10 @@ function SplitOrder() {
     setCurrentAction(undefined);
   };
 
-  const { setShouldPerformAction: setPerformAction } = useApiHook<{
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
     data: ApiResponse[];
   }>({
     endpoint: `orders/split_order/${orderId}`,
@@ -33,8 +37,26 @@ function SplitOrder() {
   const onSubmitSplitOrder = () => {
     if (orderId) {
       setPerformAction(true);
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        notification.success({
+          message: 'Success',
+          description:
+            //@ts-ignore
+            response?.message || 'Sucess',
+        });
+      } else {
+        // alert(response?.error_traceback);
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.message ||
+            'An error has occurred. Please try again later.',
+        });
+      }
+      setSelectedSplit([]);
     }
-    setSelectedSplit([]);
   };
 
   const isSubmitDisabled = () => {

package/src/components/order-view/order-actions/actions/uncancel-order/UncancelOrder.tsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react';
+import {
+  AntSelect,
+  TextArea,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import {
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderDetails,
+  useOrderId,
+  useOrderStaticData,
+  usePrevOrderDetails,
+} from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import { HoldContentContainer, HoldRow, Label, SplitText } from '../modalstyle';
+import { ApiResponse, OrdersType } from '../../../types';
+import styled from 'styled-components';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
+
+function UncancelOrder() {
+  const [orderId] = useOrderId();
+  const [, setCurrentAction] = useCurrentAction();
+
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
+  const [orderStaticData] = useOrderStaticData();
+  const [unCancelReason, setUncancelReason] = useState<string | undefined>(
+    undefined
+  );
+  const [unCancelNotes, setUncancelNotes] = useState<string>('');
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+
+  const unCancelReasonOptions = orderStaticData?.uncancel_reasons?.map(
+    (item: any) => {
+      return {
+        label: item?.reason,
+        value: item?.reason,
+      };
+    }
+  );
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/uncancel/?uncancelled_reason=${unCancelReason}&uncancelled_notes=${unCancelNotes}`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    setLoading(loading);
+    if (fetchedData && fetchedData.data) {
+      const requiredData = fetchedData?.data;
+      setOrderDetails(requiredData[0]);
+      setPrevOrderDetails(requiredData[0]);
+      setCurrentAction(undefined);
+    }
+    if (
+      (fetchedData && fetchedData?.data === null) ||
+      fetchedData?.data?.length === 0
+    ) {
+      setCurrentAction(undefined);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (response) {
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        setShouldPerformAction(true);
+        notification.success({
+          message: 'Success',
+          description:
+            //@ts-ignore
+            response?.message || 'Sucess',
+        });
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [response]);
+
+  const onChange = (event: any) => {
+    setUncancelNotes(event.target.value);
+  };
+
+  const onChangeUnCancelReason = (value: string) => {
+    setUncancelReason(value);
+  };
+
+  const onSubmit = () => {
+    if (orderId) {
+      setPerformAction(true);
+    }
+  };
+
+  const showSubmitBtn =
+    unCancelReason !== undefined && unCancelNotes?.length > 0;
+
+  return (
+    <OrderActionModal
+      headerTitle="Un-Cancel order"
+      onCloseHeader={onClose}
+      onSubmit={onSubmit}
+      showAdditionalInfo
+      infoText={infoText}
+      submitBtnTitle="Save Details"
+      isSubmitDisabled={!showSubmitBtn}
+    >
+      <HoldContentContainer>
+        <SplitText>
+          <HoldRow>
+            <Label>Un-cancel Reason</Label>
+            <AntSelect
+              options={unCancelReasonOptions || []}
+              placeholder="Select un-cancel Reason"
+              onChange={onChangeUnCancelReason}
+              disabled={false}
+              style={{ width: '346px', height: 40 }}
+              showSearch={true}
+              popupClassName={'dropDownStyle'}
+              selectWrapperClass={'rounded'}
+              defaultValue={unCancelReason}
+            />
+          </HoldRow>
+          <HoldRow>
+            <Label>Un-cancel Note</Label>
+            <CustomTextArea rows={5} onChange={onChange} />
+          </HoldRow>
+        </SplitText>
+      </HoldContentContainer>
+    </OrderActionModal>
+  );
+}
+
+const CustomTextArea = styled(TextArea)`
+  width: 346px;
+`;
+
+export default UncancelOrder;