@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { DropDownContainer } from './DropdownStyles';
+import DropDownMenu from './DropDownMenu';
+import DropDownItem from './DropDownItem';
+import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
+
+const Options = [
+  { label: 'Create Reminder', value: 'create-reminder' },
+  { label: 'Confirm', value: 'confirm' },
+  { label: 'Force Debrief', value: 'force-debrief' },
+  { label: 'Clear Booking Status', value: 'booking-status' },
+  { label: 'Remove From Route', value: 'remove-route' },
+  { label: 'Hold', value: 'hold' },
+  { label: 'Flag', value: 'flag' },
+  { label: 'Cancel', value: 'cancel' },
+  { label: 'Charge Log', value: 'charge-log' },
+];
+
+const OptionsDropDown: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (value: string) => {
+    console.log(`Selected: ${value}`);
+    setIsOpen(false);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <DropDownContainer ref={dropdownRef}>
+      <DropDownItem
+        label="Options"
+        icon={<DropDownLarge />}
+        onClick={handleClick}
+      />
+      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
+    </DropDownContainer>
+  );
+};
+export default OptionsDropDown;

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

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { DropDownContainer } from './DropdownStyles';
+import DropDownMenu from './DropDownMenu';
+import DropDownItem from './DropDownItem';
+import DropDownLarge from '../../../../../assets/icons/DropDownLarge';
+
+const Options = [
+  { label: 'Return notes', value: 'return-notes' },
+  { label: 'Product Labels', value: 'product-labels' },
+  { label: 'Returns Cover Note', value: 'cover-note' },
+];
+
+const PrintDropDown: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => {
+    setIsOpen(prev => !prev);
+  };
+
+  const handleSelect = (value: string) => {
+    console.log(`Selected: ${value}`);
+    setIsOpen(false);
+  };
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <DropDownContainer ref={dropdownRef}>
+      <DropDownItem
+        label="Print"
+        icon={<DropDownLarge />}
+        onClick={handleClick}
+      />
+      {isOpen && <DropDownMenu options={Options} onSelect={handleSelect} />}
+    </DropDownContainer>
+  );
+};
+export default PrintDropDown;

package/src/components/order-view/details-filters/right-side-filters/Details.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Details = () => {
+  return (
+    <DetailsContainer>
+      <Typo>CUSTOMER RETURN - BJS DEV TEST COMPANY, WS10 8RR</Typo>
+    </DetailsContainer>
+  );
+};
+
+const DetailsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  > svg {
+    transform: scale(0.6);
+  }
+`;
+
+const Typo = styled.div`
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 32px; /* 160% */
+  text-transform: uppercase;
+  margin: 0;
+  padding: 0;
+
+  @media screen and (max-width: 1220px) {
+    font-size: 14px;
+  }
+`;
+
+export default Details;

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

@@ -0,0 +1,227 @@
+import { ChargeLogData } from './types';
+
+
+export const BJSMenu = [
+  {
+    label: 'Add Order Resources',
+    value: 'add-resources',
+  },
+  {
+    label: 'Split Order',
+    value: 'split-order',
+  },
+  {
+    label: 'Escalations',
+    value: 'escalations',
+  },
+  {
+    label: 'Release Order',
+    value: 'release-order',
+  },
+  {
+    label: 'Restore Products',
+    value: 'restore-products',
+  }
+];
+
+export const OptionsMenu = [
+  {
+    label: 'Log Service Refusal',
+    value: 'log-service-refusal',
+  },
+  {
+    label: 'Confirm',
+    value: 'confirm-order',
+  },
+  {
+    label: 'Force Debrief',
+    value: 'force-debrief',
+  },
+  {
+    label: 'Charge Log',
+    value: 'charge-log',
+  },
+  {
+    label: 'Log Feedback',
+    value: 'log-feedback',
+  },
+  {
+    label: 'On Hold',
+    value: 'hold-order',
+  },
+  {
+    label: 'Un Hold',
+    value: 'unhold-order',
+  },
+  {
+    label: 'Change Customer Account',
+    value: 'change-customer-account',
+  },
+  {
+    label: 'Proximity Report',
+    value: 'promixity-report',
+  },
+  {
+    label: 'Raise Collection',
+    value: 'raise-collection',
+  },
+  {
+    label: 'Remove from Route',
+    value: 'remove-from-route',
+  },
+  {
+    label: 'Add New Flag',
+    value: 'add-new-flag',
+  },
+  {
+    label: 'Un-Release Order',
+    value: 'unrelease-order',
+  },
+  {
+    label: 'Cancel',
+    value: 'cancel-order',
+  },
+  {
+    label: 'Clear Booking Status',
+    value: 'clear-booking-status',
+  },
+];
+
+export const PrintMenu = [
+  {
+    label: 'Proof Of Delivery',
+    value: 'proof-of-delivery',
+  },
+  {
+    label: 'Proof Of Delivery(DOC)',
+    value: 'doc',
+  },
+  {
+    label: 'Order Delivery labels',
+    value: 'order-delivery-labels',
+  },
+];
+
+export const orderResources = [
+  {
+    date: '15/01/2024 06:22:47',
+    updated_at: '15/01/2024 06:22:47',
+    type: 'Workflow',
+    category: 'Epod',
+    reference: 'Success Note',
+    id: 1,
+  },
+  {
+    date: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    type: 'Workflow',
+    category: 'Epod',
+    reference: 'Success Note',
+    id: 2,
+  },
+  {
+    date: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    type: 'Workflow',
+    category: 'Epod',
+    reference: 'Success Note',
+    id: 3,
+  },
+  {
+    date: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    type: 'Workflow',
+    category: 'Epod',
+    reference: 'Success Note',
+    id: 4,
+  },
+  {
+    date: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    type: 'Workflow',
+    category: 'Epod',
+    reference: 'Success Note',
+    id: 5,
+  },
+  {
+    date: '22/01/2024 07:22:47',
+    updated_at: '22/01/2024 07:22:47',
+    type: 'Workflow',
+    category: 'Epod',
+    reference: 'Success Note',
+    id: 6,
+  },
+];
+
+export const HoldOptionMenu = [
+  {
+    label: 'STOCK RECEIPT / DAMAGED - Awaiting Client Instructions',
+    value: 'STOCK RECEIPT / DAMAGED - Awaiting Client Instructions',
+  },
+  {
+    label: 'STOCK RECEIPT / EXTRA ITEMS - Awaiting Client Instructions',
+    value: 'STOCK RECEIPT / EXTRA ITEMS - Awaiting Client Instructions',
+  },
+  {
+    label: 'STOCK RECEIPT / NO STOCK - Awaiting Client Instructions',
+    value: 'STOCK RECEIPT / NO STOCK - Awaiting Client Instructions',
+  },
+  {
+    label: 'STOCK RECEIPT / DAMAGED - Awaiting Client Instructions',
+    value: 'STOCK RECEIPT / DAMAGED - Awaiting Client Instructions',
+  },
+  {
+    label: 'STOCK RECEIPT / NO STOCK - CANX',
+    value: 'STOCK RECEIPT / NO STOCK - CANX',
+  },
+  {
+    label: 'STOCK RECEIPT / RE-ALLOCATION',
+    value: 'STOCK RECEIPT / RE-ALLOCATION',
+  },
+  {
+    label: 'CONTACT DETAILS / MISSING TEL NUMBER',
+    value: 'CONTACT DETAILS / MISSING TEL NUMBER',
+  },
+  {
+    label: 'CONTACT DETAILS / INCORRECT ADDRESS',
+    value: 'CONTACT DETAILS / INCORRECT ADDRESS',
+  },
+];
+
+export const initialData: ChargeLogData[] = [
+  {
+    id: 1,
+    date: '17/05/2024',
+    description: 'Delivery Success - 17/05/2024',
+    amount: '0.00',
+    status: '2024-06-02 - Moreham Wood Direct - 34113',
+  },
+  {
+    id: 2,
+    date: '17/05/2024',
+    description: 'Delivery Success - 17/05/2024',
+    amount: '0.45',
+    status: '2024-06-02 - Moreham Wood Direct - 34113',
+  },
+  {
+    id: 3,
+    date: '17/05/2024',
+    description: 'Delivery Success - 17/05/2024',
+    amount: '0.00',
+    status: '',
+  },
+  {
+    id: 4,
+    date: '17/05/2024',
+    description: 'Delivery Success - 17/05/2024',
+    amount: '0.78',
+    status: 'Awaiting Invoice',
+  },
+  {
+    id: 5,
+    date: '17/05/2024',
+    description: 'Delivery Success - 17/05/2024',
+    amount: '0.108',
+    status: 'Awaiting',
+  },
+];

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

@@ -0,0 +1,132 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import {
+  Button,
+  RadioButtonGroup,
+} from '@bjsdistribution/dms-component-library';
+
+import {
+  useFlagsLoading,
+  useSingleFlagData,
+  useSinglePayload,
+} from '../order-actions/store';
+import { useCurrentAction } from '../store';
+import Tippy from '@tippyjs/react';
+import useUpdateFlag from '../order-actions/hooks/useUpdateFlag';
+import useFetchUnresolvedTasks from '../order-actions/hooks/useAllTaskData';
+
+function ActionSection() {
+  const [, setCurrentAction] = useCurrentAction();
+  const [payload] = useSinglePayload();
+  const [dataArray] = useSingleFlagData();
+  const fetchData = useFetchUnresolvedTasks();
+  const [, setLoading] = useFlagsLoading();
+
+  const updateFlag = useUpdateFlag();
+
+  const onSubmit = async () => {
+    setLoading(true);
+    await updateFlag([payload]);
+    await fetchData();
+    //modal close
+    setCurrentAction(undefined);
+    setLoading(false);
+  };
+
+  const onCancel = () => {
+    setCurrentAction(undefined);
+  };
+
+  const isDisabled = dataArray.task_status_id === 2;
+  return (
+    <Wrapper>
+      <Tippy
+        content={
+          <TooltipContent>
+            {
+              'This task cannot be edited because it has been marked as resolved.'
+            }
+          </TooltipContent>
+        }
+        placement="bottom"
+        arrow={true}
+        disabled={!isDisabled}
+      >
+        <ButtonWrapper>
+          <SaveButton onClick={onSubmit} disabled={isDisabled}>
+            SAVE DETAILS
+          </SaveButton>
+          <CancelButton onClick={onCancel}>CANCEL</CancelButton>
+        </ButtonWrapper>
+      </Tippy>
+    </Wrapper>
+  );
+}
+
+function RadioButtonsSection() {
+  const [dataArray] = useSingleFlagData();
+  const [payload, setPayload] = useSinglePayload();
+  const [, setNewValue] = useState<boolean | string>(false);
+
+  useEffect(() => {
+    const defaultSelectedValue = dataArray?.is_private ? false : true;
+    setPayload({
+      ...payload,
+      is_private: defaultSelectedValue,
+    });
+  }, [dataArray?.is_private]);
+
+  const handleRadioButtonChange = (event: any) => {
+    const value = event.target.value;
+
+    let booleanValue: boolean;
+    if (value === 'private') {
+      booleanValue = true;
+    } else {
+      booleanValue = false;
+    }
+
+    setNewValue(value);
+    setPayload({
+      ...payload,
+      is_private: booleanValue,
+    });
+  };
+
+  return (
+    <DropDowns>
+      <RadioButtonGroup
+        selectedValue={payload.is_private == false ? 'public' : 'private'}
+        options={[]}
+        onChange={handleRadioButtonChange}
+        heading={''}
+        required={false}
+      />
+    </DropDowns>
+  );
+}
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  gap: 15px;
+`;
+
+const SaveButton = styled(Button)``;
+
+const CancelButton = styled(Button)``;
+
+const DropDowns = styled.div`
+  display: flex;
+  gap: 25px;
+`;
+
+const TooltipContent = styled.div`
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+`;
+
+const Wrapper = styled.div``;
+
+export { ActionSection, RadioButtonsSection };

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Label } from '@bjsdistribution/dms-component-library';
+import { useSingleFlagData } from '../order-actions/store';
+
+function DetailSection() {
+  const [dataArray] = useSingleFlagData();
+
+  let orderColumnData =
+    dataArray?.order_data?.order_recipient?.recipient_name?.toUpperCase() +
+    ', ' +
+    dataArray?.order_data?.order_recipient?.postcode;
+
+  return (
+    <Detail>
+      <Flex>
+        <StyledLabel label="Reference" />
+        <Ref>{dataArray?.id}</Ref>
+      </Flex>
+      <Flex>
+        <StyledLabel label="Order" />
+        <Order>{orderColumnData}</Order>
+      </Flex>
+    </Detail>
+  );
+}
+
+const Detail = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 40%;
+  flex-wrap: wrap;
+`;
+
+const Flex = styled.div`
+  margin-top: 20px;
+`;
+const Ref = styled.div`
+  color: #7b7874;
+  font-family: 'Lato', sans-serif;
+`;
+const Order = styled.div`
+  color: #7b7874;
+  text-decoration: underline;
+  font-family: 'Lato', sans-serif;
+`;
+const StyledLabel = styled(Label)`
+  margin-right: 10px;
+  font-weight: bold;
+`;
+
+export default DetailSection;

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

@@ -0,0 +1,130 @@
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+import {
+  useSingleFlagData,
+  useSinglePayload,
+  useTaskPriority,
+  useTaskTypeData,
+} from '../order-actions/store';
+import { formatDate, transformOption } from '../order-actions/utils';
+import StatusIndicator from './StatusIndicator';
+
+function ButtonsSection() {
+  const [payload, setPayload] = useSinglePayload();
+  const [priorityData] = useTaskPriority();
+  const [dataArray] = useSingleFlagData();
+  const [taskTypes] = useTaskTypeData();
+
+  // Options for task types
+  const selectTaskTypeOptions = taskTypes?.map((option: any) =>
+    transformOption(option, 'type')
+  );
+
+  //options for priority
+  const priorityOptions = priorityData?.map((option: any) =>
+    transformOption(option, 'name')
+  );
+
+  //functions to change value
+  const onFlagtypeChange = (event: any) => {
+    setPayload({ ...payload, task_type_id: event.value });
+  };
+
+  const onPriorityChange = (event: any) => {
+    setPayload({ ...payload, task_priority_id: event.value });
+  };
+
+  const isStatusShow = dataArray?.task_status_id;
+
+  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}
+        />
+      </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"
+          options={priorityOptions}
+          value={priorityOptions.filter(
+            (f: any) => f.value === payload.task_priority_id
+          )}
+          onChange={onPriorityChange}
+        />
+      </Flex>
+      <>
+        {isStatusShow === 1 ? (
+          <Flex>
+            <Label label="Status" />
+            <StatusIndicator text="Unresolved" status="AD" />
+          </Flex>
+        ) : (
+          <Flex>
+            <Label label="Status" />
+            <StatusIndicator
+              text={`Resolved on ${formatDate(dataArray?.resolved_at)} by ${
+                dataArray?.resolved_by
+              }`}
+              status="SD"
+            />
+          </Flex>
+        )}
+      </>
+    </Buttons>
+  );
+}
+
+const Buttons = styled.div`
+  display: flex;
+  gap: 25px;
+`;
+
+const Flex = styled.div`
+  margin-top: 20px;
+`;
+
+export default ButtonsSection;