@bjsdistribution/dms-client-return 0.0.82 → 0.0.83

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.82",
+  "version": "0.0.83",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -528,7 +528,7 @@ export const StyledTable = styled.table`
 export const StyledTableWrapper = styled.div`
   max-height: 60vh;
   overflow-x: auto;
-  min-height: 50vh;
+  // min-height: 50vh;
 
   .fortables {
     max-height: 60vh;

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

@@ -34,6 +34,7 @@ import { notification } from 'antd';
 // import { useAssignData } from '../store';
 import DetailsFilters from './details-filters/DetailsFilters';
 import { useVisibilityData } from '../store';
+import Notification from './notification';
 
 interface ApiResponse {
   message: string;
@@ -354,7 +355,9 @@ function OrderView() {
   return (
     <MainContainer>
       <GeneralHeader />
+
       <DetailsFilters />
+      <Notification />
       <OrderDetails />
       <ProductsInfo />
       <SplitLayout>

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/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/store.ts

@@ -107,7 +107,7 @@ const resolvedModalPayload = atom<SingleResolvedPayload>(resolvedValue);
 
 const routeDetails = atom<any>({});
 
-const orderNotifyCount = atom<number>(2);
+const orderNotifyCount = atom<number>(0);
 
 //errors
 const errorMessage = atom<any>({
@@ -178,7 +178,6 @@ export function useSelectedSplit() {
   return useAtom(selectedSplitList);
 }
 
-
 export function useLoadingText() {
   return useAtom(loadingText);
 }

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

@@ -10,7 +10,8 @@ import { useOrderId, useOrderStaticData, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
 import Loader from '../../../order-daily-overview/header/loader/Loader';
 import { notification } from 'antd';
-import { useSelectedProducts } from '../../../store';
+import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
+import styled from 'styled-components';
 
 const ReturnProductTable = () => {
   const [selectedProducts, setSelectedProducts] = useSelectedProducts();
@@ -18,6 +19,7 @@ const ReturnProductTable = () => {
   const [productData, setProductData] = useProductDetails();
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [orderId] = useOrderId();
+  const [returnOrderData] = useNewReturnOrderData();
 
   const handleActionClick = (id: number) => {
     setSelectedRowId(id);
@@ -93,7 +95,8 @@ const ReturnProductTable = () => {
     return matchedReason ? matchedReason.label : 'N/A';
   };
 
-  const disableCheckbox = productData?.length == 0;
+  const disableCheckbox =
+    productData?.length == 0 || returnOrderData?.length == 0;
 
   return (
     <div>
@@ -103,7 +106,7 @@ const ReturnProductTable = () => {
           <thead>
             <tr>
               <th className="emailproductsCheckbox">
-                <Checkbox
+                <StyleCheckbox
                   disabled={disableCheckbox}
                   checked={selectAll}
                   onChange={handleSelectAll}
@@ -123,9 +126,10 @@ const ReturnProductTable = () => {
               productData?.map((product: any) => (
                 <tr key={product.id}>
                   <td>
-                    <Checkbox
+                    <StyleCheckbox
                       checked={selectedProducts?.includes(product?.id)}
                       onChange={() => handleSelectProduct(product?.id)}
+                      disabled={disableCheckbox}
                     />
                   </td>
                   <td>{product?.orders_products_stock?.location || 'N/A'}</td>
@@ -164,4 +168,12 @@ const ReturnProductTable = () => {
   );
 };
 
+const StyleCheckbox = styled(Checkbox)`
+  &:disabled {
+    background-color: gray;
+    cursor: not-allowed;
+    opacity: -0.4;
+  }
+`;
+
 export default ReturnProductTable;

package/src/components/order-view/view-reminder/reminder-styles.tsx

@@ -10,6 +10,7 @@ export const ReferenceContainer = styled.div`
   border-radius: 40px;
   border: 1px solid rgba(0, 0, 0, 0.1);
   background: #fff;
+  margin-top: 15px;
 `;
 export const InnerContainer = styled.div`
   display: flex;

package/src/components/store.ts

@@ -76,6 +76,8 @@ const locationOptions = atom<any[]>([]);
 
 const selectedProductsMove = atom<any>([]);
 
+const newReturnOrderData = atom<any>([]);
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -197,6 +199,10 @@ export function useSelectedData() {
   return useAtom(selectedAssignee);
 }
 
+export function useNewReturnOrderData() {
+  return useAtom(newReturnOrderData);
+}
+
 export {
   useAtom,
   useFilter,
@@ -226,5 +232,5 @@ export {
   useActionTypeOptions,
   useLocationOptions,
   useSelectedProducts,
-  useVisibilityData
+  useVisibilityData,
 };