@bjsdistribution/dms-client-return 0.1.9-prod → 0.1.10-prod

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

@@ -8,12 +8,13 @@ import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
 
 export const payloadAtom = atom<any>(null);
+export const selectedOrderId = atom<any>(null);
 
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
   const [returnOrderData, setReturnOrderData] = useNewReturnOrderData();
-  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [selectedId, setSelectedOrderId] = useAtom(selectedOrderId);
   const [selectedProducts] = useSelectedProducts();
   const [orderData] = useOrderDetails();
   const [, setPayload] = useAtom(payloadAtom);
@@ -67,14 +68,14 @@ const NewReturnDropdown = () => {
   }, [fetchedReturnOrderData, id]);
 
   useEffect(() => {
-    if (selectedOrderId && selectedProducts?.length > 0) {
+    if (selectedId && selectedProducts?.length > 0) {
       const newPayload = {
-        new_return_order: selectedOrderId,
+        new_return_order: selectedId,
         products: selectedProducts,
       };
       setPayload(newPayload);
     }
-  }, [selectedOrderId, selectedProducts, setPayload]);
+  }, [selectedId, selectedProducts, setPayload]);
 
   const handleDropdownChange = (value: string) => {
     setSelectedOrderId(value);
@@ -83,23 +84,20 @@ const NewReturnDropdown = () => {
     label: `${order?.recipient_name} - ${order?.postcode}`,
     value: order?.id,
   }));
-
   return (
     <Container>
       <Text>New Return Order:</Text>
       <StyledAntSelect
         options={dropdownOptions}
-        value={selectedOrderId}
+        value={selectedId}
         placeholder="Select"
         // @ts-ignore
         onChange={handleDropdownChange}
         style={defaultSelectStyle}
         showSearch
-        dropdownStyle={{ width: 'max-content' }}
+        dropdownStyle={{ width: '250px' }}
         popupClassName={defaultPopupClassName}
-        status={
-          dropdownOptions.length === 0 ? '' : selectedOrderId ? '' : 'error'
-        }
+        status={dropdownOptions.length === 0 ? '' : selectedId ? '' : 'error'}
         notFoundContent="No orders found with a similar postcode"
       />
     </Container>

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

@@ -1,15 +1,16 @@
 import { FlagAlert } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useOrderNotify } from '../order-actions/store';
 import { useOrderStaticData } from '../store';
+import { useClientPortal } from '../../store';
 
 function OrderTemplate({ orderDetails, routeInfoData }: any) {
   const [, setOrderCount] = useOrderNotify();
-  const precall = false;
+  // const precall = false;
   const [orderStaticData] = useOrderStaticData();
   const statusVal = routeInfoData?.status_value;
-
+  const [isClientPortal] = useClientPortal();
   const unholdReasons = orderStaticData?.cancellation_reasons?.map(
     (x: any) => ({
       id: x?.id,
@@ -38,13 +39,17 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
     isPreCall: true,
     isConfirmed: true,
     isPostcode: true,
+    isSubcontracted: true,
+    isRouted: true,
+    isOnSite: true,
+    isFailed: true,
   });
 
-  useEffect(() => {
-    if (precall) {
-      setOrderCount(prevCount => prevCount + 1);
-    }
-  }, [precall]);
+  // useEffect(() => {
+  //   if (precall) {
+  //     setOrderCount(prevCount => prevCount + 1);
+  //   }
+  // }, [precall]);
 
   //on close alert functionality
   const onCloseAlert = (alertType: string) => {
@@ -57,6 +62,28 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
 
   return (
     <>
+      {/* order_red_cross_alerts */}
+      {!isClientPortal && routeInfoData?.order_red_cross_alerts?.length > 0 && (
+        <FlagAlert
+          type="error"
+          title=""
+          description={
+            <FlagsStyle>
+              <div className="redCross">
+                <div
+                  className="spanStyle"
+                  dangerouslySetInnerHTML={{
+                    __html: routeInfoData?.order_red_cross_alerts,
+                  }}
+                />
+              </div>
+            </FlagsStyle>
+          }
+          showOkButton={false}
+          onClose={() => onCloseAlert('isPostcode')}
+        />
+      )}
+
       {statusVal == 'on hold' && alertVisibility?.isHoldVisible && (
         <StyledAlert>
           <FlagAlert
@@ -64,7 +91,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -81,7 +108,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -92,24 +119,6 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
         </StyledAlert>
       )}
 
-      {precall && alertVisibility.isPreCall && (
-        <StyledAlert>
-          <FlagAlert
-            type="success"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isPreCall')}
-          />
-        </StyledAlert>
-      )}
-
       {statusVal == 'outstanding' && alertVisibility.isOutstanding && (
         <StyledAlert>
           <FlagAlert
@@ -117,7 +126,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -127,6 +136,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
           />
         </StyledAlert>
       )}
+
       {statusVal == 'awaiting confirmation' &&
         alertVisibility.isAwaitingConfirmation && (
           <StyledAlert>
@@ -135,7 +145,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
               title={
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: routeInfoData?.order_alert,
+                    __html: routeInfoData?.order_info_alerts,
                   }}
                 ></div>
               }
@@ -152,7 +162,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -165,11 +175,11 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
       {statusVal == 'cancelled' && alertVisibility.isCancelled && (
         <StyledAlert>
           <FlagAlert
-            type="error"
+            type="info"
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -179,6 +189,43 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
           />
         </StyledAlert>
       )}
+
+      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isConfirmed')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'subcontracted' && alertVisibility.isSubcontracted && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isRouted')}
+          />
+        </StyledAlert>
+      )}
+
       {statusVal == 'enroute' && alertVisibility.isEnroute && (
         <StyledAlert>
           <FlagAlert
@@ -186,7 +233,7 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
@@ -197,34 +244,89 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
         </StyledAlert>
       )}
 
-      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
+      {statusVal == 'routed' && alertVisibility.isRouted && (
         <StyledAlert>
           <FlagAlert
             type="info"
             title={
               <div
                 dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_alert,
+                  __html: routeInfoData?.order_info_alerts,
                 }}
               ></div>
             }
             description={``}
             showOkButton={false}
-            onClose={() => onCloseAlert('isConfirmed')}
+            onClose={() => onCloseAlert('isRouted')}
           />
         </StyledAlert>
       )}
 
-      {routeInfoData?.same_postcode_orders && alertVisibility.isPostcode && (
+      {statusVal == 'precalled' && alertVisibility.isPreCall && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isPreCall')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'on site' && alertVisibility.isOnSite && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isOnSite')}
+          />
+        </StyledAlert>
+      )}
+
+      {statusVal == 'failed' && alertVisibility.isFailed && (
+        <StyledAlert>
+          <FlagAlert
+            type="info"
+            title={
+              <div
+                dangerouslySetInnerHTML={{
+                  __html: routeInfoData?.order_info_alerts,
+                }}
+              ></div>
+            }
+            description={``}
+            showOkButton={false}
+            onClose={() => onCloseAlert('isFailed')}
+          />
+        </StyledAlert>
+      )}
+
+      {/* order_warnings_alerts */}
+      {!isClientPortal && routeInfoData?.order_warnings_alerts?.length > 0 && (
         <FlagAlert
-          type="info"
+          type="warn"
           title=""
           description={
             <FlagsStyle>
-              <div className="postcode-alert-content">
+              <div className="">
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: routeInfoData.same_postcode_orders,
+                    __html: routeInfoData?.order_warnings_alerts,
                   }}
                 />
               </div>
@@ -234,11 +336,58 @@ function OrderTemplate({ orderDetails, routeInfoData }: any) {
           onClose={() => onCloseAlert('isPostcode')}
         />
       )}
+
+      {/* order_green_check_alerts */}
+      {!isClientPortal && routeInfoData?.order_green_check_alerts?.length > 0 && (
+        <FlagAlert
+          type="success"
+          title=""
+          description={
+            <FlagsStyle>
+              <div className="">
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: routeInfoData?.order_green_check_alerts,
+                  }}
+                />
+              </div>
+            </FlagsStyle>
+          }
+          showOkButton={false}
+          onClose={() => onCloseAlert('isPostcode')}
+        />
+      )}
+
+      {!isClientPortal &&
+        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 FlagsStyle = styled.div`
+  .redCross {
+    font-size: 13px;
+    margin-top: 4px;
+  }
   .postcode-alert-content {
     > div {
       > h4 {
@@ -251,6 +400,7 @@ const FlagsStyle = styled.div`
       }
     }
     ul {
+      margin-bottom: 0;
     }
 
     li {
@@ -268,6 +418,7 @@ const FlagsStyle = styled.div`
       > strong {
         > a {
           color: #6396e5;
+
           font-family: Roboto;
           font-size: 14px;
           font-style: normal;

package/src/components/order-view/order-actions/actions/cancel-order/ReturnAction.tsx

@@ -1,15 +1,36 @@
+import { useCancelOrderProducts, useOrderStaticData } from '../../../store';
+import { CancelOrderProductsType } from '../../../types';
 import OrderActionsDropdown from '../../Dropdown';
 import React from 'react';
 function ReturnAction() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [orderStaticData] = useOrderStaticData();
+  const [, setCancelOrderProducts] = useCancelOrderProducts();
+  // const onSearch = () => {};
+
+  const returnActionOptions = orderStaticData?.order_product_return_action?.map(
+    (option: any) => ({
+      label: option?.value,
+      value: option?.value,
+    })
+  );
+
+  const onSelect = (selectedValue: any) => {
+    setCancelOrderProducts((prev: CancelOrderProductsType[]) =>
+      prev?.map((item: any) => ({
+        ...item,
+        action: 'return',
+        return_action: selectedValue,
+      }))
+    );
+  };
+
   return (
     <OrderActionsDropdown
       label="Return Action"
       placeholder="Select Return Action"
-      options={[]}
+      options={returnActionOptions}
       onSelect={onSelect}
-      onSearch={onSearch}
+      // onSearch={onSearch}
     />
   );
 }

package/src/components/order-view/order-actions/actions/cancel-order/ReturnReason.tsx

@@ -1,15 +1,35 @@
+import { useCancelOrderProducts, useOrderStaticData } from '../../../store';
+import { CancelOrderProductsType } from '../../../types';
 import OrderActionsDropdown from '../../Dropdown';
 import React from 'react';
 function ReturnReason() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [orderStaticData] = useOrderStaticData();
+  const [, setCancelOrderProducts] = useCancelOrderProducts();
+
+  const returnReasonsOptions = orderStaticData?.return_reasons?.map(
+    (option: any) => ({
+      label: option?.reason,
+      value: option?.reason,
+    })
+  );
+  const onSelect = (selectedValue: any) => {
+    setCancelOrderProducts((prev: CancelOrderProductsType[]) =>
+      prev?.map((item: any) => ({
+        ...item,
+        action: 'return',
+        return_reason: selectedValue,
+      }))
+    );
+  };
+  // const onSearch = () => {};
+
   return (
     <OrderActionsDropdown
       label="Return Reason"
       placeholder="Select Return Reason"
-      options={[]}
+      options={returnReasonsOptions}
       onSelect={onSelect}
-      onSearch={onSearch}
+      // onSearch={onSearch}
     />
   );
 }

package/src/components/order-view/order-actions/actions/clear-booking-status/ClearBookingStatus.tsx

@@ -16,7 +16,11 @@ import { ApiResponse, OrdersType } from '../../../types';
 import { useLoading } from '../../../../order-daily-overview/store/store';
 import { notification } from 'antd';
 
-const ClearBookingStatus = () => {
+interface IProps {
+  callOrderAlertsApi: any;
+}
+
+const ClearBookingStatus = (props: IProps) => {
   const [orderId] = useOrderId();
   const [, setOrderDetails] = useOrderDetails();
   const [, setPrevOrderDetails] = usePrevOrderDetails();
@@ -41,13 +45,16 @@ const ClearBookingStatus = () => {
     method: 'GET',
     performAction: false,
   });
-
+  const callOrdersApi = async () => {
+    await props?.callOrderAlertsApi();
+  };
   useEffect(() => {
     setLoading(loading);
     if (fetchedData && fetchedData?.data) {
       const requiredData = fetchedData?.data;
       setOrderDetails(requiredData[0]);
       setPrevOrderDetails(requiredData[0]);
+      callOrdersApi();
       setCurrentAction(undefined);
     }
     if (

package/src/components/order-view/order-actions/actions/confirm-order/index.tsx

@@ -26,7 +26,11 @@ import { compareOrderDetailsStates, filterObject } from '../../../utils';
 import { format } from 'date-fns';
 import { useConfirmOrderDate } from '../../store';
 
-function ConfirmOrder() {
+interface IProps {
+  callOrderAlertsApi: any;
+}
+
+function ConfirmOrder(props: IProps) {
   const [, setCurrentAction] = useCurrentAction();
   const [orderDetails, setOrderDetails] = useOrderDetails();
   const [prevOrderDetails, setPrevOrderDetails] = usePrevOrderDetails();
@@ -201,6 +205,7 @@ function ConfirmOrder() {
       case 'no_contact':
         // await confirmDeliveryDate();
         notificationCall();
+        await fetchStatusData();
         break;
 
       case 'precall':
@@ -209,6 +214,7 @@ function ConfirmOrder() {
         }
         // await confirmDeliveryDate();
         sendComs();
+        await fetchStatusData();
         break;
       default:
         break;
@@ -247,9 +253,6 @@ function ConfirmOrder() {
       }
     }
 
-    // Execute actions first
-    await executeActions();
-
     const keysToRemovefromOrders = [
       'order_locked',
       'order_communications',
@@ -288,8 +291,6 @@ function ConfirmOrder() {
         [key: string]: any;
       };
 
-      await executeSendComs();
-
       if (response?.data?.length > 0) {
         const updatedOrder = response?.data[0];
         setOrderDetails(updatedOrder);
@@ -300,10 +301,15 @@ function ConfirmOrder() {
       }
     }
 
+    // Execute actions first
+    await executeActions();
+    await executeSendComs();
+
     if (orderId && deliveryDate) {
       const formattedDate = format(new Date(deliveryDate), 'yyyy-MM-dd');
       setDeliveryDate(formattedDate);
     }
+    await props?.callOrderAlertsApi();
 
     setCurrentAction(undefined);
   };

package/src/components/order-view/order-actions/actions/create-task-reminder/CreateReminderModal.tsx

@@ -39,7 +39,7 @@ function CreateReminderModal() {
       deptId: number | null;
     }[]
   >([]);
-  const [, setFilteredUsers] = useState<typeof allUsers>([]);
+  const [filteredUsers, setFilteredUsers] = useState<typeof allUsers>([]);
 
   const handleSelectUser = (value: string[]) => {
     setReminderPayload((prevState: any) => ({
@@ -201,7 +201,7 @@ function CreateReminderModal() {
     }
   }, [fetchData]);
 
-  const userOptions = allUsers?.map((user: any) => ({
+  const userOptions = filteredUsers?.map((user: any) => ({
     label: `${user.fName} ${user.lName}`,
     value: user.id,
   }));