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

package/src/components/order-view/modalsPopup/CreateReturnModal.tsx

@@ -62,24 +62,26 @@ const CreateReturnModal = () => {
         />
         <Container>
           <ul style={{ listStyle: 'none', padding: 0 }}>
-            {uniqueLocations?.map((returnLoc: any) => (
-              <li
-                key={returnLoc.id}
-                style={{
-                  marginBottom: '8px',
-                  display: 'flex',
-                  alignItems: 'center',
-                }}
-              >
-                <Checkbox
-                  checked={selectedlocation?.includes(returnLoc.id)}
-                  onChange={() => handleSelectLocations(returnLoc.id)}
-                />
-                <StyledText style={{ marginLeft: '8px' }}>
-                  {displayValueOrNA(returnLoc?.return_locations?.location_name)}
-                </StyledText>
-              </li>
-            ))}
+            {uniqueLocations?.map((returnLoc: any) => {
+              return (
+                <li
+                  key={returnLoc.id}
+                  style={{
+                    marginBottom: '8px',
+                    display: 'flex',
+                    alignItems: 'center',
+                  }}
+                >
+                  <Checkbox
+                    checked={selectedlocation?.includes(returnLoc.id)}
+                    onChange={() => handleSelectLocations(returnLoc.id)}
+                  />
+                  <StyledText style={{ marginLeft: '8px' }}>
+                    {displayValueOrNA(returnLoc?.return_location_name)}
+                  </StyledText>
+                </li>
+              );
+            })}
           </ul>
         </Container>
       </Wrapper>

package/src/components/order-view/modalsPopup/ModalManager.tsx

@@ -1,12 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { AntModal, useApiHook } from '@bjsdistribution/dms-component-library';
 import { useAtom } from 'jotai';
-import {
-  countReducerAtom,
-  useDeleteProdsID,
-  usefetchAgain,
-  useProductDetails,
-} from '../store';
+import { countReducerAtom, useDeleteProdsID, usefetchAgain } from '../store';
 
 import DefectsModal from './DefectsModal';
 import { ApiResponse } from '../types';
@@ -25,7 +20,6 @@ import { useNavigate } from 'react-router-dom';
 
 const ModalManager = () => {
   const [popupName, dispatch] = useAtom(countReducerAtom);
-  const [,] = useProductDetails();
   const [selectedRows] = useDeleteProdsID();
   const [, setIsFormValid] = useState(false);
   const [newGrouped] = useFinalPayload();
@@ -60,7 +54,7 @@ const ModalManager = () => {
   } = useApiHook<{
     data: ApiResponse[];
   }>({
-    endpoint: `return_orders/`,
+    endpoint: `/v1/return/create/`,
     method: 'POST',
     body: newGrouped,
     performAction: false,
@@ -96,7 +90,7 @@ const ModalManager = () => {
       setShouldPerformAction(false);
       setError(null);
       // @ts-ignore
-    } else if (response?.code === 200) {
+    } else if (response?.code === 201 || response?.code === 200) {
       notification.success({
         message: 'Success',
         // @ts-ignore
@@ -111,7 +105,7 @@ const ModalManager = () => {
       setError(null);
 
       // for local
-      // navigate('/order-return');
+      // navigate('/overview');
 
       // for dev
       navigate('/orders/view/return/overview');

package/src/components/order-view/notes/logs/index.tsx

@@ -11,7 +11,7 @@ function AuditLogs() {
 }
 
 const Container = styled.div`
-  height: 295px; /* Set height to limit container size */
+  height: 550px; /* Set height to limit container size */
   overflow: auto; /* Enable scrolling */
   scrollbar-width: thin;
 `;

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -22,10 +22,9 @@ const NewReturnDropdown = () => {
   const [orderId] = useOrderId();
 
   const id = orderData?.customer_id;
-
   useEffect(() => {
     const allProductIds =
-      productData?.map((product: any) => product.return_location) || [];
+      productData?.map((product: any) => product?.return_location) || [];
     setId(allProductIds);
   }, [productData]);
 
@@ -47,9 +46,9 @@ const NewReturnDropdown = () => {
   const { data: fetchedReturnOrderData, setShouldPerformAction } = useApiHook<
     ApiResponse
   >({
-    endpoint: '/return_orders/?skip_filters=0',
+    endpoint: '/v1/return/orders/',
     method: 'GET',
-    filters,
+    filters: filters && filters?.length > 0 ? filters : undefined,
     //@ts-ignore
     pagination: { is_pagination: false },
     performAction: false,
@@ -80,10 +79,9 @@ const NewReturnDropdown = () => {
   const handleDropdownChange = (value: string) => {
     setSelectedOrderId(value);
   };
-
   const dropdownOptions = returnOrderData?.map((order: any) => ({
-    label: `${order.order_recipient.recipient_name} - ${order.order_recipient.postcode}`,
-    value: order.id,
+    label: `${order?.recipient_name} - ${order?.postcode}`,
+    value: order?.id,
   }));
 
   return (

package/src/components/order-view/notification/FlagTemplate.tsx

@@ -5,9 +5,10 @@ import { useFlagRefId } from '../order-actions/store';
 import { useCurrentAction } from '../store';
 import { formatDate } from '../order-actions/utils';
 
-function FlagTemplate({ data }: any) {
+function FlagTemplate({ data, dismissFlags }: any) {
   const [, setSelectedFlag] = useFlagRefId();
   const [, setCurrentAction] = useCurrentAction();
+
   const openModal = () => {
     setCurrentAction('view-flag');
   };
@@ -16,20 +17,20 @@ function FlagTemplate({ data }: any) {
     openModal();
   };
 
-  const titleColor = data.task_status_id === 2 ? '#36A053' : '#3a3630';
+  const titleColor = data?.status === 'SD' ? '#36A053' : '#3a3630';
   return (
     <StyledAlert>
       <FlagAlert
-        type={data?.task_status_id === 1 ? 'info' : 'success'}
+        type={data?.status === 'AD' ? 'info' : 'success'}
         title={
           <>
             <StyledTitle color={titleColor}>
               Flag : {data?.is_private ? 'Private' : ''}{' '}
               <StyledLink onClick={() => handleClick(data.id)}>
-                {data?.id} - {data?.tasks_types?.type}{' '}
+                {data?.id} - {data?.flag_type}{' '}
               </StyledLink>{' '}
-              {data.task_status_id === 1 ? 'Unresolved' : 'Resolved on'}{' '}
-              {data.task_status_id == 2 ? (
+              {data?.status === 'AD' ? 'Unresolved' : 'Resolved on'}{' '}
+              {data?.status == 'SD' ? (
                 <>
                   {formatDate(data?.resolved_at)} by {data?.resolved_by}{' '}
                 </>
@@ -40,7 +41,7 @@ function FlagTemplate({ data }: any) {
         subtitle=""
         description={`${data?.description}`}
         showOkButton={false}
-        onClose={() => {}}
+        onClose={() => dismissFlags(data?.id)}
       />
     </StyledAlert>
   );
@@ -56,7 +57,6 @@ const StyledLink = styled.span`
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
-  cursor: pointer;
 `;
 
 const StyledTitle = styled.span<{ color: string }>`

package/src/components/order-view/notification/OrderTemplate.tsx

@@ -1,20 +1,14 @@
 import { FlagAlert } from '@bjsdistribution/dms-component-library';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import {
-  useAllOrderStatus,
-  useOrderNotify,
-  useRouteDetails,
-} from '../order-actions/store';
-import { format } from 'date-fns';
+import { useOrderNotify } from '../order-actions/store';
 import { useOrderStaticData } from '../store';
 
-function OrderTemplate({ orderDetails }: any) {
-  const [routeData] = useRouteDetails();
+function OrderTemplate({ orderDetails, routeInfoData }: any) {
   const [, setOrderCount] = useOrderNotify();
-  const [statusVal] = useAllOrderStatus();
   const precall = false;
   const [orderStaticData] = useOrderStaticData();
+  const statusVal = routeInfoData?.status_value;
 
   const unholdReasons = orderStaticData?.cancellation_reasons?.map(
     (x: any) => ({
@@ -43,18 +37,9 @@ function OrderTemplate({ orderDetails }: any) {
     isEnroute: true,
     isPreCall: true,
     isConfirmed: true,
+    isPostcode: true,
   });
 
-  const crewDetails =
-    routeData?.route_crew_info?.crew1_id +
-    ' ' +
-    routeData?.route_crew_info?.crew1 +
-    ' ' +
-    routeData?.route_crew_info?.crew2_id +
-    ' ' +
-    routeData?.route_crew_info?.crew2 +
-    ' ';
-
   useEffect(() => {
     if (precall) {
       setOrderCount(prevCount => prevCount + 1);
@@ -77,21 +62,11 @@ function OrderTemplate({ orderDetails }: any) {
           <FlagAlert
             type="warn"
             title={
-              <>
-                {orderDetails?.order_on_hold?.hold_indefinitely === false ? (
-                  <HoldText>
-                    on hold until:{' '}
-                    {orderDetails?.order_on_hold?.hold_untill
-                      ? format(
-                          new Date(orderDetails?.order_on_hold?.hold_untill),
-                          'dd/MM/yyyy'
-                        )
-                      : ''}
-                  </HoldText>
-                ) : (
-                  <HoldText>On Hold Until: Indefinitely</HoldText>
-                )}
-              </>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
             }
             description={''}
             showOkButton={false}
@@ -99,25 +74,18 @@ function OrderTemplate({ orderDetails }: any) {
           />
         </StyledAlert>
       )}
-      {orderDetails.status == 'SD' && alertVisibility.isCompleted && (
+      {statusVal == 'complete' && alertVisibility.isCompleted && (
         <StyledAlert>
           <FlagAlert
             type="success"
             title={
-              <TitleText>
-                Completed: {orderDetails?.order_routes?.complete_time}, Signee:{' '}
-                {orderDetails?.order_routes?.signee} Notes :
-                {orderDetails?.order_routes?.complete_notes}
-              </TitleText>
-            }
-            description={
-              <SubtitleText>
-                Route: {routeData?.route_name}
-                {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
-                {routeData?.route_detail?.vehicle_number} | Crew : {crewDetails}
-                | {routeData?.route_date}
-              </SubtitleText>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
             }
+            description={''}
             showOkButton={false}
             onClose={() => onCloseAlert('isCompleted')}
           />
@@ -128,11 +96,13 @@ function OrderTemplate({ orderDetails }: any) {
         <StyledAlert>
           <FlagAlert
             type="success"
-            title={`Order Pre-Call Slot Time : ${orderDetails?.order_eta_updates?.map(
-              (i: any) => i?.slot_start
-            )} - ${orderDetails?.order_eta_updates?.map(
-              (i: any) => i?.slot_end
-            )}`}
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
+            }
             description={``}
             showOkButton={false}
             onClose={() => onCloseAlert('isPreCall')}
@@ -144,7 +114,13 @@ function OrderTemplate({ orderDetails }: any) {
         <StyledAlert>
           <FlagAlert
             type="release"
-            title={`Outstanding`}
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
+            }
             description={``}
             showOkButton={false}
             onClose={() => onCloseAlert('isOutstanding')}
@@ -157,18 +133,11 @@ function OrderTemplate({ orderDetails }: any) {
             <FlagAlert
               type="info"
               title={
-                <>
-                  <ScheduledText>
-                    Scheduled For :{' '}
-                    {orderDetails?.action_date
-                      ? format(
-                          new Date(orderDetails?.action_date),
-                          'dd/MM/yyyy'
-                        )
-                      : ''}{' '}
-                    <span>, Awaiting Confirmation</span>
-                  </ScheduledText>
-                </>
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: routeInfoData?.order_alert,
+                  }}
+                ></div>
               }
               description={``}
               showOkButton={false}
@@ -181,15 +150,11 @@ function OrderTemplate({ orderDetails }: any) {
           <FlagAlert
             type="info"
             title={
-              <>
-                <ScheduledText>
-                  Scheduled For :{' '}
-                  {orderDetails?.action_date
-                    ? format(new Date(orderDetails?.action_date), 'dd/MM/yyyy')
-                    : ''}{' '}
-                  ,<span> Awaiting Route</span>
-                </ScheduledText>
-              </>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
             }
             description={``}
             showOkButton={false}
@@ -201,7 +166,13 @@ function OrderTemplate({ orderDetails }: any) {
         <StyledAlert>
           <FlagAlert
             type="error"
-            title={`This order has been cancelled`}
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
+            }
             description={reason}
             showOkButton={false}
             onClose={() => onCloseAlert('isCancelled')}
@@ -213,24 +184,11 @@ function OrderTemplate({ orderDetails }: any) {
           <FlagAlert
             type="info"
             title={
-              <>
-                <EnRouteText>
-                  Allocated to Route :{' '}
-                  <span>
-                    {routeData?.route_name}
-                    {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
-                    {routeData?.route_detail?.vehicle_number} | Crew :{' '}
-                    {crewDetails}|{' '}
-                    {routeData?.route_date
-                      ? format(new Date(routeData?.route_date), 'dd/MM/yyyy')
-                      : ''}{' '}
-                  </span>
-                  <span>
-                    {' '}
-                    , Confirmed: <span className="no">NO</span>
-                  </span>
-                </EnRouteText>
-              </>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
             }
             description={``}
             showOkButton={false}
@@ -244,24 +202,11 @@ function OrderTemplate({ orderDetails }: any) {
           <FlagAlert
             type="info"
             title={
-              <>
-                <EnRouteText>
-                  Allocated to Route :{' '}
-                  <span>
-                    {routeData?.route_name}
-                    {routeData?.route_lock ? ' *LOCKED* ' : ''} on{' '}
-                    {routeData?.route_detail?.vehicle_number} | Crew :{' '}
-                    {crewDetails}|{' '}
-                    {routeData?.route_date
-                      ? format(new Date(routeData?.route_date), 'dd/MM/yyyy')
-                      : ''}{' '}
-                  </span>
-                  <span>
-                    {' '}
-                    , Confirmed: <span className="yes">YES</span>
-                  </span>
-                </EnRouteText>
-              </>
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_alert,
+                }}
+              ></div>
             }
             description={``}
             showOkButton={false}
@@ -269,81 +214,130 @@ function OrderTemplate({ orderDetails }: any) {
           />
         </StyledAlert>
       )}
+
+      {routeInfoData?.same_postcode_orders && alertVisibility.isPostcode && (
+        <FlagAlert
+          type="info"
+          title=""
+          description={
+            <FlagsStyle>
+              <div className="postcode-alert-content">
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: routeInfoData.same_postcode_orders,
+                  }}
+                />
+              </div>
+            </FlagsStyle>
+          }
+          showOkButton={false}
+          onClose={() => onCloseAlert('isPostcode')}
+        />
+      )}
     </>
   );
 }
 
-const StyledAlert = styled.div`
-  margin-bottom: 5px;
-`;
-
-const SubtitleText = styled.div`
-  color: #36a053;
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 24px;
-`;
-
-const TitleText = styled.div`
-  color: #3a3630;
-  font-family: Lato;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 18px;
-`;
+const FlagsStyle = styled.div`
+  .postcode-alert-content {
+    > div {
+      > h4 {
+        color: #3a3630;
+        font-family: Lato;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 18px;
+      }
+    }
+    ul {
+    }
 
-const ScheduledText = styled.div`
-  color: #6396e5;
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  span {
-    color: #36a053;
-    font-family: Roboto;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-  }
-`;
+    li {
+      border-radius: 6px;
+      list-style-type: none;
+      > a {
+        color: #6396e5;
+        font-family: Roboto;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 24px;
+        text-decoration: none;
+      }
+      > strong {
+        > a {
+          color: #6396e5;
+          font-family: Roboto;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 600;
+          line-height: 24px;
+          text-decoration: none;
+        }
+      }
+    }
 
-const HoldText = styled.div`
-  color: #feba30;
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  span {
-    color: #6a7378;
-    font-family: Roboto;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-  }
-`;
+    li.outstanding strong,
+    li.awaiting_confirmation strong,
+    li.awaiting_route strong {
+      font-family: Roboto, sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      line-height: 24px;
+      font-style: normal;
+    }
+    li.routed strong {
+      margin-left: 5px;
+      color: #3a3630;
+      font-family: Lato;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 18px;
+    }
 
-const EnRouteText = styled.div`
-  color: #36a053;
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  span {
-    color: #6396e5;
-    font-family: Roboto;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    .yes {
+    li.outstanding strong {
+      color: #e95252;
+    }
+    li.awaiting_confirmation strong {
+      color: #6396e5;
+    }
+    li.awaiting_route strong {
       color: #36a053;
     }
-    .no {
+    li.confirmed strong {
+      color: #36a053;
+    }
+    li.enroute strong {
+      color: #36a053;
+    }
+    li.cancelled strong {
       color: #e95252;
     }
+    li.complete strong {
+      color: #36a053;
+    }
+    li.on_hold strong {
+      color: #feba30;
+    }
+    li.routed strong {
+      color: #3a3630;
+    }
+    span {
+      margin-left: 5px;
+      color: #3a3630;
+      font-family: Lato;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 18px;
+    }
   }
 `;
 
+const StyledAlert = styled.div`
+  margin-bottom: 5px;
+`;
+
 export default OrderTemplate;