@bjsdistribution/dms-client-return 0.0.17 → 0.0.19

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

@@ -0,0 +1,289 @@
+import styled from 'styled-components';
+
+// Styled components
+export const StyledTableWrapper = styled.div`
+  overflow-x: auto;
+  max-height: calc(100vh - 290px);
+  scrollbar-width: none;
+  /* box-shadow: 0px 0px 30px 6px rgba(46, 45, 116, 0.05); */
+  &::-webkit-scrollbar {
+    width: 5px;
+    border-radius: 100px;
+    height: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #777;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #7b61ff;
+    border-radius: 100px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #7b61ff;
+  }
+`;
+
+export const StyledTable = styled.table`
+  border-spacing: 0 10px;
+  width: 100%;
+  padding: 10px;
+  thead {
+    tr {
+      border-radius: 40px;
+      border-spacing: 0 10px;
+      th {
+        color: #3a3630;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: normal;
+        padding: 5px 15px;
+        background: #f0f2f2;
+        border-right: none;
+        border-left: none;
+        text-align: left;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-width: 1px 0;
+        text-transform: capitalize;
+        &:first-child {
+          border-radius: 100px 0 0 100px;
+          border-left: 1px solid rgba(0, 0, 0, 0.08);
+        }
+        &:last-child {
+          border-radius: 0px 100px 100px 0;
+          border-right: 1px solid rgba(0, 0, 0, 0.08);
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      td {
+        color: #3a3630;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        padding: 12px 15px;
+        background: #fff;
+        border: 1px solid rgba(0, 0, 0, 0.08);
+        border-right: none;
+        border-left: none;
+      }
+      .link {
+        color: #09f;
+        font-family: Roboto;
+        font-weight: 400;
+        cursor: pointer;
+      }
+      td {
+        .flex {
+          display: flex;
+          gap: 4px;
+          align-items: center;
+        }
+        .overDue {
+          border-radius: 20px;
+          border: 1px solid #edebe8;
+          background: #fff;
+          padding: 4px 8px;
+          color: #e95252;
+          font-size: 12px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 16px;
+        }
+      }
+      &:nth-child(even) td {
+        background: #f6fbff;
+      }
+      td:first-child {
+        border-radius: 100px 0 0 100px;
+        border-left: 1px solid rgba(0, 0, 0, 0.08);
+      }
+      td:last-child {
+        border-radius: 0px 100px 100px 0;
+        border-right: 1px solid rgba(0, 0, 0, 0.08);
+      }
+      .emptyTd {
+        border-radius: 100px !important;
+      }
+      .flex {
+        display: flex;
+        flex-direction: row;
+        gap: 5px;
+        height: 29px;
+        align-items: center;
+      }
+
+      &.insideTable {
+        td {
+          border-radius: 0;
+          border: none;
+          &:last-child {
+            border-radius: 0;
+            border-right: none;
+          }
+        }
+        table {
+          border-spacing: 0;
+          width: 100%;
+          border-radius: 5px;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          overflow: hidden;
+          border-top-left-radius: 15px;
+          border-top-right-radius: 15px;
+          thead {
+            tr {
+              border-bottom: none;
+              th {
+                padding: 14px 20px;
+                text-align: left;
+                border-top: 0;
+                border-right: 0;
+                border-left: 0;
+                background: #f8fafc;
+                &:first-child {
+                  border-radius: 0;
+                  border-left: 1px solid rgba(0, 0, 0, 0.08);
+                  border-top-left-radius: 15px;
+                }
+                &:last-child {
+                  border-radius: 0;
+                }
+              }
+            }
+          }
+          tbody {
+            tr {
+              td {
+                padding: 14px 20px;
+                text-align: left;
+                border-bottom: 1px solid rgba(58, 54, 48, 0.15);
+                background: #fff;
+                > svg {
+                  transform: scale(1.5);
+                  background-color: #edebe8;
+                  border-radius: 20px;
+                  padding: 5px;
+                }
+                &:last-child {
+                  border-radius: 0;
+                  border-right: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    > svg {
+      transform: scale(1.5);
+      background-color: #edebe8;
+      border-radius: 20px;
+      padding: 5px;
+    }
+
+    .close-icon {
+      transform: scale(1.3);
+      background-color: transparent;
+      border-radius: 0;
+      padding: 0;
+    }
+  }
+`;
+
+export const EmptyDataContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export const Badge = styled.div`
+  div {
+    display: flex;
+    min-width: 85px;
+    padding: 6px 10px;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    border-radius: 22px;
+    font-family: 'Open Sans';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+  }
+`;
+
+export const BadgeStatus = styled.div`
+  &.pending {
+    background: #fff1d6;
+    color: #f4a503;
+  }
+
+  &.resolved {
+    background: rgba(41, 204, 106, 0.15);
+    color: #1f9254;
+  }
+
+  &.overdue {
+    background: rgba(233, 82, 82, 0.15);
+    color: var(--contextual-red, #e95252);
+  }
+`;
+
+export const ClearAll = styled.div`
+  border-radius: 20px;
+  border: 1px solid #edebe8;
+  background: #fff;
+  display: flex;
+  padding: 6px 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+
+  &.active {
+    background: #313130;
+    & > div {
+      color: #fff;
+    }
+  }
+`;
+export const StyledFilterBtnIcon = styled.div`
+  display: flex;
+  width: 24px;
+  height: 24px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 20px;
+  border: 1px solid #e2e0db;
+  background: #f1f5f6;
+  .cross {
+    position: relative;
+    &:after {
+      display: inline-block;
+      content: 'X';
+      font-style: normal;
+      font-size: 14px;
+      color: #000;
+    }
+  }
+`;
+export const StyledFilterBtnLabel = styled.div`
+  color: #6a7378;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  white-space: nowrap;
+`;

package/src/components/order-view/order-actions/actions/create-task-reminder/CreateReminderModal.tsx

@@ -6,7 +6,6 @@ import {
   useTaskTypeExtended,
 } from '../../store';
 import { priorityData, transformOption } from '../../utils';
-import { isValid } from 'date-fns';
 import {
   DoubleDropdownContainer,
   FormRow,
@@ -20,6 +19,10 @@ import { TextArea } from '@bjsdistribution/dms-component-library';
 import { DatePicker, Select } from 'antd';
 import { StandardOptionsType } from '../../../../../common/radio-group/types';
 import dayjs from 'dayjs';
+import { isValid } from 'date-fns';
+import utc from 'dayjs/plugin/utc';
+dayjs.extend(utc);
+dayjs.extend(isValid);
 
 function CreateReminderModal() {
   const [CategoryData] = useCategoryData();
@@ -29,8 +32,9 @@ function CreateReminderModal() {
   const [, setSelectedCategory] = useState(null);
   const [subCategory] = useTaskTypeExtended();
   const [createReminder, setPayload] = useCreateReminderPayload();
+  const [displayDate, setDisplayDate] = useState<any | null>();
 
-  const handleSelectChange = () => console.log('hello');
+  const handleSelectChange = () => console.log('testing log');
 
   //options for department
   const departmentOptions = departmentData.map((option: any) =>
@@ -54,10 +58,15 @@ function CreateReminderModal() {
     }));
   };
 
-  // date change here
-  const handleDateChange = (date: any | null) => {
-    if (date && isValid(date.$d)) {
-      const formattedDateTime = date.$d.toISOString();
+  const handleDateChange = (date: any | null, dateString: any | null) => {
+    if (dateString && date && isValid(date?.$d)) {
+      setDisplayDate(date?.$d?.toISOString());
+
+      const localDate = dayjs(dateString, 'DD/MM/YYYY HH:mm A');
+
+      const formattedDateTime = localDate
+        .format('YYYY-MM-DDTHH:mm:ss.SSS')
+        .concat('Z');
 
       setPayload((prevState: any) => ({
         ...prevState,
@@ -185,11 +194,35 @@ function CreateReminderModal() {
           <StyleContainer>
             <DatePickerWrap>
               <DatePicker
-                format="YYYY-MM-DD HH:mm"
-                value={createReminder?.due ? dayjs(createReminder.due) : null}
+                format="DD/MM/YYYY HH:mm A"
+                value={displayDate ? dayjs(displayDate) : null}
                 onChange={handleDateChange}
                 placeholder="Select Date & Time"
                 showTime={{ defaultValue: dayjs('00:00', 'HH:mm') }}
+                disabledDate={current =>
+                  current && current < dayjs().startOf('day')
+                }
+                disabledTime={date => {
+                  if (date && date.isSame(dayjs(), 'day')) {
+                    const currentHour = dayjs().hour();
+                    const currentMinute = dayjs().minute();
+                    return {
+                      disabledHours: () =>
+                        Array.from({ length: 24 }, (_, i) => i).filter(
+                          hour => hour < currentHour
+                        ),
+                      disabledMinutes: selectedHour => {
+                        if (selectedHour === currentHour) {
+                          return Array.from({ length: 60 }, (_, i) => i).filter(
+                            minute => minute < currentMinute
+                          );
+                        }
+                        return [];
+                      },
+                    };
+                  }
+                  return {};
+                }}
               />
             </DatePickerWrap>
           </StyleContainer>

package/src/components/order-view/order-actions/actions/create-task-reminder/index.tsx

@@ -1,29 +1,18 @@
-import React, { useEffect, useState } from 'react';
-import {
-  Alert,
-  RadioButtonGroup,
-  useApiHook,
-} from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import { useApiHook } from '@bjsdistribution/dms-component-library';
 import 'react-datepicker/dist/react-datepicker.css';
-import CustomSwitchSelector from '../../../../../common/custom-switch';
-import { CustomOptions } from '../../../../fakeData';
 import CreateReminder from './CreateReminderModal';
-import CreateTask from './CreateTaskModal';
 import {
-  initialPayload,
   initialValue,
   useAllStaticData,
   useCategoryData,
   useCreateReminderPayload,
-  useCreateTaskPayload,
   useDepartmentData,
-  useNotiifcationLabel,
   useTaskLoading,
   useTaskPriority,
   useTaskTypeData,
   useTaskTypeExtended,
 } from '../../store';
-import useCreateTask from '../../hooks/useCreateTask';
 import Loader from '../../../../order-daily-overview/header/loader/Loader';
 import useCreateReminder from '../../hooks/useCreateReminder';
 import { allTypes } from '../../types';
@@ -44,14 +33,10 @@ interface ApiResponse {
 }
 
 function TaskReminderModal() {
-  const createTaskAPI = useCreateTask();
   const createReminderAPI = useCreateReminder();
   const [, setCurrentAction] = useCurrentAction();
-  const [modalType, setModalTypeState] = useState<string>('task');
-  const handleSwitchChange = (newValue: any) => setModalTypeState(newValue);
-  const [createTask, setPayload] = useCreateTaskPayload();
+  // const [modalType, setModalTypeState] = useState<string>('task');
   const [createReminder, setReminderPayload] = useCreateReminderPayload();
-  const [label] = useNotiifcationLabel();
   const [loading, setLoading] = useTaskLoading();
   const [staticData, setStaticData] = useAllStaticData();
   const [, setPriority] = useTaskPriority();
@@ -89,30 +74,10 @@ function TaskReminderModal() {
     }
   }, [staticData]);
 
-  const handleRadioButtonChange = (event: any) => {
-    const selectedValue = event.target.value;
-    const isPrivateValue = selectedValue === 'private';
-    setPayload(prevState => ({
-      ...prevState,
-      is_private: isPrivateValue,
-    }));
-  };
-
   const closeModal = () => {
     setCurrentAction(undefined);
-    if (modalType === 'task') {
-      setPayload(initialPayload);
-    } else {
-      setReminderPayload(initialValue);
-    }
-  };
 
-  const handleTaskSubmit = async () => {
-    setLoading(true);
-    await createTaskAPI([createTask]);
-    fetchData();
-    ReminderData();
-    closeModal();
+    setReminderPayload(initialValue);
   };
 
   const handleReminderSubmit = async () => {
@@ -124,13 +89,9 @@ function TaskReminderModal() {
   };
 
   const isSubmitDisabled = () => {
-    if (modalType === 'task') {
-      const { description, due_datetime, task_type_id } = createTask;
-      return !description || !due_datetime || !task_type_id;
-    } else if (modalType === 'reminder') {
-      const { details, due } = createReminder;
-      return !details || !due;
-    }
+    const { details, due } = createReminder;
+    return !details || !due;
+
     return true;
   };
 
@@ -138,46 +99,13 @@ function TaskReminderModal() {
     <>
       {loading && <Loader />}
       <OrderModal
-        headerTitle={modalType === 'task' ? 'CREATE TASK' : 'CREATE REMINDER'}
+        headerTitle={'CREATE REMINDER'}
         onCloseHeader={closeModal}
-        onSubmit={
-          modalType === 'task' ? handleTaskSubmit : handleReminderSubmit
-        }
-        submitBtnTitle={modalType === 'task' ? 'Save Details' : 'Save Reminder'}
-        headerActions={
-          <CustomSwitchSelector onSwitchChange={handleSwitchChange} />
-        }
+        onSubmit={handleReminderSubmit}
+        submitBtnTitle={'Save Reminder'}
         isSubmitDisabled={isSubmitDisabled()}
-        footerActions={
-          modalType === 'task' && (
-            <RadioButtonGroup
-              selectedValue={
-                createTask.is_private == true ? 'private' : 'public'
-              }
-              options={CustomOptions}
-              onChange={handleRadioButtonChange}
-              heading={''}
-              required={false}
-            />
-          )
-        }
       >
-        <ContentContainer>
-          {modalType == 'task' ? <CreateTask /> : <CreateReminder />}
-
-          {modalType == 'task' ? (
-            <Alert
-              type="info"
-              title={`A FLEX task will be raised for ${label} Team`}
-              description=""
-              showOkButton={false}
-              showCloseIcon={false}
-              onClose={() => {}}
-            />
-          ) : (
-            ''
-          )}
-        </ContentContainer>
+        <ContentContainer>{<CreateReminder />}</ContentContainer>
       </OrderModal>
     </>
   );

package/src/components/order-view/order-actions/actions/hold-order/HoldOrderModal.tsx

@@ -1,33 +1,40 @@
 import React, { useEffect, useState } from 'react';
-import { AntSelect, useApiHook } from '@bjsdistribution/dms-component-library';
+import {
+  AntSelect,
+  Label,
+  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,
   HoldDatePickerWrap,
   HoldRow,
-  Label,
   SplitText,
 } from '../modalstyle';
-import { DatePicker, DatePickerProps } from 'antd';
+import { DatePicker, DatePickerProps, notification } from 'antd';
 import dayjs from 'dayjs';
-import { ApiResponse } from '../../../types';
+import { ApiResponse, OrdersType } from '../../../types';
+import { useLoading } from '../../../../order-daily-overview/store/store';
 
 function HoldOrderModal() {
   const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
-
-  const onClose = () => {
-    setCurrentAction(undefined);
-  };
-
+  const [, setLoading] = useLoading();
   const [orderStaticData] = useOrderStaticData();
   const [selectedDate, setDate] = useState<Date | string | null>(null);
   const [holdReason, setHoldReason] = useState<string | undefined>(undefined);
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
 
   const onHoldReasonOptions = orderStaticData?.onhold_reasons?.map(
     (item: any) => {
@@ -49,12 +56,52 @@ function HoldOrderModal() {
     performAction: false,
   });
 
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
   useEffect(() => {
-    if (response && response?.data) {
+    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);
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
   }, [response]);
 
+  const onClose = () => {
+    setCurrentAction(undefined);
+  };
+
   const onChangeHold = (value: string) => {
     setHoldReason(value);
   };
@@ -82,14 +129,14 @@ function HoldOrderModal() {
       onCloseHeader={onClose}
       onSubmit={onSubmitHold}
       showAdditionalInfo
-      infoText="632801 (OFS)"
+      infoText={infoText}
       submitBtnTitle="Save Details"
       isSubmitDisabled={!showSubmitBtn}
     >
       <HoldContentContainer>
         <SplitText>
           <HoldRow>
-            <Label>Delivery Date</Label>
+            <Label label="Delivery Date" required />
             <HoldDatePickerWrap>
               <DatePicker
                 needConfirm
@@ -103,9 +150,9 @@ function HoldOrderModal() {
           </HoldRow>
 
           <HoldRow>
-            <Label>Hold Reason</Label>
+            <Label label="Hold Reason" required />
             <AntSelect
-              options={onHoldReasonOptions}
+              options={onHoldReasonOptions || []}
               placeholder="Select Hold Reason"
               onChange={onChangeHold}
               disabled={false}