@bjsdistribution/dms-client-return 0.0.94-prod → 0.0.95-prod

package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx

@@ -1,25 +1,50 @@
-import {
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
+import {
+  useCurrentAction,
+  useOrderDetails,
+  useOrderId,
+  // useOrderId,
+  useStatusDetails,
+} from '../../../store';
 import { optionsMenu } from '../../../fakedata';
-import { useCurrentAction, useOrderDetails } from '../../../store';
+import {
+  useCreateReminderPayload,
+  useCreateTaskPayload,
+} from '../../../order-actions/store';
+import { Dropdown, Space } from 'antd';
+import ArrowDownIcon from '../../../../../assets/icons/ArrowDownIcon';
 
 function Options() {
   const [, setCurrentAction] = useCurrentAction();
+  const [orderId] = useOrderId();
+  const [, setReminderPayload] = useCreateReminderPayload();
+  const [, setTaskPayload] = useCreateTaskPayload();
+  const [orderStatus] = useStatusDetails();
+  const [orderDetails] = useOrderDetails();
 
   const handleSelectChange = (selectedOption: any) => {
-    setCurrentAction(selectedOption.value);
+    setCurrentAction(selectedOption);
+
+    if (selectedOption === 'create-reminder') {
+      setReminderPayload((prevState: any) => ({
+        ...prevState,
+        order_id: orderId,
+      }));
+    } else if (selectedOption === 'create-task') {
+      setTaskPayload((prevState: any) => ({
+        ...prevState,
+        order_id: orderId,
+      }));
+    }
   };
 
-  const [orderDetails] = useOrderDetails();
+  const isReleased = orderStatus[0]?.released;
+  const isRouted = orderStatus[0]?.routed && orderDetails?.order_routes?.id;
   const isOrderOnHold = orderDetails?.status === 'OO';
   const isOrderCancelled = orderDetails?.status === 'CO';
 
-  const filteredOptions = optionsMenu.filter(option => {
+  const filteredOptions = optionsMenu?.filter(option => {
     let shouldExclude = false;
 
     if (isOrderOnHold && option.value === 'hold-order') {
@@ -33,53 +58,59 @@ function Options() {
         shouldExclude = true;
       }
     }
+    if (!isReleased && option.value === 'unrelease-order') {
+      shouldExclude = true;
+    }
     if (!isOrderOnHold && option.value === 'unhold-order') {
       shouldExclude = true;
     }
 
+    if (isOrderOnHold && option.value === 'confirm-order') {
+      shouldExclude = true;
+    }
+
+    if (!isRouted && option.value === 'log-service-refusal') {
+      shouldExclude = true;
+    }
+
     return !shouldExclude;
   });
 
+  const menuItems = {
+    items: filteredOptions?.map(option => ({
+      key: option.value,
+      label: (
+        <div onClick={() => handleSelectChange(option.value)}>
+          {option.label}
+        </div>
+      ),
+    })),
+  };
+
   return (
     <Option>
-      <SelectDropdown
-        placeholder="OPTIONS"
-        inputId="bjsmenu"
-        options={filteredOptions}
-        onChange={handleSelectChange}
-        isSearchable={false}
-        styles={{
-          ...dropdownStyles,
-          ...filterDropdownStyles,
-          container: styles => ({
-            ...styles,
-            cursor: 'pointer',
-          }),
-          menu: styles => ({
-            ...styles,
-            top: '113%',
-            borderRadius: '5px',
-            width: 'max-content',
-            cursor: 'pointer',
-          }),
-          control: styles => ({
-            ...styles,
-            width: '105px',
-            boxShadow: 'none',
-            borderColor: 'transparent',
-            cursor: 'pointer',
-            backgroundColor: 'transparent',
-            '&:hover': {
-              boxShadow: 'none',
-              borderColor: 'transparent',
-            },
-          }),
-        }}
-        value="OPTIONS"
-      />
+      <Dropdown menu={menuItems} trigger={['hover']}>
+        <a onClick={e => e.preventDefault()} style={{ cursor: 'pointer' }}>
+          <StyledSpace>
+            OPTIONS
+            <ArrowDownIcon fill={'#f0f2f2'} />
+          </StyledSpace>
+        </a>
+      </Dropdown>
     </Option>
   );
 }
 const Option = styled.div``;
 
+const StyledSpace = styled(Space)`
+  .ant-space-item {
+    color: #6a7378;
+    text-align: center;
+    font-family: Lato;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+  }
+`;
+
 export default Options;

package/src/components/order-view/fakedata.ts

@@ -30,21 +30,22 @@ export const optionsMenu = [
     label: 'Clear Booking Status',
     value: 'clear-date',
   },
-  // { label: 'Charge Log', value: 'charge-log' },
+  { label: 'Charge Log', value: 'charge-log' },
+  { label: 'Force Debrief', value: 'force-debrief' },
 ];
 
 export const PrintMenu = [
   {
-    label: 'Return Notes',
-    value: 'return-notes',
+    label: 'Proof of Delivery',
+    value: 'proofofdelivery',
   },
   {
-    label: 'Product Labels',
-    value: 'product-labels',
+    label: 'Return Labels',
+    value: 'returnlabels',
   },
   {
     label: 'Return Cover Notes',
-    value: 'return-cover-notes',
+    value: 'returncovernote',
   },
 ];
 

package/src/components/order-view/flags-action-modal/Actions.tsx

@@ -1,46 +1,67 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
+import { useFlagById, useUpdateTask } from '../order-actions/store';
+import { useCurrentAction } from '../store';
+import Tippy from '@tippyjs/react';
 import {
   Button,
   RadioButtonGroup,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
-import { useSingleFlagData, useSinglePayload } from '../order-actions/store';
-import { useCurrentAction } from '../store';
-import Tippy from '@tippyjs/react';
-import { notification } from 'antd';
 import { ApiResponse } from '../types';
+import { notification } from 'antd';
 
-function ActionSection({ callUnresolvedTaskApi }: any) {
+export const FlagsFilter = [
+  {
+    label: 'Private',
+    value: 'private',
+  },
+  {
+    label: 'Public',
+    value: 'public',
+  },
+];
+
+function SaveDetails({ callUnresolvedTaskApi, setTasksData }: any) {
   const [, setCurrentAction] = useCurrentAction();
-  const [payload] = useSinglePayload();
-  const [dataArray] = useSingleFlagData();
+  const [taskPayload] = useUpdateTask();
+
+  const [flagById] = useFlagById();
 
   //flag PUT API
   const { fetchData: callFlagUpdateAPI } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `/tasks/update/`,
+    endpoint: `/v1/task/update/`,
     method: 'PUT',
   });
 
   const onSubmit = async () => {
-    let response = (await callFlagUpdateAPI({
-      payload: [payload],
+    const response = (await callFlagUpdateAPI({
+      payload: [taskPayload],
     })) as {
       code: number | null;
-      error?: string | null | undefined;
+      error?: string | null;
+      message?: string;
+      data?: any;
       [key: string]: any;
     };
-    if (response.code == 200 && response.data) {
+
+    if (response.code === 200 && response?.data) {
       notification.success({
         message: 'Success',
         description: `${response.message}`,
       });
+
       setCurrentAction(undefined);
-      await callUnresolvedTaskApi();
+
+      const unresolvedResponse = await callUnresolvedTaskApi();
+      if (unresolvedResponse && unresolvedResponse?.data) {
+        setTasksData(unresolvedResponse?.data);
+      }
     }
-    if (response?.code == null && response.error) {
+
+    if (response?.code == null && response?.error) {
       return notification.error({
         message: 'Failure',
         description: `${response.error}`,
@@ -52,7 +73,8 @@ function ActionSection({ callUnresolvedTaskApi }: any) {
     setCurrentAction(undefined);
   };
 
-  const isDisabled = dataArray.task_status_id === 2;
+  const isDisabled = flagById?.status === 'SD';
+
   return (
     <Wrapper>
       <Tippy
@@ -79,17 +101,17 @@ function ActionSection({ callUnresolvedTaskApi }: any) {
 }
 
 function RadioButtonsSection() {
-  const [dataArray] = useSingleFlagData();
-  const [payload, setPayload] = useSinglePayload();
+  const [flagById] = useFlagById();
+  const [taskPayload, setPayload] = useUpdateTask();
   const [, setNewValue] = useState<boolean | string>(false);
 
   useEffect(() => {
-    const defaultSelectedValue = dataArray?.is_private ? false : true;
+    const defaultSelectedValue = flagById?.is_private ? false : true;
     setPayload({
-      ...payload,
+      ...taskPayload,
       is_private: defaultSelectedValue,
     });
-  }, [dataArray?.is_private]);
+  }, [flagById?.is_private]);
 
   const handleRadioButtonChange = (event: any) => {
     const value = event.target.value;
@@ -103,7 +125,7 @@ function RadioButtonsSection() {
 
     setNewValue(value);
     setPayload({
-      ...payload,
+      ...taskPayload,
       is_private: booleanValue,
     });
   };
@@ -111,8 +133,8 @@ function RadioButtonsSection() {
   return (
     <DropDowns>
       <RadioButtonGroup
-        selectedValue={payload.is_private == false ? 'public' : 'private'}
-        options={[]}
+        selectedValue={taskPayload?.is_private == false ? 'public' : 'private'}
+        options={FlagsFilter}
         onChange={handleRadioButtonChange}
         heading={''}
         required={false}
@@ -124,11 +146,15 @@ function RadioButtonsSection() {
 const ButtonWrapper = styled.div`
   display: flex;
   gap: 15px;
+  margin-right: 15px;
 `;
 
 const SaveButton = styled(Button)``;
 
-const CancelButton = styled(Button)``;
+const CancelButton = styled(Button)`
+  background-color: white;
+  color: #3a3630;
+`;
 
 const DropDowns = styled.div`
   display: flex;
@@ -144,4 +170,4 @@ const TooltipContent = styled.div`
 
 const Wrapper = styled.div``;
 
-export { ActionSection, RadioButtonsSection };
+export { SaveDetails, RadioButtonsSection };

package/src/components/order-view/flags-action-modal/DetailSection.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Label } from '@bjsdistribution/dms-component-library';
-import { useSingleFlagData } from '../order-actions/store';
+import { useFlagById } from '../order-actions/store';
 
 function DetailSection() {
-  const [dataArray] = useSingleFlagData();
+  const [flagById] = useFlagById();
 
   let orderColumnData =
-    dataArray?.order_data?.order_recipient?.recipient_name?.toUpperCase() +
+    flagById?.order_data?.order_recipient?.recipient_name?.toUpperCase() +
     ', ' +
-    dataArray?.order_data?.order_recipient?.postcode;
+    flagById?.order_data?.order_recipient?.postcode;
 
   return (
     <Detail>
       <Flex>
         <StyledLabel label="Reference" />
-        <Ref>{dataArray?.id}</Ref>
+        <Ref>{flagById?.id}</Ref>
       </Flex>
       <Flex>
         <StyledLabel label="Order" />

package/src/components/order-view/flags-action-modal/Dropdowns.tsx

@@ -1,122 +1,108 @@
-import {
-  Label,
-  SelectDropdown,
-  dropdownStyles,
-  filterDropdownStyles,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
+import React, { useMemo } from 'react';
 import styled from 'styled-components';
+import { Label } from '@bjsdistribution/dms-component-library';
+import StatusIndicator from './StatusIndicator';
 import {
-  useSingleFlagData,
-  useSinglePayload,
-  useTaskPriority,
-  useTaskTypeData,
+  useFlagById,
+  useStaticData,
+  useUpdateTask,
 } from '../order-actions/store';
-import { formatDate, transformOption } from '../order-actions/utils';
-import StatusIndicator from './StatusIndicator';
+import { formatDate, priorityData } from '../order-actions/utils';
+import { Select } from 'antd';
 
 function ButtonsSection() {
-  const [payload, setPayload] = useSinglePayload();
-  const [priorityData] = useTaskPriority();
-  const [dataArray] = useSingleFlagData();
-  const [taskTypes] = useTaskTypeData();
+  const [staticData] = useStaticData();
+  const [flagById] = useFlagById();
+  const [taskPayload, setTaskPayload] = useUpdateTask();
 
-  // Options for task types
-  const selectTaskTypeOptions = taskTypes?.map((option: any) =>
-    transformOption(option, 'type')
-  );
+  const orderFlagTypes = staticData?.[0]?.order_flag_types || [];
 
-  //options for priority
-  const priorityOptions = priorityData?.map((option: any) =>
-    transformOption(option, 'name')
+  const taskTypeOptions = useMemo(
+    () =>
+      orderFlagTypes?.map((item: any) => ({
+        label: item?.type,
+        value: item?.id,
+      })),
+    [orderFlagTypes]
   );
 
-  //functions to change value
-  const onFlagtypeChange = (event: any) => {
-    setPayload({ ...payload, task_type_id: event.value });
+  const getPriorityOptions = (staticData: any) => {
+    return staticData?.[0]?.priorities?.map((option: any) => {
+      const colorMatch = priorityData?.find(p => p.id === option.id);
+      return {
+        label: option.name,
+        value: option.id,
+        color: colorMatch?.color || '#ccc',
+      };
+    });
+  };
+  const priorityOptions = getPriorityOptions(staticData);
+
+  const handleTaskTypeChange = (value: number) => {
+    const selectedType =
+      orderFlagTypes.find((type: any) => type.id === value)?.type || '';
+    setTaskPayload(prev => ({ ...prev, flag_type: selectedType }));
   };
 
-  const onPriorityChange = (event: any) => {
-    setPayload({ ...payload, task_priority_id: event.value });
+  const handlePriorityChange = (value: number) => {
+    setTaskPayload((prev: any) => ({
+      ...prev,
+      priority: value,
+    }));
   };
 
-  const isStatusShow = dataArray?.task_status_id;
+  const selectedTypeId = useMemo(
+    () =>
+      orderFlagTypes.find((type: any) => type.type === taskPayload?.flag_type)
+        ?.id ||
+      flagById?.flag_type ||
+      null,
+    [orderFlagTypes, taskPayload, flagById]
+  );
+
+  const isResolved = flagById?.status !== 'AD';
+
+  const resolvedText = `Resolved on ${formatDate(
+    flagById?.resolved_at || 'N/A'
+  )} by ${flagById?.resolved_by || 'N/A'}`;
 
   return (
     <Buttons>
       <Flex>
         <Label label="Type" />
-        <SelectDropdown
-          styles={{
-            ...dropdownStyles,
-            ...filterDropdownStyles,
-            control: styles => ({
-              ...styles,
-              cursor: 'pointer',
-              padding: '0px',
-              width: '170px',
-              minHeight: '40px',
-            }),
-            container: styles => ({
-              ...styles,
-              padding: '0px',
-            }),
-          }}
-          placeholder="Flag Type"
-          options={selectTaskTypeOptions}
-          value={selectTaskTypeOptions.filter(
-            (f: any) => f.value === payload.task_type_id
-          )}
-          onChange={onFlagtypeChange}
+        <StyledAntSelect
+          options={taskTypeOptions}
+          placeholder="Select Type"
+          onChange={handleTaskTypeChange}
+          value={selectedTypeId}
         />
       </Flex>
       <Flex>
         <Label label="Priority" />
-        <SelectDropdown
-          styles={{
-            ...dropdownStyles,
-            ...filterDropdownStyles,
-            control: styles => ({
-              ...styles,
-              cursor: 'pointer',
-              padding: '0px',
-              width: '170px',
-              minHeight: '40px',
-            }),
-            container: styles => ({
-              ...styles,
-              padding: '0px',
-            }),
-          }}
-          placeholder="Priority"
+        <StyledAntSelect
           options={priorityOptions}
-          value={priorityOptions.filter(
-            (f: any) => f.value === payload.task_priority_id
-          )}
-          onChange={onPriorityChange}
+          placeholder="Select Type"
+          onChange={handlePriorityChange}
+          value={taskPayload?.priority || flagById?.priority}
         />
       </Flex>
-      <>
-        {isStatusShow === 1 ? (
-          <Flex>
-            <Label label="Status" />
-            <StatusIndicator text="Unresolved" status="AD" />
-          </Flex>
+      <Flex>
+        <Label label="Status" />
+        {isResolved ? (
+          <StatusIndicator text={resolvedText} status="SD" />
         ) : (
-          <Flex>
-            <Label label="Status" />
-            <StatusIndicator
-              text={`Resolved on ${formatDate(dataArray?.resolved_at)} by ${
-                dataArray?.resolved_by
-              }`}
-              status="SD"
-            />
-          </Flex>
+          <StatusIndicator text="Unresolved" status="AD" />
         )}
-      </>
+      </Flex>
     </Buttons>
   );
 }
+export const StyledAntSelect: any = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+`;
 
 const Buttons = styled.div`
   display: flex;

package/src/components/order-view/flags-action-modal/Header.tsx

@@ -6,13 +6,13 @@ import {
   CrossIcon,
   useAxios,
 } from '@bjsdistribution/dms-component-library';
-import { useResolvedPayload, useSingleFlagData } from '../order-actions/store';
+import { useResolvedPayload, useFlagById } from '../order-actions/store';
 import { useCurrentAction } from '../store';
-import { notification } from 'antd';
 import { ApiResponse } from '../types';
+import { notification } from 'antd';
 
-function HeaderSection({ callUnresolvedTaskApi }: any) {
-  const [dataArray] = useSingleFlagData();
+function HeaderSection({ callUnresolvedTaskApi, setTasksData }: any) {
+  const [flagById] = useFlagById();
   const [forResolvedPayload, setPayload] = useResolvedPayload();
   const [, setCurrentAction] = useCurrentAction();
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -21,19 +21,17 @@ function HeaderSection({ callUnresolvedTaskApi }: any) {
   const { fetchData: callFlagUpdateAPI } = useAxios<{
     data: ApiResponse[];
   }>({
-    endpoint: `/tasks/update/`,
+    endpoint: `/v1/task/resolve/`,
     method: 'PUT',
   });
 
   useEffect(() => {
-    if (dataArray) {
+    if (flagById) {
       setPayload({
-        ...forResolvedPayload,
-        is_resolved: true,
-        id: dataArray.id,
+        task_ids: [flagById?.id],
       });
     }
-  }, [dataArray]);
+  }, [flagById]);
 
   const openModal = () => {
     setIsModalOpen(true);
@@ -44,23 +42,33 @@ function HeaderSection({ callUnresolvedTaskApi }: any) {
   };
 
   const saveButton = async () => {
-    let response = (await callFlagUpdateAPI({
-      payload: [forResolvedPayload],
+    const response = (await callFlagUpdateAPI({
+      payload: forResolvedPayload,
     })) as {
       code: number | null;
-      error?: string | null | undefined;
+      error?: string | null;
+      message?: string;
+      data?: any;
       [key: string]: any;
     };
-    if (response.code == 200 && response.data) {
+
+    if (response.code === 200 && response?.data) {
       notification.success({
         message: 'Success',
         description: `${response?.message}`,
       });
-      setIsModalOpen(false); // Close modal after API call
+
+      setIsModalOpen(false);
       setCurrentAction(undefined);
-      await callUnresolvedTaskApi();
+
+      // fetch tasks and update state
+      const unresolvedResponse = await callUnresolvedTaskApi();
+      if (unresolvedResponse && unresolvedResponse?.data) {
+        setTasksData(unresolvedResponse?.data);
+      }
     }
-    if (response?.code == null && response.error) {
+
+    if (response?.code == null && response?.error) {
       return notification.error({
         message: 'Failure',
         description: `${response?.error}`,
@@ -72,10 +80,10 @@ function HeaderSection({ callUnresolvedTaskApi }: any) {
     setCurrentAction(undefined);
   };
 
-  const isShow = dataArray.task_status_id === 2;
+  const isShow = flagById?.status !== 'AD';
   return (
     <Header>
-      <Title>VIEW FLAG</Title>
+      <Title>VIEW TASK</Title>
       {!isShow ? (
         <ResolveButton onClick={openModal}>MARK AS RESOLVED</ResolveButton>
       ) : (
@@ -116,11 +124,12 @@ const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
 
 const ResolveButton = styled.button`
   color: #3a3630;
-  font-size: 14px;
+  background: #feba30;
+  padding: 6px;
+  border-radius: 6px;
   font-weight: 600;
-  background: transparent;
-  border: none;
-  cursor: pointer;
+  font-size: 13px;
+  border: 1px solid #feba30;
 `;
 
 const Title = styled.span`