@bjsdistribution/dms-client-return 0.1.49-prod → 0.1.50-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.49-prod",
+  "version": "0.1.50-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/order-daily-overview/return-order-table/return-orders-filters/returnstyles.ts

@@ -481,6 +481,35 @@ export const StyledTable = styled.table`
             }
           }
           tbody {
+            tr.product-row td {
+              border-bottom: none;
+            }
+
+            tr.ni-row td {
+              border-top: none;
+              padding-top: 0;
+              background: #fff;
+            }
+
+            tr.product-row td:first-child {
+              border-bottom-left-radius: 0;
+            }
+
+            tr.product-row td:last-child {
+              border-bottom-right-radius: 0;
+            }
+
+            tr.ni-row td:first-child {
+              border-top-left-radius: 0;
+            }
+
+            tr.ni-row td:last-child {
+              border-top-right-radius: 0;
+            }
+
+            tr.ni-row:nth-child(even) td {
+              background: #fff;
+            }
             tr {
               td {
                 padding: 14px 20px;
@@ -504,6 +533,7 @@ export const StyledTable = styled.table`
       }
     }
   }
+
   .actions {
     display: flex;
     align-items: center;

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import OrderDetails from './order-details';
 import Notes from './notes';
@@ -35,13 +35,14 @@ import {
 } from './store';
 import { OrdersType } from './types';
 import { useLocation } from 'react-router-dom';
-import { notification } from 'antd';
+import { message, notification } from 'antd';
 import DetailsFilters from './details-filters/DetailsFilters';
-import { useSubContracterData } from '../store';
+import { useIsShowNorthSouth, useSubContracterData } from '../store';
 import Notification from './notification';
 import Order from './order-resources/expanded-content';
 import { setResourcesCall, useAllOrderStatus } from './order-actions/store';
 import { ClientType } from '../order-daily-overview/common/interface';
+import { getEnvironment } from './utils';
 
 interface ApiResponse {
   message: string;
@@ -79,6 +80,7 @@ function OrderView({ locationloading }: any) {
   const [getResources] = useAtom(setResourcesCall);
   const [, setClientData] = usegetClientData();
   const [, setGlobalEscData] = useGlobalEscData();
+  const [, setIsNorthSouth] = useIsShowNorthSouth();
 
   useEffect(() => {
     setStatusVal(orderDetails?.status_value);
@@ -455,7 +457,69 @@ function OrderView({ locationloading }: any) {
   }, [escalationDataLoading]);
 
   const docTitle = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+  const environment = getEnvironment();
+  const { fetchData: callCheckPostcode } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `v1/orders/customs/postcode/check/`,
+    method: 'GET',
+  });
+
+  //northern southern
+  const callCheckPostcodeAPI = async () => {
+    try {
+      const response = await callCheckPostcode({
+        endPointQuery: `?postcode=${orderDetails?.order_recipient?.postcode}`,
+      });
+      //@ts-ignore
+      if (response?.code === 200) {
+        //@ts-ignore
+        const isNorthSouth = response?.data?.order_customs_postcodes;
+        setIsNorthSouth(isNorthSouth);
+      } else {
+        message.open({
+          type: 'error',
+          //@ts-ignore
+          content: response?.error || 'Something went wrong',
+        });
+      }
+    } catch (err) {
+      message.open({
+        type: 'error',
+        content: 'Failed to check postcode. Please try again.',
+      });
+    }
+  };
+  const POSTCODE_REGEX = {
+    UK: /\b(?:[A-Za-z][A-HJ-Ya-hj-y]?[0-9][0-9A-Za-z]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})\b/,
+    IRISH: /^(?:^[AC-FHKNPRTV-Y][0-9]{2}|D6W)[ -]?[0-9AC-FHKNPRTV-Y]{4}$/,
+    US: /^\d{5}(-\d{4})?$/,
+  };
+  const isDevelopmentOrStagingOrReleaseUK =
+    environment === 'development' ||
+    environment === 'staging' ||
+    environment === 'release_uk';
+  const isValidPostcode = (val: any) => {
+    if (isDevelopmentOrStagingOrReleaseUK) {
+      return POSTCODE_REGEX.UK.test(val) || POSTCODE_REGEX.IRISH.test(val);
+    } else {
+      return POSTCODE_REGEX.US.test(val);
+    }
+  };
+  const hasCalledInitialAPI = useRef(false);
 
+  useEffect(() => {
+    const currentPostcode = orderDetails?.order_recipient?.postcode?.trim();
+
+    if (
+      currentPostcode &&
+      isValidPostcode(currentPostcode) &&
+      !hasCalledInitialAPI.current
+    ) {
+      hasCalledInitialAPI.current = true;
+      callCheckPostcodeAPI();
+    }
+  }, [orderDetails?.order_recipient?.postcode]);
   return (
     <MainContainer>
       <DocumentTitle title={docTitle} />

package/src/components/order-view/northern-southern-info/CustomInput.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Label } from '@bjsdistribution/dms-component-library';
+
+type CustomInputProps = {
+  label: string;
+  name?: string;
+  type?: string;
+  placeholder?: string;
+  value?: string | number;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  minLength?: number;
+  maxLength?: number;
+  disabled?: boolean;
+  direction?: 'row' | 'column';
+};
+
+const CustomInput: React.FC<CustomInputProps> = ({
+  label,
+  name,
+  type = 'text',
+  placeholder,
+  value,
+  onChange,
+  onBlur,
+  onKeyDown,
+  minLength,
+  direction = 'column',
+  maxLength,
+  disabled,
+}) => {
+  return (
+    <Container direction={direction}>
+      {label && <Label label={label} htmlFor={name} />}
+      <StyledInput
+        id={name}
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        onKeyDown={onKeyDown}
+        minLength={minLength}
+        maxLength={maxLength}
+        disabled={disabled}
+      />
+    </Container>
+  );
+};
+
+export default CustomInput;
+
+// ---------------- styled ----------------
+
+const StyledInput = styled.input`
+  padding: 12px 12px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  font-size: 14px;
+  outline: none;
+  width: 100%;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`;
+
+const Container = styled.div<{ direction: 'row' | 'column' }>`
+  display: flex;
+  flex-direction: ${({ direction }: any) => direction};
+  align-items: ${({ direction }: any) =>
+    direction === 'row' ? 'center' : 'flex-start'};
+  gap: 6px;
+  flex: 1;
+`;

package/src/components/order-view/northern-southern-info/index.tsx

@@ -0,0 +1,94 @@
+import { FormSection } from '@bjsdistribution/dms-component-library';
+import React from 'react';
+import styled from 'styled-components';
+
+import { useOrderDetails } from '../store';
+import Header from '../order-details/common/Header';
+import CustomInput from './CustomInput';
+
+const NorthernSouthernInfoView = () => {
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const handleChange = (key: any, value: string) => {
+    setOrderDetails((prev: any) => ({
+      ...prev,
+      order_customs_details: {
+        ...prev.order_customs_details,
+        [key]: value,
+      },
+    }));
+  };
+
+  return (
+    <CustomFormSection>
+      <Header label="Northern/Southern Ireland" />
+      <FormInputs>
+        <GroupedInputs>
+          <CustomInput
+            label="Consignee Country"
+            type="text"
+            placeholder="Enter Consignee Country"
+            value={orderDetails?.order_customs_details?.consignee_country}
+            onChange={(e: any) =>
+              handleChange('consignee_country', e.target.value)
+            }
+          />
+        </GroupedInputs>
+        <GroupedInputs>
+          <CustomInput
+            label="Procedure Code"
+            type="text"
+            placeholder="Enter Procedure Code"
+            value={orderDetails?.order_customs_details?.procedure_code}
+            onChange={(e: any) =>
+              handleChange('procedure_code', e.target.value)
+            }
+          />
+        </GroupedInputs>
+        <GroupedInputs>
+          <CustomInput
+            label="Additional Procedure Code"
+            type="text"
+            placeholder="Enter Add. Procedure Code"
+            value={
+              orderDetails?.order_customs_details?.additional_procedure_code
+            }
+            onChange={(e: any) =>
+              handleChange('additional_procedure_code', e.target.value)
+            }
+          />
+        </GroupedInputs>
+        <CustomInput
+          label="Additional Procedures"
+          name="additional-procedures"
+          type="text"
+          placeholder="Enter Additional Procedures"
+          value={orderDetails?.order_customs_details?.additional_procedures}
+          onChange={(e: any) =>
+            handleChange('additional_procedures', e.target.value)
+          }
+        />
+      </FormInputs>
+    </CustomFormSection>
+  );
+};
+const FormInputs = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  flex: 1;
+`;
+
+const CustomFormSection = styled(FormSection)`
+  flex: 1;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+  padding: 15px;
+`;
+
+const GroupedInputs = styled.div`
+  display: flex;
+  gap: 15px;
+  white-space: nowrap;
+`;
+export default NorthernSouthernInfoView;

package/src/components/order-view/order-details/expanded-content/customer-section/location-info/Postcode.tsx

@@ -1,52 +1,209 @@
-import { Input, Label } from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
+import { Input, Label, useAxios } from '@bjsdistribution/dms-component-library';
+import React, { useRef } from 'react';
+import styled, { css } from 'styled-components';
 import CopyText from '../../../../../../common/copy/CopyText';
-import { useOrderDetails } from '../../../../store';
-// import { LocationIcon } from '../../../../assets/icons';
+import { errorAtom, useOrderDetails } from '../../../../store';
+import {
+  useAtom,
+  useClientPortal,
+  useIsShowNorthSouth,
+} from '../../../../../store';
+import { ApiResponse } from '../../../../types';
+import { message } from 'antd';
+
+const POSTCODE_REGEX = {
+  UK: /\b(?:[A-Za-z][A-HJ-Ya-hj-y]?[0-9][0-9A-Za-z]? ?[0-9][A-Za-z]{2}|[Gg][Ii][Rr] ?0[Aa]{2})\b/,
+  IRISH: /^(?:^[AC-FHKNPRTV-Y][0-9]{2}|D6W)[ -]?[0-9AC-FHKNPRTV-Y]{4}$/,
+  US: /^\d{5}(-\d{4})?$/,
+};
 
 function Postcode() {
-  // show copy icon if there is input value
+  const getEnvironment = ():
+    | 'development'
+    | 'release_us'
+    | 'release_uk'
+    | 'staging' => {
+    const projectEnv = process.env.REACT_APP_PROJECT_ENV;
+    const apiPath = process.env.REACT_APP_API_PATH;
+
+    if (apiPath === 'https://us.dms.api.bjshomedelivery.com') {
+      return 'release_us';
+    }
+    if (apiPath === 'https://development.dms.api.bjshomedelivery.com') {
+      return 'development';
+    }
+
+    if (projectEnv === 'release_uk') {
+      return 'release_uk';
+    }
+    if (projectEnv === 'release_us') {
+      return 'release_us';
+    }
+    if (projectEnv === 'staging') {
+      return 'staging';
+    }
+    return 'development';
+  };
+
   const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [isClientPortal] = useClientPortal();
+  const environment = getEnvironment();
+  const [errors, setErrors] = useAtom(errorAtom);
   const orderRecipient = orderDetails?.order_recipient;
+  const isInvalidOrder = orderDetails?.invalid_order;
+  const [, setIsNorthSouth] = useIsShowNorthSouth();
+  const prevPostcodeRef = useRef<string | undefined>(undefined);
+
   const showCopyIcon =
     orderRecipient?.postcode !== undefined &&
     orderRecipient?.postcode !== null &&
     orderRecipient?.postcode?.length > 0;
 
+  const isDevelopmentOrStagingOrReleaseUK =
+    environment === 'development' ||
+    environment === 'staging' ||
+    environment === 'release_uk';
+
+  const isValidPostcode = (val: any) => {
+    if (isDevelopmentOrStagingOrReleaseUK) {
+      return POSTCODE_REGEX.UK.test(val) || POSTCODE_REGEX.IRISH.test(val);
+    } else {
+      return POSTCODE_REGEX.US.test(val);
+    }
+  };
+
+  const showErr = () => {
+    setErrors(prevErrors => ({
+      ...prevErrors,
+      postCodeError: 'Invalid postcode format',
+    }));
+  };
+
+  const clearErr = () => {
+    setErrors(prevErrors => ({
+      ...prevErrors,
+      postCodeError: '',
+    }));
+  };
+
+  const validatePostcode = (val: any) => {
+    if (isValidPostcode(val)) {
+      clearErr();
+    } else {
+      showErr();
+    }
+  };
+
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const val = e.target.value;
+
     const updatedOrderRecipient = {
       ...(orderRecipient === null
         ? { postcode: val }
         : { ...orderRecipient, postcode: val }),
     };
+
     setOrderDetails(prev => {
       return {
         ...prev,
         order_recipient: updatedOrderRecipient,
       };
     });
+
+    validatePostcode(val);
   };
+
+  const hasError = !!isInvalidOrder;
+
+  const { fetchData: callCheckPostcode } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `v1/orders/customs/postcode/check/`,
+    method: 'GET',
+  });
+  const callCheckPostcodeAPI = async () => {
+    try {
+      const response = await callCheckPostcode({
+        endPointQuery: `?postcode=${orderRecipient?.postcode}`,
+      });
+      //@ts-ignore
+      if (response?.code === 200) {
+        //@ts-ignore
+        const isNorthSouth = response?.data?.order_customs_postcodes;
+        setIsNorthSouth(isNorthSouth);
+
+        message.open({
+          type: 'success',
+          //@ts-ignore
+          content: isNorthSouth
+            ? //@ts-ignore
+              `${response?.message} - Northern/Southern Ireland postcode found`
+            : //@ts-ignore
+              response?.message || 'Success',
+        });
+      } else {
+        message.open({
+          type: 'error',
+          //@ts-ignore
+          content: response?.error || 'Something went wrong',
+        });
+      }
+    } catch (err) {
+      message.open({
+        type: 'error',
+        content: 'Failed to check postcode. Please try again.',
+      });
+    }
+  };
+
   return (
     <Container>
       <Wrapper>
         <Label label="Postcode" htmlFor="postcode" />
         {showCopyIcon && <CopyText text={orderRecipient?.postcode!} />}
       </Wrapper>
-      <Input
+      <InputContainer
         name="postcode"
         type="text"
         placeholder="Enter Postcode"
         value={orderRecipient?.postcode || ''}
         onChange={onChange}
         autoComplete="off"
-        style={{ borderRadius: '25px' }}
+        style={{ width: '100%' }}
+        disabled={isClientPortal}
+        hasError={hasError}
+        onBlur={async () => {
+          const currentPostcode = orderRecipient?.postcode?.trim();
+          if (
+            currentPostcode &&
+            isValidPostcode(currentPostcode) &&
+            currentPostcode !== prevPostcodeRef.current
+          ) {
+            await callCheckPostcodeAPI();
+          }
+          prevPostcodeRef.current = currentPostcode;
+        }}
       />
+      {errors.postCodeError && <ErrorText>{errors.postCodeError}</ErrorText>}
     </Container>
   );
 }
 
+const InputContainer = styled(Input)<{ hasError?: boolean }>`
+  ${({ hasError }) =>
+    hasError &&
+    css`
+      border: 1px solid rgb(253, 154, 154);
+      background-color: #fff5f5;
+    `}
+`;
+
+const ErrorText = styled.span`
+  color: red;
+  font-size: 0.85rem;
+  margin-top: 4px;
+`;
+
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -59,5 +216,10 @@ const Container = styled.div`
   gap: 6px;
   flex: 1;
 `;
+// const ErrorText = styled.span`
+//   color: red;
+//   font-size: 0.85rem;
+//   margin-top: 4px;
+// `;
 
 export default Postcode;

package/src/components/order-view/order-details/expanded-content/footer/index.tsx

@@ -89,8 +89,57 @@ function OrderDetailsFooter() {
     const isSame = orderDetailsSorted === prevOrderDetailsSorted;
     return !isSame;
   };
-
+  //Northern/Southern Ireland PATCH API
+  const { fetchData: callCustomDetailsAPI } = useAxios<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `v1/orders/update/customs_details?order_id=${orderDetails?.id}`,
+    method: 'PATCH',
+  });
   const onSave = async () => {
+    if (orderDetails?.id) {
+      console.log('yooooooo11111');
+
+      const {
+        consignor_eori,
+        packaging_type,
+        consignee_country,
+        commodity_code,
+        country_of_origin,
+        item_invoice_amount,
+        procedure_code,
+        ni_additional_information_codes,
+        additional_procedure_code,
+        additional_procedures,
+      } = orderDetails?.order_customs_details ?? {};
+
+      let customDetailsPayload: Record<string, any> = {
+        order_id: orderDetails?.id,
+        consignor_eori,
+        packaging_type,
+        consignee_country,
+        commodity_code,
+        country_of_origin,
+        item_invoice_amount,
+        procedure_code,
+        ni_additional_information_codes,
+        additional_procedure_code,
+        additional_procedures,
+      };
+
+      // remove null/undefined values
+      customDetailsPayload = Object.fromEntries(
+        Object.entries(customDetailsPayload).filter(
+          ([_, value]) => value !== null && value !== undefined
+        )
+      );
+
+      // northern/southern details API
+      callCustomDetailsAPI({
+        payload: customDetailsPayload,
+      });
+    }
+    console.log('yoooooooooo');
     setRecallAuditLog(false);
     setRecallOrders(false);
     setRecalling(false);
@@ -127,14 +176,16 @@ function OrderDetailsFooter() {
       payload.assembly_type = null;
     }
 
+    console.log('final payload for update--->', [payload]);
     let response = (await callUpdateOrderAPI({
-      payload: [payload],
+      payload: [{ ...payload, id: orderDetails?.id }],
     })) as {
       code: number | null;
       error?: string | null | undefined;
       [key: string]: any;
     };
     // const response = await updateOrder([payload]);
+
     setRecallOrders(true);
     if (response.code == 200 && response?.data?.length > 0) {
       notification.success({

package/src/components/order-view/order-details/expanded-content/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import CustomerSection from './customer-section';
 import OrdersSection from './orders-section';
@@ -7,8 +7,17 @@ import ServicesSection from './services-section';
 import OrderDetailsFooter from './footer';
 import { Skeleton } from 'antd';
 import { FormSection } from '@bjsdistribution/dms-component-library';
+import { useIsShowNorthSouth } from '../../../store';
+import { useOrderDetails } from '../../store';
+import NorthernSouthernInfoView from '../../northern-southern-info';
 
 function ExpandedContent({ orderLoading, depotDataLoading }: any) {
+  const [isNorthSouth] = useIsShowNorthSouth();
+  const [orderDetails] = useOrderDetails();
+
+  useEffect(() => {
+    console.log('north sourthsalhdjas', isNorthSouth);
+  }, [isNorthSouth]);
   return (
     <>
       <MainContainer>
@@ -29,6 +38,9 @@ function ExpandedContent({ orderLoading, depotDataLoading }: any) {
                 <OrdersSection />
               </HalfWidth>
               <InstructionSection />
+              {(isNorthSouth === true ||
+                (orderDetails?.show_customs_details &&
+                  isNorthSouth !== false)) && <NorthernSouthernInfoView />}
             </Container>
 
             <ServicesSection />