@bjsdistribution/dms-client-return 0.0.81 → 0.0.83

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -4,7 +4,7 @@ import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../types';
 import { useOrderDetails, useOrderId, useProductDetails } from '../../store';
 import { Select } from 'antd';
-import { useSelectedProducts } from '../../../store';
+import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
 
 export const payloadAtom = atom<any>(null);
@@ -12,7 +12,7 @@ export const payloadAtom = atom<any>(null);
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
-  const [returnOrderData, setReturnOrderData] = useState<any>([]);
+  const [returnOrderData, setReturnOrderData] = useNewReturnOrderData();
   const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
   const [selectedProducts] = useSelectedProducts();
   const [orderData] = useOrderDetails();
@@ -89,20 +89,33 @@ const NewReturnDropdown = () => {
   return (
     <Container>
       <Text>New Return Order:</Text>
-      <Select
+      <StyledAntSelect
         options={dropdownOptions}
+        value={selectedOrderId}
         placeholder="Select"
+        // @ts-ignore
         onChange={handleDropdownChange}
         style={defaultSelectStyle}
-        disabled={false}
         showSearch
         dropdownStyle={{ width: 'max-content' }}
         popupClassName={defaultPopupClassName}
+        status={selectedOrderId ? '' : 'error'}
       />
     </Container>
   );
 };
 
+const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+  .ant-select-clear {
+    top: 40% !important;
+    font-size: 18px !important;
+  }
+`;
+
 const Container = styled.div`
   display: flex;
   align-items: center;

package/src/components/order-view/notification/ReminderTemplate.tsx

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { useReminderRefId } from '../order-actions/store';
 import { formatDate } from '../order-actions/utils';
 
-function ReminderTemplate({ data }: any) {
+function ReminderTemplate({ data, dismissReminder }: any) {
   const [, setCurrentAction] = useCurrentAction();
   const [, setReminderRefId] = useReminderRefId();
   const openModal = () => {
@@ -15,7 +15,7 @@ function ReminderTemplate({ data }: any) {
   //getting particular reminder data
   const handleClick = (Id: number) => {
     setReminderRefId(Id);
-    openModal()
+    openModal();
   };
 
   const type =
@@ -25,13 +25,12 @@ function ReminderTemplate({ data }: any) {
       ? 'warn'
       : 'success';
 
-      const titleColor = 
-      data?.reminder_status?.name === 'SD' 
-        ? '#36A053' 
-        : data?.reminder_status?.name === 'pending' 
-        ? '#FEBA30' 
-        : '#3A3630';
-    
+  const titleColor =
+    data?.reminder_status?.name === 'SD'
+      ? '#36A053'
+      : data?.reminder_status?.name === 'pending'
+      ? '#FEBA30'
+      : '#3A3630';
 
   return (
     <div>
@@ -46,13 +45,13 @@ function ReminderTemplate({ data }: any) {
                   {' '}
                   {data?.reference || 'NA'}{' '}
                 </StyledLink>
-                {formatDate(data?.due)}, Assigned to : {' '}
+                {formatDate(data?.due)}, Assigned to :{' '}
               </StyledTitle>
             </>
           }
           description={`${data?.details}`}
           showOkButton={false}
-          onClose={() => {}}
+          onClose={() => dismissReminder(data.id)}
         />
       </StyledAlert>
     </div>

package/src/components/order-view/notification/Tabs.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useTabType } from '../store';
-import OrderTemplate from './OrderTemplate';
+// import OrderTemplate from './OrderTemplate';
 import FlagTemplate from './FlagTemplate';
 import ReminderTemplate from './ReminderTemplate';
 
@@ -10,6 +10,8 @@ function Tabs({
   closedNotifications,
   activeReminders,
   closedReminders,
+  dismissReminder,
+  dismissFlags,
 }: any) {
   const [activeTab] = useTabType();
 
@@ -25,24 +27,34 @@ function Tabs({
         <Container className="tab-content">
           {activeTab === 'active' && (
             <>
-              <OrderTemplate />
+              {/* <OrderTemplate /> */}
               {initialReminders.map((item: any, index: any) => (
-                <ReminderTemplate key={index} data={item} />
+                <ReminderTemplate
+                  key={index}
+                  data={item}
+                  dismissReminder={dismissReminder}
+                />
               ))}
               {initialNotifications.map((item: any, index: any) => (
-                <FlagTemplate key={index} data={item} />
+                <FlagTemplate
+                  key={index}
+                  data={item}
+                  dismissFlags={dismissFlags}
+                />
               ))}
               <>
                 {additionalReminders.map((item: any, index: any) => (
                   <ReminderTemplate
                     key={index + initialReminders.length}
                     data={item}
+                    dismissReminder={dismissReminder}
                   />
                 ))}
                 {additionalNotifications.map((item: any, index: any) => (
                   <FlagTemplate
                     key={index + initialNotifications.length}
                     data={item}
+                    dismissFlags={dismissFlags}
                   />
                 ))}
               </>
@@ -51,10 +63,18 @@ function Tabs({
           {activeTab === 'closed' && (
             <>
               {closedReminders.map((item: any, index: any) => (
-                <ReminderTemplate key={index} data={item} />
+                <ReminderTemplate
+                  key={index}
+                  data={item}
+                  dismissReminder={dismissReminder}
+                />
               ))}
               {closedNotifications.map((item: any, index: any) => (
-                <FlagTemplate key={index} data={item} />
+                <FlagTemplate
+                  key={index}
+                  data={item}
+                  dismissFlags={dismissFlags}
+                />
               ))}
             </>
           )}

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

@@ -2,7 +2,7 @@ import {
   SectionHeader,
   useApiHook,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Tabs from './Tabs';
 import styled from 'styled-components';
 import { useInfoType, useOrderDetails, useTabType } from '../store';
@@ -38,6 +38,10 @@ function Notification() {
   const routeId = OrderData?.order_routes?.route_id;
   const [, setRouteData] = useRouteDetails();
   const [orderCount] = useOrderNotify();
+  const [activeNotifications, setActiveNotifications] = useState([]);
+  const [closedNotifications, setCloseNotifications] = useState([]);
+  const [activeReminders, setActiveReminders] = useState([]);
+  const [closedReminders, setCloseReminders] = useState([]);
 
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
@@ -79,19 +83,47 @@ function Notification() {
     }
   });
 
-  const activeNotifications = notificationData.filter(
-    (item: any) => item.task_status_id !== 2
-  );
-  const closedNotifications = notificationData.filter(
-    (item: any) => item?.task_status_id === 2
-  );
+  useEffect(() => {
+    if (notificationData?.length > 0) {
+      setActiveNotifications(
+        notificationData?.filter((item: any) => item.task_status_id !== 2)
+      );
+      setCloseNotifications(
+        notificationData?.filter((item: any) => item?.task_status_id === 2)
+      );
+    }
+  }, [notificationData]);
 
-  const activeReminders = reminderData.filter(
-    (item: any) => item.status_id == 1 || item.status_id == 3
-  );
-  const closedReminders = reminderData.filter(
-    (item: any) => item?.status_id === 2
-  );
+  useEffect(() => {
+    if (reminderData?.length > 0) {
+      setActiveReminders(
+        reminderData?.filter(
+          (item: any) => item.status_id === 1 || item.status_id === 3
+        )
+      );
+      setCloseReminders(
+        reminderData?.filter((item: any) => item?.status_id === 2)
+      );
+    }
+  }, [reminderData]);
+
+  //dismiss notifcations
+  const dismissFlags = (id: any) => {
+    setActiveNotifications(prevFlags =>
+      prevFlags.filter((flags: any) => flags.id !== id)
+    );
+    setCloseNotifications(prevFlags =>
+      prevFlags.filter((flags: any) => flags.id !== id)
+    );
+  };
+  const dismissReminder = (id: any) => {
+    setActiveReminders(prevReminders =>
+      prevReminders.filter((reminder: any) => reminder.id !== id)
+    );
+    setCloseReminders(prevReminders =>
+      prevReminders.filter((reminder: any) => reminder.id !== id)
+    );
+  };
 
   const totalActiveCount =
     activeNotifications.length + activeReminders.length + orderCount;
@@ -136,6 +168,8 @@ function Notification() {
               closedNotifications={closedNotifications}
               activeReminders={activeReminders}
               closedReminders={closedReminders}
+              dismissReminder={dismissReminder}
+              dismissFlags={dismissFlags}
             />
           </TabsWrapper>
         ) : (

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/create-task-reminder/CreateReminderModal.tsx

@@ -21,6 +21,7 @@ import { StandardOptionsType } from '../../../../../common/radio-group/types';
 import dayjs from 'dayjs';
 import { isValid } from 'date-fns';
 import utc from 'dayjs/plugin/utc';
+import { useOrderId } from '../../../store';
 dayjs.extend(utc);
 dayjs.extend(isValid);
 
@@ -33,6 +34,7 @@ function CreateReminderModal() {
   const [subCategory] = useTaskTypeExtended();
   const [createReminder, setPayload] = useCreateReminderPayload();
   const [displayDate, setDisplayDate] = useState<any | null>();
+  const [orderId] = useOrderId();
 
   const handleSelectChange = () => console.log('testing log');
 
@@ -96,6 +98,7 @@ function CreateReminderModal() {
     setPayload(prevState => ({
       ...prevState,
       details: desc,
+      order_id: +orderId,
     }));
   };
 

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 = () => {