@bjsdistribution/dms-client-return 0.0.83 → 0.0.84

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

@@ -115,8 +115,8 @@ function CreateTaskModal() {
 
   // date change here
   const handleDateChange = (date: any | null) => {
-    if (date && isValid(date.$d)) {
-      const formattedDateTime = date.$d.toISOString();
+    if (date && isValid(date?.$d)) {
+      const formattedDateTime = date?.$d?.toISOString();
 
       setPayload((prevState: any) => ({
         ...prevState,
@@ -166,7 +166,7 @@ function CreateTaskModal() {
           <StyleContainer>
             <DatePickerWrap>
               <DatePicker
-                format="YYYY-MM-DD HH:mm"
+                format="DD/MM/YYYY HH:mm"
                 value={
                   createTask?.due_datetime
                     ? dayjs(createTask.due_datetime)

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

@@ -0,0 +1,149 @@
+import React, { useEffect } from 'react';
+import {
+  RadioButtonGroup,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import 'react-datepicker/dist/react-datepicker.css';
+import {
+  initialPayload,
+  useAllStaticData,
+  useCategoryData,
+  useCreateTaskPayload,
+  useDepartmentData,
+  useNotiifcationLabel,
+  useTaskLoading,
+  useTaskPriority,
+  useTaskTypeData,
+  useTaskTypeExtended,
+} from '../../store';
+import Loader from '../../../../order-daily-overview/header/loader/Loader';
+import { allTypes } from '../../types';
+import { ContentContainer } from './SharedComponents';
+import { useCurrentAction, useOrderDetails } from '../../../store';
+import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
+import styled from 'styled-components';
+import useFetchUnresolvedTasks from '../../hooks/useAllTaskData';
+import CreateTaskModal from './CreateTaskModal';
+import useCreateTask from '../../hooks/useCreateTask';
+import { CustomOptions } from '../../../../fakeData';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: allTypes[];
+}
+
+function TaskModal() {
+  const createTaskAPI = useCreateTask();
+  const [, setCurrentAction] = useCurrentAction();
+  const [createTask, setPayload] = useCreateTaskPayload();
+  const [loading, setLoading] = useTaskLoading();
+  const [staticData, setStaticData] = useAllStaticData();
+  const [, setPriority] = useTaskPriority();
+  const [, setTaskCategory] = useCategoryData();
+  const [, setTaskTypes] = useTaskTypeData();
+  const [, setTaskTypeExtended] = useTaskTypeExtended();
+  const [, setDepartmentData] = useDepartmentData();
+  const fetchData = useFetchUnresolvedTasks();
+  const [, setLabel] = useNotiifcationLabel();
+  const [orderDetails] = useOrderDetails();
+
+  // API Call
+  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
+    endpoint: `/tasks/getStaticData/all/`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    setLoading(true);
+    if (fetchedStaticData) {
+      setStaticData(fetchedStaticData.data);
+    }
+    setLoading(false);
+  }, [fetchedStaticData]);
+
+  //extracted types from whole static data
+  useEffect(() => {
+    if (staticData) {
+      setPriority(staticData?.map(data => data.tasks_priority).flat());
+      setTaskTypes(staticData?.map(data => data.tasks_types).flat());
+      setTaskCategory(staticData?.map(data => data.task_categories).flat());
+      setTaskTypeExtended(
+        staticData?.map(data => data.task_sub_categories).flat()
+      );
+      setDepartmentData(staticData?.map(data => data.department).flat());
+    }
+  }, [staticData]);
+
+  const handleRadioButtonChange = (event: any) => {
+    const selectedValue = event.target.value;
+    const isPrivateValue = selectedValue === 'private';
+    setPayload(prevState => ({
+      ...prevState,
+      is_private: isPrivateValue,
+    }));
+  };
+  const closeModal = () => {
+    setCurrentAction(undefined);
+    setPayload(initialPayload);
+    setLabel('');
+  };
+
+  const handleTaskSubmit = async () => {
+    setLoading(true);
+    await createTaskAPI([createTask]);
+    fetchData();
+    closeModal();
+  };
+
+  const isSubmitDisabled = () => {
+    const { description, due_datetime, task_type_id } = createTask;
+    return !description || !due_datetime || !task_type_id;
+  };
+
+  useEffect(() => {
+    if (orderDetails && orderDetails?.id && orderDetails?.customer_id) {
+      setPayload((prevState: any) => ({
+        ...prevState,
+        order_id: orderDetails?.id,
+        customer_id: orderDetails?.customer_id,
+        associated_object_id: 1,
+        associated_object_name: 'orders',
+      }));
+    }
+  }, []);
+
+  return (
+    <>
+      {loading && <Loader />}
+      <OrderModal
+        headerTitle={'CREATE TASK'}
+        onCloseHeader={closeModal}
+        onSubmit={handleTaskSubmit}
+        submitBtnTitle={'Save Task'}
+        isSubmitDisabled={isSubmitDisabled()}
+        footerActions={
+          <RadioButtonGroup
+            selectedValue={
+              createTask?.is_private == true ? 'private' : 'public'
+            }
+            options={CustomOptions}
+            onChange={handleRadioButtonChange}
+            heading={''}
+            required={false}
+          />
+        }
+      >
+        <ContentContainer>{<CreateTaskModal />}</ContentContainer>
+      </OrderModal>
+    </>
+  );
+}
+
+const OrderModal = styled(OrderActionModal)`
+  width: 70%;
+`;
+
+export default TaskModal;

package/src/components/order-view/order-actions/actions/remove-from-route/RemoveFromRoute.tsx

@@ -0,0 +1,91 @@
+// import { Alert } from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import { ApiResponse } from '../../../types';
+import {
+  useCurrentAction,
+  useGlobalStateHitAuditLog,
+  useLiveRecalling,
+  useOrderId,
+} from '../../../store';
+import { notification } from 'antd';
+
+function RemoveFromRoute() {
+  const [orderId] = useOrderId();
+  const [, setCurrentAction] = useCurrentAction();
+  const [, setRecalling] = useLiveRecalling();
+  const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
+
+  const { data: response, setShouldPerformAction: setAction } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/orders/${orderId}/remove_from_route/`,
+    method: 'POST',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    if (response && response?.data) {
+      notification.success({
+        message: 'Success',
+        description:
+          //@ts-ignore
+          response?.message || 'Order has been removed successfully',
+      });
+      setCurrentAction(undefined);
+      setRecalling(true);
+      setRecallAuditLog(true);
+    }
+    if (response?.data === null) {
+      notification.error({
+        message: 'Error',
+        description:
+          //@ts-ignore
+          response?.error_traceback ||
+          'An error has occurred. Please try again later.',
+      });
+      setCurrentAction(undefined);
+    }
+  }, [response]);
+
+  const saveButton = () => {
+    if (orderId) {
+      setAction(true);
+    }
+
+    setTimeout(() => {
+      setRecalling(false);
+      setRecallAuditLog(false);
+    }, 2000);
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+
+  return (
+    <CancelationModal
+      title="Remove from Route"
+      description="Are you sure, you want to remove Order from the route?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
+  );
+}
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default RemoveFromRoute;

package/src/components/order-view/order-actions/hooks/useCreateReminder.ts

@@ -26,14 +26,11 @@ function useCreateReminder() {
 
       if (!response.ok) {
         setLoading(false);
-        // alert('response is not ok');
         notification.error({
           message: 'Error',
           description: 'response is not ok',
         });
       }
-      // alert('Reminder Created Successfully');
-
       notification.success({
         message: 'Success',
         description: 'Reminder Created Successfully',
@@ -43,8 +40,6 @@ function useCreateReminder() {
       return json;
     } catch (err) {
       setLoading(false);
-      // alert(err);
-      // console.error('Error:', err);
 
       notification.error({
         message: 'Error',

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

@@ -11,14 +11,15 @@ import SendEmailModal from './actions/send-email/SendEmailModal';
 import ChangeCustomerAccModal from './actions/change-customer-account/ChangeCustomerAccModal';
 import HoldOrderModal from './actions/hold-order/HoldOrderModal';
 import LogFeedback from './actions/log-feedback/LogFeedback';
-import ChargeLog from './actions/charge-log';
 import UnholdOrder from './actions/unhold-order/UnholdOrder';
-import ViewReminderModal from '../view-reminder/ViewReminder';
 import TaskReminderModal from './actions/create-task-reminder';
 import OrderLock from './actions/order-lock';
 import ViewFlag from '../flags-action-modal/index';
 import ReleaseOrder from './actions/release-order/ReleaseOrder';
 import UncancelOrder from './actions/uncancel-order/UncancelOrder';
+import ClearBookingStatus from './actions/clear-booking-status/ClearBookingStatus';
+import RemoveFromRoute from './actions/remove-from-route/RemoveFromRoute';
+import TaskModal from './actions/create-task-reminder/TaskModal';
 
 function OrderActions() {
   const [currentAction] = useCurrentAction();
@@ -49,22 +50,22 @@ function OrderActions() {
         return <ChangeCustomerAccModal />;
       case 'hold-order':
         return <HoldOrderModal />;
-      case 'create-task':
+      case 'create-reminder':
         return <TaskReminderModal />;
+      case 'create-task':
+        return <TaskModal />;
       case 'log-feedback':
         return <LogFeedback />;
-      case 'charge-log':
-        return <ChargeLog />;
       case 'unhold-order':
         return <UnholdOrder />;
-      case 'view-reminder':
-        return <ViewReminderModal />;
       case 'order-lock':
         return <OrderLock />;
       case 'view-flag':
         return <ViewFlag />;
-      // case 'clear-date':
-      //   return <ClearBookingStatus />;
+      case 'clear-date':
+        return <ClearBookingStatus />;
+      case 'remove-from-route':
+        return <RemoveFromRoute />;
       default:
         return null;
     }

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

@@ -259,6 +259,12 @@ export function useRouteDetails() {
   return useAtom(routeDetails);
 }
 
+export const selectedCategoryIdAtom = atom<any>(null);
+export const selectedDocumentTypeAtom = atom<any>(null);
+export const selectedTypeAtom = atom<any>(null);
+export const selectedVisibilityAtom = atom<any>(null);
+export const setResourcesCall = atom<boolean>(false);
+
 export function useOrderNotify() {
   return useAtom(orderNotifyCount);
 }

package/src/components/order-view/order-details/expanded-content/orders-section/Carrier.tsx

@@ -1,22 +1,41 @@
-import { Input, Label } from '@bjsdistribution/dms-component-library';
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import CopyText from '../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../store';
+import { useSubContracterData } from '../../../../store';
 
 function Carrier() {
-  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [subContracterData] = useSubContracterData();
+
+  const carrierOptions = subContracterData?.map((carrier: any) => ({
+    label: carrier.name,
+    value: carrier.id,
+  }));
+
+  const onChange = (selectedOption: any) => {
+    setOrderDetails(prev => ({
+      ...prev,
+      carrier_id: selectedOption.value,
+    }));
+  };
+
   return (
     <Container>
       <Wrapper>
         <Label label="Carrier" htmlFor="carrier" />
-        <CopyText text="hello234e" />
       </Wrapper>
-      <Input
-        name="carrier"
-        type="text"
-        placeholder="Carrier"
-        disabled
-        style={{ borderRadius: '25PX' }}
+      <SelectDropdown
+        placeholder="Select Carrier"
+        inputId="CarrierDropdown"
+        openMenuOnFocus={false}
+        value={
+          carrierOptions.find(
+            (option: any) => option.value === orderDetails?.carrier_id
+          ) || null
+        }
+        options={carrierOptions}
+        onChange={onChange}
       />
     </Container>
   );

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

@@ -2,11 +2,9 @@ import { FormSection } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import Header from '../../common/Header';
-// import OrderNumber from './OrderNumber';
 import ConsignmentNumber from './ConsignmentNumber';
 import RecipientReference from './RecipientReference';
 import DepotDropdown from './Depot';
-// import ValueField from './ValueField';
 import Droptime from './Droptime';
 import DeliveryDate from './DeliveryDate';
 import Carrier from './Carrier';
@@ -32,7 +30,6 @@ function OrdersSection() {
           <ScheduleAfter />
         </GroupedInputs>
         <GroupedInputs>
-          {/* <ValueField OrdersSection={ Data}/> */}
           <Droptime />
         </GroupedInputs>
         <GroupedInputs>

package/src/components/order-view/order-resources/collapsed-content/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 function CollapsedContent() {
-  return <Font>CALL LOG</Font>;
+  return <Font>ORDER RESOURCES</Font>;
 }
 const Font = styled.div`
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 150% */
+  line-height: 24px; /* 150% */
 `;
 export default CollapsedContent;

package/src/components/order-view/order-resources/columns/Date.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
+import { formatDate } from '../../order-actions/utils';
 
 function Date(props: any) {
   const data = props?.row?.original.date;
   return (
     <RowContainer>
-      <Row>{data}</Row>
+      <Row>{formatDate(data)}</Row>
     </RowContainer>
   );
 }

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

@@ -1,12 +1,140 @@
-import React from 'react';
+import { ViewIcon } from '@bjsdistribution/dms-component-library';
+import Tippy from '@tippyjs/react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import { atom } from 'jotai';
+import { useOrderProductsResources } from '../../../store';
+import { notification } from 'antd';
+import DownIcon from '../../../../../assets/icons/DownIcon';
+
+export const selectedOrderIdAtom = atom<number[]>([]);
+
+interface ActionProps {
+  row: {
+    original: {
+      id: number;
+    };
+  };
+}
+
+function Action({ row }: ActionProps) {
+  const [orderResources] = useOrderProductsResources();
+  const [isDownloading, setIsDownloading] = useState(false);
+  const urlID = row?.original?.id;
+
+  const matchingResource = orderResources?.data?.find(
+    (resource: any) => resource.id === urlID
+  );
+
+  const resourceUrl = matchingResource?.url;
+
+  const handleView = () => {
+    if (resourceUrl) {
+      window.open(resourceUrl, '_blank');
+    }
+  };
+
+  const handleDownload = async () => {
+    if (!resourceUrl) {
+      notification.error({
+        message: 'Error',
+        description: 'Resource URL is not available',
+      });
+      return;
+    }
+
+    setIsDownloading(true); // disable button
+    notification.info({
+      message: 'Info',
+      description: `Download is in progress. Please wait`,
+    });
+
+    fetch(resourceUrl, {
+      method: 'GET',
+      headers: {},
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.blob();
+      })
+      .then(blob => {
+        // Create a temporary URL for the blob
+        const urlObject = window.URL.createObjectURL(blob);
+
+        // Create a temporary anchor element
+        const link = document.createElement('a');
+        link.href = urlObject;
+
+        // Generate a filename (you can customize this)
+        const filename = `Downloads`;
+        link.download = filename;
+
+        // Append to body, click, and remove
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // Revoke the blob URL
+        window.URL.revokeObjectURL(urlObject);
+
+        notification.success({
+          message: 'Success',
+          description: 'Document downloaded successfully.',
+        });
+
+        setIsDownloading(false); // enable button
+      })
+      .catch(error => {
+        console.error('Error downloading the document:', error);
+        notification.error({
+          message: 'Error',
+          description: 'Failed to download the document.',
+        });
+      })
+      .finally(() => {
+        setIsDownloading(false);
+      });
+  };
 
-function index() {
   return (
-    //TO DO ACTIONS FOR THE TABLES
-    <Actions></Actions>
+    <Actions>
+      <Row>
+        <Tippy content="View" placement="top" trigger="mouseenter">
+          <TippyContainer onClick={handleView}>
+            <ViewIcon style={{ cursor: 'pointer' }} />
+          </TippyContainer>
+        </Tippy>
+        <Tippy content="Download" placement="top" trigger="mouseenter">
+          <TippyContainer
+            onClick={isDownloading ? undefined : handleDownload}
+            style={{
+              cursor: isDownloading ? 'not-allowed' : 'pointer',
+              opacity: isDownloading ? 0.6 : 1,
+            }}
+          >
+            <DownIcon />
+          </TippyContainer>
+        </Tippy>
+      </Row>
+    </Actions>
   );
 }
+
+// Styled components for styling
 const Actions = styled.div``;
 
-export default index;
+const TippyContainer = styled.div`
+  display: inline-block;
+  margin: 7px;
+`;
+
+const Row = styled.div`
+  gap: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+export default Action;

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

@@ -2,3 +2,4 @@ export { default as Category } from './Category';
 export { default as Date } from './Date';
 export { default as Reference } from './Reference';
 export { default as Type } from './Type';
+export { default as Actions } from './actions/index';

package/src/components/order-view/order-resources/expanded-content/index.tsx

@@ -2,22 +2,22 @@ import React from 'react';
 import CollapsedContent from '../collapsed-content';
 import styled from 'styled-components';
 import CollapsableForm from '../../../../common/expand-collapse';
-// import DynamicTable from '../../DynamicTable';
-// import { orderResources, orderResourcesColumns } from '../../../fakeData';
-import { Alert } from '@bjsdistribution/dms-component-library';
+import DynamicTable from '../../DynamicTable';
+import { useOrderProductsResources } from '../../store';
+import { tableColumns } from '../helper';
 
 function Order() {
+  const [orderResources] = useOrderProductsResources();
+
+  const data =
+    orderResources?.data && orderResources?.data?.length > 0
+      ? orderResources?.data
+      : '';
+
   return (
     <Table>
       <CollapsableForm collapsedContent={<CollapsedContent />}>
-        {/* <DynamicTable columns={orderResourcesColumns} data={orderResources} /> */}
-        <Alert
-          description=""
-          onClose={() => {}}
-          type="warn"
-          title="No records found"
-          showOkButton={false}
-        />
+        <DynamicTable columns={tableColumns} data={data} />
       </CollapsableForm>
     </Table>
   );

package/src/components/order-view/order-resources/helper.ts

@@ -1,4 +1,4 @@
-import { Category, Date, Reference, Type } from './columns';
+import {  Actions, Category, Date, Reference, Type } from './columns';
 
 export const tableColumns = [
   {
@@ -25,4 +25,10 @@ export const tableColumns = [
     cell: Reference,
     enableSorting: false,
   },
+  {
+    header: 'Actions',
+    accessorKey: 'action',
+    cell: Actions,
+    enableSorting: false,
+  },
 ];