@bjsdistribution/dms-client-return 0.0.1

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

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+  CrossIcon,
+} from '@bjsdistribution/dms-component-library';
+import { useResolvedPayload, useSingleFlagData } from '../order-actions/store';
+import useUpdateFlag from '../order-actions/hooks/useUpdateFlag';
+import { useCurrentAction } from '../store';
+import useFetchUnresolvedTasks from '../order-actions/hooks/useAllTaskData';
+
+function HeaderSection() {
+  const [dataArray] = useSingleFlagData();
+  const [forResolvedPayload, setPayload] = useResolvedPayload();
+  const [, setCurrentAction] = useCurrentAction();
+  const updateFlag = useUpdateFlag();
+  const fetchData = useFetchUnresolvedTasks();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  useEffect(() => {
+    if (dataArray) {
+      setPayload({
+        ...forResolvedPayload,
+        is_resolved: true,
+        id: dataArray.id,
+      });
+    }
+  }, [dataArray]);
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const saveButton = async () => {
+    await updateFlag([forResolvedPayload]);
+    await fetchData();
+    setIsModalOpen(false); // Close modal after API call
+    onCancel()
+  };
+
+  const onCancel = () => {
+    setCurrentAction(undefined);
+  };
+
+  const isShow = dataArray.task_status_id === 2;
+  return (
+    <Header>
+      <Title>VIEW FLAG</Title>
+      {!isShow ? (
+        <ResolveButton onClick={openModal}>MARK AS RESOLVED</ResolveButton>
+      ) : (
+        <CrossWrapper>
+          <CrossIcon onClick={onCancel} />
+        </CrossWrapper>
+      )}
+      {isModalOpen && (
+        <StyledOverlay>
+          <CancelationModal
+            title="Mark as Resolved"
+            description="Are you sure you want to mark this Flag as resolved?"
+            actions={
+              <CustomCancelAndCompleteAction
+                cancelLabel="Cancel"
+                onCancel={closeModal}
+                completeLabel="Confirm"
+                onComplete={saveButton}
+              />
+            }
+          />
+        </StyledOverlay>
+      )}
+    </Header>
+  );
+}
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+`;
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+const ResolveButton = styled.button`
+  color: #3a3630;
+  font-size: 14px;
+  font-weight: 600;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+`;
+
+const Title = styled.span`
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 32px;
+  text-transform: uppercase;
+  color: #3a3630;
+`;
+
+const StyledOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(2px);
+  z-index: 1000;
+`;
+
+const CrossWrapper = styled.div`
+  cursor: pointer;
+`;
+
+export default HeaderSection;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import styled from 'styled-components';
+import 'tippy.js/dist/tippy.css';
+import { StatusType } from '../order-actions/types';
+import { getStatusColor } from '../order-actions/utils';
+
+interface StatusProps {
+  status: StatusType;
+  text?: string;
+}
+
+function StatusIndicator(props: StatusProps) {
+  const statusColor = getStatusColor(props.status);
+
+  return (
+    <Container>
+      <StatusCircleContainer status={props.status}>
+        <StatusCircle color={statusColor} />
+      </StatusCircleContainer>
+
+      <Text status={props.status}>{props.text}</Text>
+    </Container>
+  );
+}
+
+const StatusCircleContainer = styled.span<{ status: StatusType }>`
+  height: 20px;
+  width: 20px;
+  border: 1px solid
+    ${props =>
+      props.status === 'SD'
+        ? '#30fe43'
+        : props.status === 'AD'
+        ? '#E95252'
+        : 'transparent'};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StatusCircle = styled.span<{ color: string }>`
+  height: 10px;
+  width: 10px;
+  background: ${props => props.color};
+  border-radius: 50%;
+  display: inline-block;
+  transition: 0.2s ease all;
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 22px;
+`;
+
+const Text = styled.span<{ status: StatusType }>`
+  font-size: 13px;
+  font-weight: normal;
+  text-transform: capitalize;
+  font-weight: 500;
+  color: ${props =>
+    props.status === 'SD'
+      ? '#57DB7A'
+      : props.status === 'AD'
+      ? '#E95252'
+      : 'transparent'};
+`;
+
+export default StatusIndicator;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Label, TextArea } from '@bjsdistribution/dms-component-library';
+import { useSinglePayload } from '../order-actions/store';
+
+function TextSection() {
+  const [payload, setPayload] = useSinglePayload();
+
+  const onChangeDetails = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setPayload({
+      ...payload,
+      description: event.target.value,
+    });
+  };
+
+  return (
+    <Text>
+      <Label label="Details"></Label>
+      <TextField
+        placeholder="Type here...."
+        value={payload.description}
+        onChange={onChangeDetails}
+      />
+    </Text>
+  );
+}
+const TextField = styled(TextArea)`
+  width: 97% !important;
+`;
+const Text = styled.div`
+  display: grid;
+  margin-top: 2%;
+`;
+export default TextSection;

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

@@ -0,0 +1,141 @@
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  BackgroundModal,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import HeaderSection from './Header';
+import TextSection from './TextSection';
+import ButtonsSection from './Dropdowns';
+import { ActionSection, RadioButtonsSection } from './Actions';
+import {
+  useAllStaticData,
+  useCategoryData,
+  useDepartmentData,
+  useFlagRefId,
+  useFlagsLoading,
+  useSingleFlagData,
+  useSinglePayload,
+  useTaskPriority,
+  useTaskTypeData,
+  useTaskTypeExtended,
+} from '../order-actions/store';
+import DetailSection from './DetailSection';
+import Loader from '../../order-daily-overview/header/loader/Loader';
+import useFetchSingleFlagsData from '../order-actions/hooks/useFetchSingleFlagData';
+import { allTypes } from '../order-actions/types';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: allTypes[];
+}
+
+function ViewFlag() {
+  const [dataArray, setSingleFlag] = useSingleFlagData();
+  const [flagRefId] = useFlagRefId();
+  //const [ssoToken] = useSsoToken();
+  const [loading, setLoading] = useFlagsLoading();
+  const [payload, setPayload] = useSinglePayload();
+  const fetchData = useFetchSingleFlagsData();
+  const [staticData, setStaticData] = useAllStaticData();
+  const [, setPriority] = useTaskPriority();
+  const [, setTaskCategory] = useCategoryData();
+  const [, setTaskTypes] = useTaskTypeData();
+  const [, setTaskTypeExtended] = useTaskTypeExtended();
+  const [, setDepartmentData] = useDepartmentData();
+
+  // API Call
+  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
+    endpoint: `/tasks/getStaticData/all/`,
+    method: 'GET',
+  });
+
+  useEffect(() => {
+    if (fetchedStaticData) {
+      setStaticData(fetchedStaticData.data);
+    }
+  }, [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 fetchAndSetSingleFlagData = async () => {
+    setLoading(true);
+    const result = await fetchData();
+    setSingleFlag(result);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    fetchAndSetSingleFlagData();
+  }, [flagRefId]);
+
+  useEffect(() => {
+    setPayload({
+      ...payload,
+      task_type_id: dataArray?.task_type_id,
+      description: dataArray?.description,
+      task_priority_id: dataArray?.task_priority_id,
+      is_resolved: false,
+      id: dataArray?.id,
+      is_private: dataArray?.is_private,
+    });
+  }, [dataArray]);
+
+  return (
+    <>
+      <BackgroundModals>
+        {dataArray && loading && <Loader />}
+        <MainContainer>
+          <HeaderSection />
+          <DetailSection />
+          <TextSection />
+          <ButtonsSection />
+          <SectionsContainer>
+            <ActionSection />
+            <RadioButtonsSection />
+          </SectionsContainer>
+        </MainContainer>
+      </BackgroundModals>
+    </>
+  );
+}
+
+const SectionsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 6%;
+`;
+
+const BackgroundModals = styled(BackgroundModal)`
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(1px);
+`;
+
+const MainContainer = styled.div`
+  padding: 24px;
+  border-radius: 12px;
+  background: #ffffff;
+  box-shadow: 0px 20px 24px -4px #10182814;
+  width: 80%;
+  max-width: 50%;
+  margin: 0 auto;
+  @media (max-width: 1024px) {
+    max-width: 80%;
+  }
+`;
+
+export default ViewFlag;

package/src/components/order-view/general-information/LockOrder.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import styled from 'styled-components';
+import TruckIcon from '../../../assets/icons/TruckIcon';
+import HeavyItemIcon from '../../../assets/icons/HeavyItemIcon';
+import LargeItemIcon from '../../../assets/icons/LargeItemIcon';
+import Tippy from '@tippyjs/react';
+import 'tippy.js/dist/tippy.css';
+import LockIcon from '../../../assets/icons/LockIcon';
+import UnlockIcon from '../../../assets/icons/UnlockIcon';
+import { useCurrentAction, useOrderDetails } from '../store';
+
+function LockOrder() {
+  const [apiData] = useOrderDetails();
+  const [, setCurrentAction] = useCurrentAction();
+  const isLocked = apiData?.order_locked;
+  const toggleLock = () => {
+    setCurrentAction('order-lock');
+  };
+
+  return (
+    <Container>
+      <TruckContainer>
+        <TruckIcon />
+      </TruckContainer>
+      <Name>{apiData?.order_recipient?.recipient_name}</Name>
+      <strong>,</strong>
+      <Name>{apiData?.order_recipient?.postcode}</Name>
+      {apiData?.order_services_detail?.heavy_item && (
+        <Tippy
+          content={<TooltipContent>Heavy Item</TooltipContent>}
+          placement="top"
+          arrow={true}
+        >
+          <HeavyItemContainer>
+            <HeavyItemIcon />
+          </HeavyItemContainer>
+        </Tippy>
+      )}
+      {apiData?.order_services_detail?.bulky_item && (
+        <Tippy
+          content={<TooltipContent>Large Item</TooltipContent>}
+          placement="top"
+          arrow={true}
+        >
+          <HeavyItemContainer>
+            <LargeItemIcon />
+          </HeavyItemContainer>
+        </Tippy>
+      )}
+      <LockOrderText onClick={toggleLock}>
+        {!isLocked ? <UnlockIcon /> : <LockIcon />}
+        {!isLocked ? 'Lock Order' : 'Remove Lock:'}
+        {isLocked && <TextWithRed>Rahul</TextWithRed>}
+      </LockOrderText>
+    </Container>
+  );
+}
+
+const TruckContainer = styled.div`
+  padding: 8px;
+  background-color: #feba30;
+  border-radius: 10px;
+`;
+
+const HeavyItemContainer = styled.div`
+  background-color: #eceae3;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #d6d6d6;
+`;
+
+const Name = styled.div`
+  /* heading/h3-subHeader */
+  font-family: 'Roboto', sans-serif;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 32px; /* 160% */
+  text-transform: uppercase;
+`;
+
+const TooltipContent = styled.div`
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+`;
+
+const TextWithRed = styled.span`
+  color: red;
+`;
+
+const LockOrderText = styled.div`
+  border-radius: 5px;
+  padding: 8px;
+  gap: 10px;
+  display: flex;
+  color: white;
+  background-color: #3a3630;
+  cursor: pointer;
+  font-family: 'lato', sans-serif;
+  margin-left: auto;
+  align-items: center;
+`;
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 20px;
+`;
+
+export default LockOrder;

package/src/components/order-view/general-information/Status.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import styled from 'styled-components';
+import { StatusOptions } from '../helper';
+import Divider from '../../../assets/icons/Divider';
+// Import icon
+import RouteIcon from '../../../assets/icons/RoutedIcon';
+import SuccessIcon from '../../../assets/icons/SuccessIcon';
+import DeliveredIcon from '../../../assets/icons/DeliveredIcon';
+import ConfirmedIcon from '../../../assets/icons/ConfirmedIcon';
+// import { useStatusDetails } from '../store';
+
+function Status() {
+  // const [orderStatus] = useStatusDetails();
+  const orderStatus = [
+    {
+      released: true,
+      received: 'True',
+      routed: true,
+      scheduled: true,
+      confirmed: false,
+      delivered: true,
+      completed: false,
+    },
+  ];
+  return (
+    <Container>
+      <BoxContainer>
+        {StatusOptions.map((option, index) => (
+          <React.Fragment key={index}>
+            <TextContainer>
+              {renderIcon(option.value, orderStatus)}
+              <Heading>{option.label}</Heading>
+            </TextContainer>
+            {index < StatusOptions.length - 1 && <Divider />}
+          </React.Fragment>
+        ))}
+      </BoxContainer>
+    </Container>
+  );
+}
+
+const renderIcon = (value: any, orderStatus: any) => {
+  const status = orderStatus && orderStatus.length > 0 ? orderStatus[0] : null;
+
+  if (!status) {
+    return null;
+  }
+
+  switch (value) {
+    case 'released':
+    case 'scheduled':
+    case 'routed':
+    case 'confirmed':
+      return status[value] ? <SuccessIcon /> : <ConfirmedIcon />;
+    case 'received':
+      if (status.received === 'True') {
+        return <SuccessIcon />;
+      } else if (status.received === 'partially') {
+        return <RouteIcon />;
+      } else {
+        return <ConfirmedIcon />;
+      }
+    case 'delivered':
+      if (
+        status.delivered &&
+        (status.completed === false || status.completed === null)
+      ) {
+        return <DeliveredIcon />;
+      } else if (status.delivered && status.completed) {
+        return <SuccessIcon />;
+      } else {
+        return <ConfirmedIcon />;
+      }
+    default:
+      return null;
+  }
+};
+
+const BoxContainer = styled.div`
+  border: 1px solid #e3e3e3;
+  display: flex;
+  justify-content: space-evenly;
+  border-radius: 8px;
+  background: #f8fafc;
+  align-items: center;
+  height: 5%;
+`;
+
+const Heading = styled.div`
+  font-family: 'lato', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 18px;
+`;
+
+const Container = styled.div`
+  padding: 15px;
+`;
+
+const TextContainer = styled.div`
+  gap: 10px;
+  display: flex;
+  align-items: center;
+`;
+export default Status;

package/src/components/order-view/general-information/dropdowns/BjsMenu.tsx

@@ -0,0 +1,55 @@
+import {
+  SelectDropdown,
+  dropdownStyles,
+  filterDropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import { BJSMenu } from '../../fakedata';
+import { useCurrentAction } from '../../store';
+
+function BjsMenu() {
+  const [, setCurrentAction] = useCurrentAction();
+  const handleSelectChange = (selectedOption: any) => {
+    console.log(selectedOption, 'selectedOption')
+    setCurrentAction(selectedOption.value);
+  };
+
+  return (
+    <SelectDropdown
+      placeholder="BJS MENU"
+      inputId="bjsmenu"
+      options={BJSMenu}
+      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',
+          '&:hover': {
+            boxShadow: 'none',
+            borderColor: 'transparent',
+          },
+        }),
+      }}
+      value="BJS MENU"
+    />
+  );
+}
+
+export default BjsMenu;

package/src/components/order-view/general-information/dropdowns/CreateTask.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { FontContainer } from './helper';
+import { useCurrentAction, useOrderDetails } from '../../store';
+import {
+  useCreateReminderPayload,
+  useCreateTaskPayload,
+} from '../../order-actions/store';
+
+function CreateTask() {
+  const [, setCurrentAction] = useCurrentAction();
+  const [OrderDetails] = useOrderDetails();
+  const [, setPayload] = useCreateTaskPayload();
+  const [, setReminderPayload] = useCreateReminderPayload();
+
+  const openModal = () => {
+    if (OrderDetails) {
+      setPayload((prevState: any) => ({
+        ...prevState,
+        order_id: OrderDetails?.order_routes?.order_id,
+        customer_id: OrderDetails.customer_id,
+        associated_object_id: 1,
+        associated_object_name: 'orders',
+      }));
+      setReminderPayload((prevState: any) => ({
+        ...prevState,
+        order_id: OrderDetails?.order_routes?.order_id,
+      }));
+    }
+    setCurrentAction('create-task');
+  };
+
+  return <FontContainer onClick={openModal}>Create Task</FontContainer>;
+}
+export default CreateTask;