@bjsdistribution/dms-client-return 0.1.19-dev → 0.1.19-prod

package/src/components/order-view/order-actions/actions/force-debrief/order-info/success-content/index.tsx

@@ -0,0 +1,221 @@
+import React from 'react';
+import styled from 'styled-components';
+import {
+  CalendarIcon,
+  Label,
+  TextArea,
+} from '@bjsdistribution/dms-component-library';
+import { Input } from '../../styles';
+import {
+  useChargesState,
+  useOrderDetails,
+  useProductDetails,
+} from '../../../../../store';
+import { getBaseUrlSymbol } from '../../../../../utils';
+
+const formatDate = (date: any) => {
+  const padZero = (num: any) => num.toString().padStart(2, '0');
+  const year = new Date(date).getFullYear();
+  const month = padZero(new Date(date).getMonth() + 1);
+  const day = padZero(new Date(date).getDate());
+  return `${day}/${month}/${year}`;
+};
+
+function SuccessContent() {
+  const [orderDetails] = useOrderDetails();
+  const [chargesState] = useChargesState();
+  const baseUrlSymbol = getBaseUrlSymbol();
+
+  const [productdata] = useProductDetails();
+  const sortedProductData = productdata?.sort((a: any, b: any) => {
+    return a?.status === b?.status ? 0 : a?.status ? -1 : 1;
+  });
+
+  const products = Array.isArray(sortedProductData)
+    ? sortedProductData?.filter(item => item?.status === true)
+    : [];
+
+  const excludedFields = [
+    'debrief_notes',
+    'new_order_status',
+    'base_charge_type',
+    'adhoc_charges',
+    'debrief_status',
+  ]; // Fields to exclude
+  let totalChargesAmount = 0;
+
+  for (const [key, value] of Object.entries(chargesState)) {
+    if (!excludedFields.includes(key) && typeof value === 'number') {
+      totalChargesAmount += value;
+    }
+  }
+
+  const formattedDate =
+    orderDetails?.action_date === null
+      ? ' '
+      : formatDate(orderDetails?.action_date);
+
+  const adhocTotalCharges =
+    chargesState?.adhoc_charges?.length > 0
+      ? chargesState?.adhoc_charges?.reduce(
+          (acc, item) => acc + item.adhoc_charges,
+          0
+        )
+      : 0;
+
+  return (
+    <Wrapper>
+      <FieldGroup>
+        <Label label="Signed By" htmlFor="signedby" />
+        <StyledInput
+          id="signedby"
+          placeholder=""
+          value={orderDetails?.order_recipient?.recipient_name || ''}
+          onChange={() => {}}
+          disabled
+        />
+
+        <Label label="Date" htmlFor="datefield" />
+        <DateInput>
+          <Text>{formattedDate}</Text>
+          <CalendarIcon />
+        </DateInput>
+
+        <GroupedFields>
+          <PairGroup>
+            <SmallGroup>
+              <Label label="Items" htmlFor="items" />
+              <Text>{products?.length}</Text>
+            </SmallGroup>
+            <SmallGroup>
+              <Label label="Zone" htmlFor="zone" />
+              <Text>{orderDetails?.zone_code}</Text>
+            </SmallGroup>
+          </PairGroup>
+
+          <PairGroup>
+            <SmallGroup>
+              <Label label="Weight" htmlFor="weight" />
+              <Text>{orderDetails?.weight}Kg</Text>
+            </SmallGroup>
+
+            <SmallGroup>
+              <Label label="Total Charge" htmlFor="totalCharge" />
+              <div
+                style={{ display: 'flex', gap: '4px', alignItems: 'center' }}
+              >
+                <CurrencyWrapper>{baseUrlSymbol}</CurrencyWrapper>
+                <Text>{totalChargesAmount + adhocTotalCharges}</Text>
+              </div>
+            </SmallGroup>
+          </PairGroup>
+        </GroupedFields>
+      </FieldGroup>
+
+      <DropdownGrid>
+        <FieldGroup wide>
+          <Label label="Order Status Notes" htmlFor="notes" />
+          <TextInput
+            id="notes"
+            placeholder="Type notes here..."
+            value={orderDetails?.order_status_note || ''}
+            readOnly
+          />
+        </FieldGroup>
+
+        <FieldGroup wide>
+          <Label label="Charge Description" htmlFor="chargedescription" />
+          <TextInput
+            id="chargedescription"
+            placeholder="Type charge description here..."
+            onChange={() => {}}
+          />
+        </FieldGroup>
+      </DropdownGrid>
+    </Wrapper>
+  );
+}
+
+const CurrencyWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  color: #999;
+`;
+
+const DropdownGrid = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 48%;
+`;
+
+const GroupedFields = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+`;
+
+const PairGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+`;
+
+const SmallGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1;
+  width: 48%;
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 100%;
+  padding: 10px 0;
+`;
+
+const FieldGroup = styled.div<{ wide?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: ${props => (props.wide ? 2 : 1)};
+`;
+
+const TextInput = styled(TextArea)`
+  resize: none;
+  width: 100%;
+  min-height: 180px;
+`;
+
+const StyledInput = styled(Input)`
+  width: 100%;
+  height: 38px;
+`;
+
+const DateInput = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 12px;
+  border-radius: 6px;
+  border: 1px solid #e0e2e7;
+  background-color: #fff;
+  color: #363a30;
+  height: 38px;
+  font-size: 14px;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+`;
+
+const Text = styled.div`
+  color: #363a30;
+  font-size: 14px;
+`;
+
+export default SuccessContent;

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

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+export const Title = styled.span`
+  font-family: 'Lato', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  color: #6a7378;
+`;
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+export const FieldRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 300px;
+  justify-content: space-between;
+`;
+
+export const Label = styled.label`
+  font-size: 14px;
+  color: #7b7874;
+`;
+
+export const Input = styled.input`
+  width: 70px;
+  padding: 6px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0;
+  }
+`;
+
+export const MainContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+export const CurrencySymbol = styled.span`
+  color: #858d9d;
+`;

package/src/components/order-view/order-actions/actions/hold-order/HoldOrderModal.tsx

@@ -25,6 +25,7 @@ import { useClientPortal } from '../../../../store';
 interface IProps {
   callOrderAlertsApi: any;
   callOrdersApi?: any;
+  callOrderStatusApi: any;
   callUnresolvedTaskApi?: any;
 }
 
@@ -93,6 +94,7 @@ function HoldOrderModal(props: IProps) {
           await props?.callUnresolvedTaskApi();
         }
         await props?.callOrderAlertsApi();
+        await props?.callOrderStatusApi();
         await props?.callOrdersApi();
       }
       if (response?.code !== 200) {

package/src/components/order-view/order-actions/actions/remove-from-route/RemoveFromRoute.tsx

@@ -15,12 +15,16 @@ import {
 } from '../../../store';
 import { notification } from 'antd';
 
-function RemoveFromRoute() {
+function RemoveFromRoute(props: any) {
   const [orderId] = useOrderId();
   const [, setCurrentAction] = useCurrentAction();
   const [, setRecalling] = useLiveRecalling();
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
 
+  const callOrdersApi = async () => {
+    await props?.callOrderAlertsApi();
+  };
+
   const { data: response, setShouldPerformAction: setAction } = useApiHook<{
     data: ApiResponse[];
   }>({
@@ -37,9 +41,10 @@ function RemoveFromRoute() {
           //@ts-ignore
           response?.message || 'Order has been removed successfully',
       });
-      setCurrentAction(undefined);
+      callOrdersApi();
       setRecalling(true);
       setRecallAuditLog(true);
+      setCurrentAction(undefined);
     }
     if (response?.data === null) {
       notification.error({

package/src/components/order-view/order-actions/actions/unhold-order/UnholdOrder.tsx

@@ -13,6 +13,7 @@ interface IProps {
   callOrderAlertsApi: any;
   callOrdersApi?: any;
   callUnresolvedTaskApi?: any;
+  callOrderStatusApi: any;
 }
 
 const UnholdOrder = (props: IProps) => {
@@ -46,6 +47,7 @@ const UnholdOrder = (props: IProps) => {
         }
         await props?.callOrderAlertsApi();
         await props?.callOrdersApi();
+        await props?.callOrderStatusApi();
       }
       if (response?.code !== 200) {
         notification.error({

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

@@ -12,7 +12,6 @@ import {
   useStatusDetails,
 } from '../store';
 import SplitOrder from './actions/split-order';
-import LogServiceRefusal from './actions/log-service-refusal';
 import CancelOrder from './actions/cancel-order';
 import ConfirmOrder from './actions/confirm-order';
 import SendSmsModal from './actions/send-sms/SendSmsModal';
@@ -34,6 +33,7 @@ import { useReminderNotiData, useTasksData } from './store';
 import ChargeLog from './actions/charge-log';
 import ReminderModal from './actions/create-task-reminder';
 import TaskModal from './actions/create-task-reminder/TaskModal';
+import ForceDebriefModal from './actions/force-debrief/ForceDebriefModal';
 
 function OrderActions() {
   const [currentAction, setCurrentAction] = useCurrentAction();
@@ -93,8 +93,8 @@ function OrderActions() {
       setProductDetails(productsData?.data);
       setProductDetailsCopy(productsData?.data);
     } else {
-      setProductDetails(null);
-      setProductDetailsCopy(null);
+      setProductDetails([]);
+      setProductDetailsCopy([]);
     }
   }, [orderProductsLoading]);
 
@@ -176,6 +176,7 @@ function OrderActions() {
     method: 'GET',
     pagination: { is_pagination: false },
     filters: [{ field: 'order_id', op: '=', value: orderId }],
+    showLoader: false,
   });
 
   useEffect(() => {
@@ -211,10 +212,7 @@ function OrderActions() {
         return <SplitOrder />;
       case 'release-order':
         return <ReleaseOrder />;
-      // case 'unrelease-order':
-      //   return <UnreleaseOrder />;
-      case 'log-service-refusal':
-        return <LogServiceRefusal callOrdersApi={callOrdersApi} />;
+
       case 'cancel-order':
         return (
           <CancelOrder
@@ -234,9 +232,18 @@ function OrderActions() {
           />
         );
       case 'confirm-order':
-        return <ConfirmOrder />;
+        return <ConfirmOrder callOrderAlertsApi={callOrderAlertsApi} />;
       case 'send-sms':
         return <SendSmsModal />;
+
+      case 'force-debrief':
+        return (
+          <ForceDebriefModal
+            callOrdersApi={callOrdersApi}
+            callOrderStatusApi={fetchStatusData}
+            callOrderAlertsApi={callOrderAlertsApi}
+          />
+        );
       case 'send-email':
         return <SendEmailModal />;
       case 'change-customer-account':
@@ -247,6 +254,7 @@ function OrderActions() {
           <HoldOrderModal
             callOrdersApi={callOrdersApi}
             callOrderAlertsApi={callOrderAlertsApi}
+            callOrderStatusApi={fetchStatusData}
             callUnresolvedTaskApi={callUnresolvedTaskApi}
           />
         );
@@ -272,6 +280,7 @@ function OrderActions() {
             callOrdersApi={callOrdersApi}
             callOrderAlertsApi={callOrderAlertsApi}
             callUnresolvedTaskApi={callUnresolvedTaskApi}
+            callOrderStatusApi={fetchStatusData}
           />
         );
       case 'view-reminder':
@@ -281,9 +290,9 @@ function OrderActions() {
       case 'view-flag':
         return <ViewFlag />;
       case 'clear-date':
-        return <ClearBookingStatus />;
+        return <ClearBookingStatus callOrderAlertsApi={callOrderAlertsApi} />;
       case 'remove-from-route':
-        return <RemoveFromRoute />;
+        return <RemoveFromRoute callOrderAlertsApi={callOrderAlertsApi} />;
       default:
         return null;
     }

package/src/components/order-view/order-actions/store.ts

@@ -18,7 +18,7 @@ export const initialPayload: CreateTaskPayload = {
   flag_type: '',
   priority: 3,
   status: 'AD',
-  due_datetime: '',
+  // due_datetime: '',
 };
 
 export const initialValue: CreateReminderPayload = {

package/src/components/order-view/order-actions/types.ts

@@ -22,7 +22,7 @@ export interface CreateTaskPayload {
   flag_type: string | null;
   priority: number | null;
   status: string | null;
-  due_datetime: string | null;
+  due_datetime?: string | null;
 }
 export interface resolveTaskPayload {
   task_ids: number[] | null;
@@ -31,7 +31,7 @@ export interface resolveTaskPayload {
 export interface CreateReminderPayload {
   due_datetime: Date | null;
   description: string | null;
-  assigned_to: string | null;
+  assigned_to: any | null;
   order_id: number | null;
   priority: number | null;
   department: string | null;
@@ -49,7 +49,7 @@ export interface SingleResolvedPayload {
 export interface UpdateReminderPayload {
   due_datetime: any | null;
   description: any | null;
-  assigned_to: string | null;
+  assigned_to: any | null;
   order_id: number | null;
   priority: number | null;
   department: any | null;

package/src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx

@@ -1,25 +1,48 @@
 import { Input, Label } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import { errorAtom, useAtom, useOrderDetails } from '../../../../store';
+import {
+  errorAtom,
+  useAtom,
+  useOrderDetails,
+  usePrevOrderDetails,
+} from '../../../../store';
 import { handleKeyDown } from '../../../../utils';
+import { useClientPortal } from '../../../../../store';
 
-// const LANDLINE_REGEX = /^\(?(?:(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?\(?(?:0\)?[\s-]?\(?)?|0)(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}|\d{3}\)?[\s-]?\d{3}[\\s-]?\d{3,4}|\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3})|\d{5}\)?[\s-]?\d{4,5}|8(?:00[\s-]?11[\s-]?11|45[\s-]?46[\s-]?4\d))(?:(?:[\s-]?(?:x|ext\.?\s?|\#)\d+)?)$/;
+//import { VALIDATE_UK_IRISH_NUMBER_REGEX } from '../../../helper';
+import CallCustomer from './CallCustomer';
 
 function ContactHome() {
   const [errors, setErrors] = useAtom(errorAtom);
-
-  // Show call icons only if number is valid
-  // show copy icon if there is input value
+  const [isClientPortal] = useClientPortal();
   const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [prevOrderDetails] = usePrevOrderDetails();
+  const apiContactHome = prevOrderDetails?.order_recipient?.contact_home;
   const orderRecipient = orderDetails?.order_recipient;
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
+    let val = e.target.value.replace(/\s+/g, '');
+    console.log(val, 'valuee');
+
+    if (!/^\+?\d*$/.test(val)) return;
+
+    const validPrefixes = ['+44', '44', '0', '+353', '353'];
+
+    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));
+    let prefix = matchedPrefix || '';
+    let numberPart = val.slice(prefix.length);
+
+    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+    if (numberPart.length > digitLimit) return;
+
+    const contactValue = val;
+
     const updatedOrderRecipient = {
       ...(orderRecipient === null
-        ? { contact_home: val }
-        : { ...orderRecipient, contact_home: val }),
+        ? { contact_home: contactValue }
+        : { ...orderRecipient, contact_home: contactValue }),
     };
 
     setOrderDetails(prev => ({
@@ -27,58 +50,100 @@ function ContactHome() {
       order_recipient: updatedOrderRecipient,
     }));
 
-    if (val) {
-      if (val.length < 10) {
-        setErrors(prevErrors => ({
-          ...prevErrors,
-          homeContactError: 'Phone number must be at least 10 digits.',
-        }));
-      } else if (val.length > 11) {
-        setErrors(prevErrors => ({
-          ...prevErrors,
-          homeContactError: 'Phone number must not exceed 11 digits.',
-        }));
-      } else {
-        setErrors(prevErrors => ({
-          ...prevErrors,
-          homeContactError: '',
-        }));
-      }
-    } else {
-      setErrors(prevErrors => ({
-        ...prevErrors,
-        homeContactError: '',
+    if (!numberPart) {
+      setErrors(prev => ({ ...prev, homeContactError: '' }));
+    } else if (numberPart.length !== digitLimit) {
+      setErrors(prev => ({
+        ...prev,
+        homeContactError: `Number must have exactly ${digitLimit} digits after the prefix.`,
       }));
+    } else {
+      setErrors(prev => ({ ...prev, homeContactError: '' }));
     }
   };
 
   return (
-    <MainContainer>
+    <Container>
       <Wrapper>
         <Label label="Contact Home" htmlFor="contact-home" />
-        {/* {showCopyIcon && <CopyText text={orderRecipient?.contact_home!} />} */}
       </Wrapper>
       <InputContainer>
         <CustomInput
           name="contact-home"
+          // maxLength={12}
           type="text"
           placeholder="Home Number"
           onKeyDown={handleKeyDown}
-          minLength={10}
-          maxLength={10}
           value={orderRecipient?.contact_home || ''}
           onChange={onChange}
+          disabled={isClientPortal}
         />
+        {/* 
+        <CallCustomer /> */}
+        {apiContactHome &&
+          (() => {
+            const rawNumber = apiContactHome.replace(/\s+/g, '');
+
+            let formattedNumber = rawNumber.replace(/\D/g, ''); // digits only
+            let prefix = '';
+            let numberPart = '';
+
+            if (rawNumber.startsWith('+44')) {
+              prefix = '+44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('44')) {
+              prefix = '44';
+              numberPart = formattedNumber.slice(2);
+            } else if (rawNumber.startsWith('0')) {
+              prefix = '0';
+              numberPart = formattedNumber.slice(1);
+            } else if (rawNumber.startsWith('+353')) {
+              prefix = '+353';
+              numberPart = formattedNumber.slice(3);
+            } else if (rawNumber.startsWith('353')) {
+              prefix = '353';
+              numberPart = formattedNumber.slice(3);
+            } else {
+              numberPart = formattedNumber;
+            }
+
+            // Set digit limit based on prefix
+            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;
+
+            if (numberPart.length !== digitLimit) return null;
+
+            let hrefPrefix = '';
 
-        {/* <CallCustomer /> */}
+            if (prefix === '0' || prefix === '44' || prefix === '+44') {
+              hrefPrefix = '+44';
+            } else if (prefix === '353' || prefix === '+353') {
+              hrefPrefix = '+353';
+            } else {
+              hrefPrefix = '+44';
+            }
+
+            const finalHref = `tel:${hrefPrefix}${numberPart}`;
+
+            return (
+              <a href={finalHref} style={{ cursor: 'pointer' }}>
+                <CallCustomer />
+              </a>
+            );
+          })()}
       </InputContainer>
       {errors.homeContactError && (
         <ErrorText>{errors.homeContactError}</ErrorText>
       )}
-    </MainContainer>
+    </Container>
   );
 }
 
+const InputContainer = styled.div`
+  display: flex;
+  gap: 7px;
+  align-items: center;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -87,9 +152,6 @@ const Wrapper = styled.div`
 
 const CustomInput = styled(Input)`
   width: 80%;
-  // @media (max-width: 1024px) {
-  //   width: 80%;
-  // }
 
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -101,13 +163,7 @@ const CustomInput = styled(Input)`
   }
 `;
 
-const InputContainer = styled.div`
-  display: flex;
-  gap: 7px;
-  align-items: center;
-`;
-
-const MainContainer = styled.div`
+const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -119,4 +175,5 @@ const ErrorText = styled.span`
   font-size: 0.85rem;
   margin-top: 4px;
 `;
+
 export default ContactHome;