@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

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

@@ -1,118 +0,0 @@
-import React, { useMemo } from 'react';
-import styled from 'styled-components';
-import { Label } from '@bjsdistribution/dms-component-library';
-import StatusIndicator from './StatusIndicator';
-import {
-  useFlagById,
-  useStaticData,
-  useUpdateTask,
-} from '../order-actions/store';
-import { formatDate, priorityData } from '../order-actions/utils';
-import { Select } from 'antd';
-
-function ButtonsSection() {
-  const [staticData] = useStaticData();
-  const [flagById] = useFlagById();
-  const [taskPayload, setTaskPayload] = useUpdateTask();
-
-  const orderFlagTypes = staticData?.[0]?.order_flag_types || [];
-
-  const taskTypeOptions = useMemo(
-    () =>
-      orderFlagTypes?.map((item: any) => ({
-        label: item?.type,
-        value: item?.id,
-      })),
-    [orderFlagTypes]
-  );
-
-  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 handlePriorityChange = (value: number) => {
-    setTaskPayload((prev: any) => ({
-      ...prev,
-      priority: value,
-    }));
-  };
-
-  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" />
-        <StyledAntSelect
-          options={taskTypeOptions}
-          placeholder="Select Type"
-          onChange={handleTaskTypeChange}
-          value={selectedTypeId}
-          style={{ minWidth: '200px', width: 'auto' }}
-        />
-      </Flex>
-      <Flex>
-        <Label label="Priority" />
-        <StyledAntSelect
-          options={priorityOptions}
-          placeholder="Select Type"
-          onChange={handlePriorityChange}
-          value={taskPayload?.priority || flagById?.priority}
-          style={{ minWidth: '100px', width: 'auto' }}
-        />
-      </Flex>
-      <Flex>
-        <Label label="Status" />
-        {isResolved ? (
-          <StatusIndicator text={resolvedText} status="SD" />
-        ) : (
-          <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;
-  gap: 25px;
-`;
-
-const Flex = styled.div`
-  margin-top: 20px;
-`;
-
-export default ButtonsSection;

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

@@ -1,162 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import {
-  CancelAndCompleteAction,
-  CancelationModal,
-  CrossIcon,
-  useAxios,
-} from '@bjsdistribution/dms-component-library';
-import { useResolvedPayload, useFlagById } from '../order-actions/store';
-import { useCurrentAction } from '../store';
-import { ApiResponse } from '../types';
-import { notification } from 'antd';
-
-function HeaderSection({ callUnresolvedTaskApi, setTasksData }: any) {
-  const [flagById] = useFlagById();
-  const [forResolvedPayload, setPayload] = useResolvedPayload();
-  const [, setCurrentAction] = useCurrentAction();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  //flag PUT API
-  const { fetchData: callFlagUpdateAPI } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/v1/task/resolve/`,
-    method: 'PUT',
-  });
-
-  useEffect(() => {
-    if (flagById) {
-      setPayload({
-        task_ids: [flagById?.id],
-      });
-    }
-  }, [flagById]);
-
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
-
-  const saveButton = async () => {
-    const response = (await callFlagUpdateAPI({
-      payload: forResolvedPayload,
-    })) as {
-      code: number | null;
-      error?: string | null;
-      message?: string;
-      data?: any;
-      [key: string]: any;
-    };
-
-    if (response.code === 200 && response?.data) {
-      notification.success({
-        message: 'Success',
-        description: `${response?.message}`,
-      });
-
-      setIsModalOpen(false);
-      setCurrentAction(undefined);
-
-      // fetch tasks and update state
-      const unresolvedResponse = await callUnresolvedTaskApi();
-      if (unresolvedResponse && unresolvedResponse?.data) {
-        setTasksData(unresolvedResponse?.data);
-      }
-    }
-
-    if (response?.code == null && response?.error) {
-      return notification.error({
-        message: 'Failure',
-        description: `${response?.error}`,
-      });
-    }
-  };
-
-  const onCancel = () => {
-    setCurrentAction(undefined);
-  };
-
-  const isShow = flagById?.status !== 'AD';
-  return (
-    <Header>
-      <Title>VIEW TASK</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;
-  background: #feba30;
-  padding: 6px;
-  border-radius: 6px;
-  font-weight: 600;
-  font-size: 13px;
-  border: 1px solid #feba30;
-`;
-
-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

@@ -1,71 +0,0 @@
-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

@@ -1,37 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { Label, TextArea } from '@bjsdistribution/dms-component-library';
-import { useUpdateTask } from '../order-actions/store';
-
-function TextSection() {
-  const [taskPayload, setTaskPayload] = useUpdateTask();
-
-  const onChangeDetails = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setTaskPayload({
-      ...taskPayload,
-      description: event.target.value,
-    });
-  };
-
-  return (
-    <Text>
-      <Label label="Details" />
-      <TextField
-        placeholder="Type here...."
-        value={taskPayload?.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

@@ -1,145 +0,0 @@
-import React, { useEffect } from 'react';
-import styled from 'styled-components';
-import {
-  BackgroundModal,
-  useApiHook,
-  useAxios,
-} from '@bjsdistribution/dms-component-library';
-import HeaderSection from './Header';
-import TextSection from './TextSection';
-import ButtonsSection from './Dropdowns';
-import { RadioButtonsSection, SaveDetails } from './Actions';
-import {
-  // useTasksData,
-  useStaticData,
-  useFlagById,
-  useFlagRefId,
-  useTasksData,
-  useUpdateTask,
-} from '../order-actions/store';
-import DetailSection from './DetailSection';
-import { allTypes } from '../order-actions/types';
-import { useOrderId } from '../store';
-
-interface ApiResponse {
-  message: string;
-  code: number;
-  error: string | null;
-  error_traceback: string | null;
-  data: allTypes[];
-}
-
-function ViewFlag() {
-  const [, setStaticData] = useStaticData();
-  const [flagById, setFlagById] = useFlagById();
-  const [taskPayload, setTaskPayload] = useUpdateTask();
-  const [selectedFlagId] = useFlagRefId();
-  const [orderId] = useOrderId();
-  const [, setTasksData] = useTasksData();
-
-  //single flag data
-  const { data: flagDataById, fetchData: fetchedFlagById, loading } = useAxios<
-    ApiResponse
-  >({
-    endpoint: `/v1/task/${selectedFlagId}`,
-    method: 'GET',
-  });
-
-  // API Call
-  const { data: fetchedStaticData } = useApiHook<ApiResponse>({
-    endpoint: `/v1/task/getStaticData/all/`,
-    method: 'GET',
-  });
-
-  useEffect(() => {
-    if (fetchedStaticData) {
-      setStaticData(fetchedStaticData?.data);
-    }
-  }, [fetchedStaticData]);
-
-  //Unresolved API
-  const { fetchData: callUnresolvedTaskApi } = useAxios<{
-    data: ApiResponse[];
-  }>({
-    endpoint: `/v1/task/`,
-    method: 'GET',
-    pagination: { is_pagination: false },
-    filters: [{ field: 'order_id', op: '=', value: orderId }],
-  });
-
-  useEffect(() => {
-    if (selectedFlagId) {
-      fetchedFlagById();
-    }
-  }, [selectedFlagId]);
-
-  useEffect(() => {
-    if (flagDataById && flagDataById?.data) {
-      setFlagById(flagDataById?.data[0]);
-    }
-  }, [loading]);
-
-  useEffect(() => {
-    if (flagById) {
-      setTaskPayload({
-        ...taskPayload,
-        flag_type: flagById?.task_type_id,
-        description: flagById?.description,
-        priority: flagById?.task_priority_id,
-        id: flagById?.id,
-        is_private: flagById?.is_private,
-      });
-    }
-  }, [flagById]);
-
-  return (
-    <>
-      {
-        <BackgroundModals>
-          <MainContainer>
-            <HeaderSection
-              callUnresolvedTaskApi={callUnresolvedTaskApi}
-              setTasksData={setTasksData}
-            />
-            <DetailSection />
-            <TextSection />
-            <ButtonsSection />
-            <SectionsContainer>
-              <SaveDetails
-                callUnresolvedTaskApi={callUnresolvedTaskApi}
-                setTasksData={setTasksData}
-              />
-              <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/Status.tsx

@@ -1,178 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { StatusOptions } from '../helper';
-// 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';
-import { Skeleton } from 'antd';
-import Divider from '../../../assets/icons/Divider';
-
-function Status({ statusDataLoading }: any) {
-  const [orderStatus] = useStatusDetails();
-  return (
-    <>
-      <Container>
-        <BoxContainer>
-          {statusDataLoading ? (
-            <>
-              <StatusSkeletonRow />
-            </>
-          ) : (
-            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 StatusSkeletonItem = () => (
-  <SkeletonItemContainer>
-    <Skeleton.Avatar size="small" style={{ marginRight: 12 }} />
-    <Skeleton.Input
-      active
-      size="small"
-      style={{ width: 150, borderRadius: 8 }}
-    />
-  </SkeletonItemContainer>
-);
-const StatusSkeletonRow = () => (
-  <StatusBox>
-    <StatusSkeletonItem />
-    <SkeletonDivider />
-    <StatusSkeletonItem />
-    <SkeletonDivider />
-    <StatusSkeletonItem />
-    <SkeletonDivider />
-    <StatusSkeletonItem />
-    <SkeletonDivider />
-    <StatusSkeletonItem />
-    <SkeletonDivider />
-    <StatusSkeletonItem />
-  </StatusBox>
-);
-const renderIcon = (value: any, orderStatus: any) => {
-  const status = orderStatus && orderStatus.length > 0 ? orderStatus[0] : null;
-
-  if (!status) {
-    return 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 === 'Partial') {
-        return <RouteIcon />;
-      } else {
-        return <ConfirmedIcon />;
-      }
-    case 'delivered':
-      if (
-        status.delivered &&
-        (status.completed === false || status.completed === null)
-      ) {
-        return <DeliveredIcon />; //grey
-      } else if (status.delivered === true && status.completed === true) {
-        return <SuccessIcon />;
-      } else if (status.delivered === true && status.completed === false) {
-        return <RouteIcon />; //orange
-      } else {
-        return <ConfirmedIcon />;
-      }
-    default:
-      return null;
-  }
-};
-
-// const RowWrapper = styled.div`
-//   display: flex;
-//   flex-direction: column;
-//   background: #fff;
-//   border-radius: 12px;
-//   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
-//   padding: 16px;
-// `;
-
-// const HeaderPlaceholder = styled.div`
-//   display: flex;
-//   align-items: center;
-//   padding: 8px 0;
-//   gap: 12px;
-// `;
-
-const StatusBox = styled.div`
-  display: flex;
-  align-items: center;
-  background: #fcfcfc;
-  border: 1px solid #eee;
-  border-radius: 20px;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  padding: 5px;
-  width: -webkit-fill-available;
-`;
-
-const SkeletonItemContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`;
-
-const SkeletonDivider = styled.div`
-  width: 12px;
-  height: 2px;
-  background-color: #e0e0e0;
-  margin: 0 4px;
-  border-radius: 2px;
-`;
-
-const BoxContainer = styled.div`
-  border: 1px solid #e3e3e3;
-  display: flex;
-  justify-content: space-evenly;
-  border-radius: 20px;
-  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;
-  text-transform: uppercase;
-`;
-
-const Container = styled.div`
-  padding: 15px;
-  margin-top: 25px;
-`;
-
-const TextContainer = styled.div`
-  gap: 10px;
-  display: flex;
-  align-items: center;
-`;
-export default Status;