@bjsdistribution/dms-client-return 0.1.7-prod → 0.1.8-prod

package/src/components/order-view/order-actions/actions/force-debrief/escalation/EscalationLevel.tsx

@@ -0,0 +1,90 @@
+import {
+  dropdownStyles,
+  Label,
+  SelectDropdown,
+} from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  useEscalationCategory,
+  useEscalationLevel,
+  useOrderStaticData,
+} from '../../../../store';
+
+function EscalationLevel() {
+  const [orderStaticData] = useOrderStaticData();
+  const [escalationCategory] = useEscalationCategory();
+  const [escalationLevel, setEscalationLevel] = useEscalationLevel();
+  const escalationLevelOptions = orderStaticData?.escalation_levels?.map(
+    (escalation: any) => {
+      return {
+        label: escalation?.type,
+        value: escalation?.id,
+      };
+    }
+  );
+  const escalationTypes = orderStaticData?.escalation_types;
+  useEffect(() => {
+    const selectedEscalationLevelId = escalationTypes?.find(
+      (item: any) => item?.escalation_category_id === escalationCategory?.value
+    )?.escalation_level_id;
+
+    const defaultLevel = escalationLevelOptions?.find(
+      (item: any) => item.value === selectedEscalationLevelId
+    );
+
+    setEscalationLevel(defaultLevel);
+  }, [escalationCategory]);
+
+  return (
+    <Container>
+      <Label label="Escalation Level" />
+      <SelectDropdown
+        options={escalationLevelOptions || []}
+        styles={{
+          ...dropdownStyles,
+          control: (styles, state) => ({
+            ...styles,
+            border: '1px solid #D0D5DD',
+            cursor: 'pointer',
+            borderRadius: `${
+              state.selectProps.menuIsOpen ? '0px 0px 6px 6px' : '6px'
+            }`,
+            boxShadow: '0px 3px 22px #00000014',
+            minHeight: '40px',
+            '&:hover': {
+              borderColor: '#D0D5DD',
+              boxShadow: '0px 3px 22px #00000014',
+            },
+          }),
+          menu: styles => ({
+            ...styles,
+            marginBottom: '0px',
+            borderRadius: '6px 6px 0px 0px',
+            boxShadow: '0px 3px 22px #00000014',
+            border: '1px solid #D0D5DD',
+            borderBottom: '0px',
+          }),
+          dropdownIndicator: (styles, state) => ({
+            ...styles,
+            transition: 'all 0.3s ease-in-out',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'null',
+          }),
+        }}
+        placeholder="Select Level"
+        menuPlacement="top"
+        value={escalationLevel}
+        onChange={selectedOption => setEscalationLevel(selectedOption)}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+`;
+
+export default EscalationLevel;

package/src/components/order-view/order-actions/actions/force-debrief/escalation/EscalationReason.tsx

@@ -0,0 +1,122 @@
+import {
+  Label,
+  SelectDropdown,
+  dropdownStyles,
+} from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+
+import {
+  useEscalationCategory,
+  useEscalationReason,
+  useFailureReason,
+  useIsFailureReasonChanged,
+  useOrderStaticData,
+} from '../../../../store';
+
+function EscalationReason() {
+  const [
+    escalationReasonState,
+    setEscalationReasonState,
+  ] = useEscalationReason();
+  const [orderStaticData] = useOrderStaticData();
+  const [escalationCategory] = useEscalationCategory();
+  const [failureReason] = useFailureReason();
+  const [
+    isFailureReasonChanged,
+    setIsFailureReasonChanged,
+  ] = useIsFailureReasonChanged();
+
+  const escalationTypes = orderStaticData?.escalation_types;
+
+  const escalationTypeId = escalationTypes?.find(
+    (item: any) => item?.escalation_category_id === escalationCategory?.value
+  )?.id;
+
+  const escalationReasons = orderStaticData?.escalation_reasons?.filter(
+    (x: any) => x?.escalation_type_id === escalationTypeId
+  );
+
+  const escalationReasonsOptions = escalationReasons?.map((item: any) => {
+    const matchedItem = orderStaticData?.order_escalation_reasons?.find(
+      (x: any) => x?.id === item?.order_reason_id
+    );
+    if (matchedItem !== undefined) {
+      return {
+        label: matchedItem?.reason,
+        value: matchedItem?.id,
+      };
+    } else {
+      return;
+    }
+  });
+  const filteredEscReasonOptions = escalationReasonsOptions?.filter(
+    (option: any) => option !== undefined
+  );
+
+  useEffect(() => {
+    if (isFailureReasonChanged && filteredEscReasonOptions?.length > 0) {
+      // ids of both esc reason options and failure reason not matched but their labels matched
+      const reason = filteredEscReasonOptions?.find(
+        (option: any) => option?.label === failureReason?.label
+      );
+      setEscalationReasonState(reason);
+      setIsFailureReasonChanged(false);
+    }
+    if (!isFailureReasonChanged && filteredEscReasonOptions?.length > 0) {
+      setEscalationReasonState(filteredEscReasonOptions[0]);
+    }
+  }, [escalationCategory]);
+
+  return (
+    <Container>
+      <Label label="Escalation Reason" />
+      <SelectDropdown
+        options={filteredEscReasonOptions || []}
+        styles={{
+          ...dropdownStyles,
+          control: (styles, state) => ({
+            ...styles,
+            border: '1px solid #D0D5DD',
+            cursor: 'pointer',
+            borderRadius: `${
+              state.selectProps.menuIsOpen ? '0px 0px 6px 6px' : '6px'
+            }`,
+            boxShadow: '0px 3px 22px #00000014',
+            minHeight: '40px',
+            '&:hover': {
+              borderColor: '#D0D5DD',
+              boxShadow: '0px 3px 22px #00000014',
+            },
+          }),
+          menu: styles => ({
+            ...styles,
+            marginBottom: '0px',
+            borderRadius: '6px 6px 0px 0px',
+            boxShadow: '0px 3px 22px #00000014',
+            border: '1px solid #D0D5DD',
+            borderBottom: '0px',
+          }),
+          dropdownIndicator: (styles, state) => ({
+            ...styles,
+            transition: 'all 0.3s ease-in-out',
+            transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'null',
+          }),
+        }}
+        placeholder="Select Reason"
+        menuPlacement="top"
+        value={escalationReasonState}
+        onChange={selectedOption => setEscalationReasonState(selectedOption)}
+      />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+`;
+
+export default EscalationReason;

package/src/components/order-view/order-actions/actions/force-debrief/escalation/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import EscalationCategory from './EscalationCategory';
+import EscalationLevel from './EscalationLevel';
+import EscalationReason from './EscalationReason';
+
+function Escalation() {
+  return (
+    <div style={{ display: 'flex', gap: '15px', width: '100%' }}>
+      <EscalationCategory />
+      <EscalationLevel />
+      <EscalationReason />
+    </div>
+  );
+}
+
+export default Escalation;

package/src/components/order-view/order-actions/actions/force-debrief/notifications/FlagsTemplate.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FlagAlert } from '@bjsdistribution/dms-component-library';
+
+function FDFlagTemplate({ dismissFlags }: any) {
+  const titleColor = '#36A053';
+  return (
+    <FlagAlert
+      type={'info'}
+      title={
+        <>
+          <StyledTitle color={titleColor}>
+            Flag : {'Private'}{' '}
+            <StyledLink>
+              {'Helo'} - {''}{' '}
+            </StyledLink>{' '}
+            {'new'}{' '}
+          </StyledTitle>
+        </>
+      }
+      subtitle=""
+      description={'description'}
+      showOkButton={false}
+      onClose={() => dismissFlags()}
+    />
+  );
+}
+
+const StyledLink = styled.span`
+  color: #6396e5;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  cursor: pointer;
+`;
+
+const StyledTitle = styled.span<{ color: string }>`
+  color: ${({ color }) => color};
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+export default FDFlagTemplate;

package/src/components/order-view/order-actions/actions/force-debrief/notifications/OrderTemplate.tsx

@@ -0,0 +1,117 @@
+import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { format, parseISO } from 'date-fns';
+import { useOrderDetails } from '../../../../store';
+import { useRouteDetails } from '../../../store';
+
+function OrderTemplate() {
+  const [orderDetails] = useOrderDetails();
+  const [routesDetails] = useRouteDetails();
+  const [alertVisibility, setAlertVisibility] = useState({
+    isAllocated: true,
+    isOrderStatusNote: true,
+  });
+
+  const isRouteId = orderDetails?.order_routes?.route_id != null;
+  //on close alert functionality
+  const onCloseAlert = (alertType: string) => {
+    setAlertVisibility(prev => ({
+      ...prev,
+      [alertType]: false,
+    }));
+  };
+
+  return (
+    <StyledAlert>
+      <>
+        {alertVisibility.isAllocated && (
+          <>
+            {isRouteId ? (
+              <FlagAlert
+                type="info"
+                title=""
+                description={
+                  <>
+                    <Title>Allocated To Route :</Title>
+                    {routesDetails?.route_name || ''}
+                    {routesDetails?.route_lock
+                      ? `*Locked* on ${routesDetails?.route_detail?.vehicle_number} `
+                      : ''}{' '}
+                    | Crew:
+                    {routesDetails?.crew1 || 'N/A'} &{' '}
+                    {routesDetails?.crew2 || 'N/A'} |{' '}
+                    {routesDetails?.route_date
+                      ? format(
+                          parseISO(routesDetails?.route_date),
+                          'dd/MM/yyyy'
+                        )
+                      : ''}
+                  </>
+                }
+                showOkButton={false}
+                onClose={() => onCloseAlert('isAllocated')}
+              />
+            ) : (
+              <FlagAlert
+                type="info"
+                title=""
+                description={
+                  <>
+                    <Title>Allocated To Route :</Title>{' '}
+                    <Info>Route not allocated</Info>
+                  </>
+                }
+                showOkButton={false}
+                onClose={() => onCloseAlert('isAllocated')}
+              />
+            )}
+          </>
+        )}
+      </>
+
+      {alertVisibility.isOrderStatusNote && (
+        <>
+          {orderDetails?.order_status_note && (
+            <>
+              <FlagAlert
+                type="info"
+                title=""
+                description={
+                  <>
+                    <Title>Order Status Note : </Title>
+                    {orderDetails?.order_status_note}
+                  </>
+                }
+                showOkButton={false}
+                onClose={() => onCloseAlert('isOrderStatusNote')}
+              />
+            </>
+          )}
+        </>
+      )}
+    </StyledAlert>
+  );
+}
+const StyledAlert = styled.div`
+  display: contents;
+  gap: 15px;
+`;
+
+const Title = styled.span`
+  color: #6396e5;
+  font-family: Roboto;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+const Info = styled.span`
+  color: #6a7378;
+  font-family: Lato;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+`;
+
+export default OrderTemplate;

package/src/components/order-view/order-actions/actions/force-debrief/notifications/Tabs.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import OrderTemplate from './OrderTemplate';
+import FlagTemplate from '../../../../notification/FlagTemplate';
+import { useTasksData } from '../../../store';
+
+function Tabs({ dismissFlags }: any) {
+  const [taskData] = useTasksData();
+
+  return (
+    <>
+      <Content>
+        <Container className="tab-content">
+          <OrderTemplate />
+          {taskData?.map((item: any, index: any) => (
+            <FlagTemplate key={index} data={item} dismissFlags={dismissFlags} />
+          ))}
+        </Container>
+      </Content>
+    </>
+  );
+}
+const Container = styled.div`
+  gap: 15px;
+  display: grid;
+`;
+
+const Content = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+export default Tabs;

package/src/components/order-view/order-actions/actions/force-debrief/notifications/index.tsx

@@ -0,0 +1,180 @@
+import { useAxios } from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import Tabs from './Tabs';
+import styled from 'styled-components';
+import { useRouteDetails, useTasksData } from '../../../store';
+import { useOrderDetails } from '../../../../store';
+
+interface ApiResponse {
+  message: string;
+  code: number;
+  error: string | null;
+  error_traceback: string | null;
+  data: [];
+  setShouldPerformAction: boolean;
+}
+
+function FDNotification() {
+  const [taskData, setTasksData] = useTasksData();
+  const [orderData] = useOrderDetails();
+  const routeId = orderData?.order_routes?.route_id;
+  const [, setRouteDetails] = useRouteDetails();
+
+  //Unresolved API
+  const {
+    data: fetchedUnresolvedData,
+    loading: unresolvedLoading,
+    fetchData: callUnresolvedTaskApi,
+  } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `/v1/task/`,
+    method: 'GET',
+    pagination: { is_pagination: false },
+    filters: [
+      { field: 'department', op: '=', value: 'debrief' },
+      {
+        field: 'order_id',
+        op: '=',
+        value: `${orderData?.id}`,
+      },
+    ],
+  });
+
+  //flags data set
+  useEffect(() => {
+    if (fetchedUnresolvedData && fetchedUnresolvedData?.data) {
+      setTasksData(fetchedUnresolvedData?.data);
+    }
+  }, [unresolvedLoading, fetchedUnresolvedData]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (orderData?.id == null) return;
+
+      try {
+        await callUnresolvedTaskApi();
+      } catch (error) {
+        console.error('Error while fetching order-related data:', error);
+      }
+    };
+
+    fetchData();
+  }, [orderData?.id]);
+
+  const {
+    fetchData: fetchRouteDetails,
+    data: routesData,
+    loading: routesDataLoading,
+  } = useAxios<{
+    data: any;
+  }>({
+    endpoint: `/route/debrief/`,
+    method: 'GET',
+  });
+  useEffect(() => {
+    if (routeId !== undefined && routeId !== null) {
+      fetchRouteDetails({
+        endPointQuery: routeId,
+      });
+    } else {
+      setRouteDetails([]);
+    }
+  }, [routeId]);
+
+  useEffect(() => {
+    if (routesData?.data?.length > 0) {
+      const routeData: any = routesData?.data[0];
+      setRouteDetails(routeData);
+    }
+  }, [routesDataLoading]);
+
+  return (
+    <>
+      <Section>
+        {unresolvedLoading ? (
+          <Loader>
+            <Spinner />
+            <Text>Fetching Notifications...</Text>
+          </Loader>
+        ) : taskData?.length > 0 || orderData ? (
+          <TabsWrapper>
+            <Tabs />
+          </TabsWrapper>
+        ) : (
+          'No Notifications Found'
+        )}
+      </Section>
+    </>
+  );
+}
+
+const Loader = styled.div`
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const Spinner = styled.div`
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #3a3630;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 10px;
+  box-shadow: 0px 4px 30px 0px rgba(46, 45, 116, 0.05);
+  border: 1px solid #e0e0e0;
+`;
+
+const TabsWrapper = styled.div`
+  /* min-height: 200px; */
+  max-height: 350px;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+
+  &:hover {
+    scrollbar-width: thin;
+  }
+
+  &::-webkit-scrollbar {
+    width: 0;
+  }
+
+  &:hover::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+`;
+
+const Text = styled.div`
+  color: var(--tonal-brown-651, #6a7378);
+  font-family: Lato;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 600;
+`;
+export default FDNotification;