@bjsdistribution/dms-client-return 0.1.57-prod → 0.1.58-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.57-prod",
+  "version": "0.1.58-prod",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -59,7 +59,7 @@
     "testEnvironment": "jest-environment-jsdom-sixteen"
   },
   "devDependencies": {
-    "@bjsdistribution/dms-component-library": "0.3.50-staging",
+    "@bjsdistribution/dms-component-library": "1.0.0-prod",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",
@@ -97,6 +97,7 @@
     "react-custom-scrollbars-2": "^4.5.0",
     "react-redux": "^9.2.0",
     "react-switch-selector": "^2.2.1",
-    "uuid": "^10.0.0"
+    "uuid": "^10.0.0",
+    "@tanstack/react-query": "^4.36.1"
   }
 }

package/src/common/utils.ts

@@ -0,0 +1,9 @@
+import { getProjectEnv } from '@bjsdistribution/dms-component-library';
+
+const basedEnv = getProjectEnv();
+
+export const POSTCODE_LABEL = basedEnv === 'release_us' ? 'Zipcode' : 'Postcode';
+export const CURRENCY_SYMBOL = basedEnv === 'release_us' ? '$' : '£';
+export const WEIGHT_UNIT = basedEnv === 'release_us' ? 'LBS' : 'KG';
+
+export const getEnvironment = () => basedEnv;

package/src/components/client-portal/OutstandingTable.tsx

@@ -35,6 +35,7 @@ import PrinterIcon from '../../assets/icons/PrinterIcon';
 import DownIcon from '../../assets/icons/DownIcon';
 import PrintDropDownReturn from '../order-view/details-filters/left-side-filters/dropdowns/PrintDropDownReturn';
 import { dateFilterCPReducer } from './DateFilterStore';
+import { WEIGHT_UNIT } from '../../common/utils';
 
 const OutstandingTable = () => {
   const [statePagination] = useAtom(filtersReducerAtom);
@@ -241,7 +242,7 @@ const OutstandingTable = () => {
               <th>Part</th>
               <th onClick={() => handleSort('weight')}>
                 <div className="sortIconClass">
-                  Weight {renderSortIcon('weight')}
+                  Weight ({WEIGHT_UNIT}) {renderSortIcon('weight')}
                 </div>
               </th>
               <th>CBM</th>
@@ -308,7 +309,7 @@ const OutstandingTable = () => {
                   <td>{displayValueOrNA(item?.part)}</td>
                   <td>
                     {displayValueOrNA(item?.weight)}{' '}
-                    {item?.weight && item?.weight !== null ? 'KG' : ''}
+                    {item?.weight && item?.weight !== null ? WEIGHT_UNIT : ''}
                   </td>
                   <td>{displayValueOrNA(item?.cube)}</td>
                   <td>{displayValueOrNA(item?.return_reason)}</td>

package/src/components/client-portal/return-confirm/ReturnConfirmedTable.tsx

@@ -28,6 +28,7 @@ import DownIcon from '../../../assets/icons/DownIcon';
 import PrintDropDown from '../../order-daily-overview/shared/elements/PrintDropDown';
 import { formatDate } from '../../order-daily-overview/shared/utlis';
 import dayjs from 'dayjs';
+import { WEIGHT_UNIT } from '../../../common/utils';
 
 const ReturnConfirmedTable = () => {
   const dropdownRefParent = useRef<HTMLDivElement>(null);
@@ -199,7 +200,7 @@ const ReturnConfirmedTable = () => {
               <th> Total Parts</th>
               <th onClick={() => handleSort('weight')}>
                 <div className="sortIconClass">
-                  Total Weight {renderSortIcon('weight')}
+                  Total Weight ({WEIGHT_UNIT}) {renderSortIcon('weight')}
                 </div>
               </th>
               <th onClick={() => handleSort('cube')}>
@@ -284,7 +285,7 @@ const ReturnConfirmedTable = () => {
                     <td>{displayValueOrNA(item?.total_products)}</td>
                     <td>
                       {displayValueOrNA(item?.weight)}{' '}
-                      {item?.weight && item?.weight > 0 ? 'KG' : ''}
+                      {item?.weight && item?.weight > 0 ? WEIGHT_UNIT : ''}
                     </td>
 
                     <td>{displayValueOrNA(item?.cube)}</td>

package/src/components/order-daily-overview/common/fakedata.tsx

@@ -1,3 +1,4 @@
+import { POSTCODE_LABEL } from '../../../common/utils';
 export const RouteCountTable = [
   {
     id: 1,
@@ -80,7 +81,7 @@ export const TableData = [
       { key: 'time', label: 'Time', alwaysVisible: true },
       { key: 'tomtom', label: 'Tomtom', alwaysVisible: true },
       { key: 'recipient', label: 'Recipient', alwaysVisible: true },
-      { key: 'postcode', label: 'Postcode' },
+      { key: 'postcode', label: POSTCODE_LABEL },
       { key: 'route', label: 'Route' },
 
       { key: 'vehicle', label: 'Vehicle' },
@@ -156,7 +157,7 @@ export const TableData2 = [
       { key: 'type', label: 'Type' },
       { key: 'recipient', label: 'Recipient' },
       { key: 'instructions', label: 'Instructions' },
-      { key: 'postCode', label: 'Postcode' },
+      { key: 'postCode', label: POSTCODE_LABEL },
       { key: 'customer', label: 'Customer' },
       { key: 'weightCubes', label: 'Weight/Cubes' },
       { key: 'boxes', label: 'Boxes' },

package/src/components/order-daily-overview/return-after-table/table/OrderTable.tsx

@@ -25,6 +25,7 @@ import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../common/interface';
 import CaretDownFilledIcon from '../../../../common/CaretDownFilledIcon';
 import SortIcon from '../../../../common/SortIcon';
+import { WEIGHT_UNIT } from '../../../../common/utils';
 
 const OrderTable = () => {
   // const [, setSelectedReturnOrder] = useSelectedOrders();
@@ -242,7 +243,7 @@ const OrderTable = () => {
               <th> Total Orders</th>
               <th onClick={() => handleSort('weight')}>
                 <div className="sortIconClass">
-                  Total Weight {renderSortIcon('weight')}
+                  Total Weight ({WEIGHT_UNIT}) {renderSortIcon('weight')}
                 </div>
               </th>
               <th onClick={() => handleSort('cube')}>
@@ -333,7 +334,7 @@ const OrderTable = () => {
 
                     <td>
                       {displayValueOrNA(item?.weight)}{' '}
-                      {item?.weight && item?.weight > 0 ? 'KG' : ''}
+                      {item?.weight && item?.weight > 0 ? WEIGHT_UNIT : ''}
                     </td>
 
                     <td>{displayValueOrNA(item?.cube)}</td>

package/src/components/order-daily-overview/return-order-table/return-orders-filters/ReturnOrderTable.tsx

@@ -29,6 +29,7 @@ import {
 import { EmptyDataContainer } from '../../table/table-data/styles';
 import { CustomDrop, StyledTable, StyledTableWrapper } from './returnstyles';
 import { NavLink, useSearchParams } from 'react-router-dom';
+import { WEIGHT_UNIT } from '../../../../common/utils';
 
 const ReturnOrderTable = () => {
   const [state] = useAtom(filtersReducerAtom);
@@ -351,7 +352,7 @@ const ReturnOrderTable = () => {
               <th>Part</th>
               <th onClick={() => handleSort('weight')}>
                 <div className="sortIconClass">
-                  Weight {renderSortIcon('weight')}
+                  Weight ({WEIGHT_UNIT}) {renderSortIcon('weight')}
                 </div>
               </th>
               <th>CBM</th>
@@ -442,7 +443,7 @@ const ReturnOrderTable = () => {
                   <td>{displayValueOrNA(item?.part)}</td>
                   <td>
                     {displayValueOrNA(item?.weight)}{' '}
-                    {item?.weight && item?.weight !== null ? 'KG' : ''}
+                    {item?.weight && item?.weight !== null ? WEIGHT_UNIT : ''}
                   </td>
                   <td>{displayValueOrNA(item?.cube)}</td>
                   <td>{displayValueOrNA(item?.return_reason)}</td>

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

@@ -42,6 +42,7 @@ 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 { POSTCODE_LABEL } from '../../common/utils';
 import { getEnvironment } from './utils';
 
 interface ApiResponse {
@@ -486,7 +487,7 @@ function OrderView({ locationloading }: any) {
     } catch (err) {
       message.open({
         type: 'error',
-        content: 'Failed to check postcode. Please try again.',
+        content: `Failed to check ${POSTCODE_LABEL.toLowerCase()}. Please try again.`,
       });
     }
   };

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

@@ -10,6 +10,8 @@ import {
 } from '../../../../../store';
 import { ApiResponse } from '../../../../types';
 import { message } from 'antd';
+import { getProjectEnv } from '@bjsdistribution/dms-component-library';
+import { POSTCODE_LABEL } from '../../../../../../common/utils';
 
 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/,
@@ -18,36 +20,10 @@ const POSTCODE_REGEX = {
 };
 
 function Postcode() {
-  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 environment = getProjectEnv();
 
   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;
@@ -75,7 +51,7 @@ function Postcode() {
   const showErr = () => {
     setErrors(prevErrors => ({
       ...prevErrors,
-      postCodeError: 'Invalid postcode format',
+      postCodeError: `Invalid ${POSTCODE_LABEL.toLowerCase()} format`,
     }));
   };
 
@@ -137,7 +113,7 @@ function Postcode() {
           //@ts-ignore
           content: isNorthSouth
             ? //@ts-ignore
-              `${response?.message} - Northern/Southern Ireland postcode found`
+              `${response?.message} - Northern/Southern Ireland ${POSTCODE_LABEL.toLowerCase()} found`
             : //@ts-ignore
               response?.message || 'Success',
         });
@@ -151,7 +127,7 @@ function Postcode() {
     } catch (err) {
       message.open({
         type: 'error',
-        content: 'Failed to check postcode. Please try again.',
+        content: `Failed to check ${POSTCODE_LABEL.toLowerCase()}. Please try again.`,
       });
     }
   };
@@ -159,13 +135,13 @@ function Postcode() {
   return (
     <Container>
       <Wrapper>
-        <Label label="Postcode" htmlFor="postcode" />
+        <Label label={POSTCODE_LABEL} htmlFor="postcode" />
         {showCopyIcon && <CopyText text={orderRecipient?.postcode!} />}
       </Wrapper>
       <InputContainer
         name="postcode"
         type="text"
-        placeholder="Enter Postcode"
+        placeholder={`Enter ${POSTCODE_LABEL}`}
         value={orderRecipient?.postcode || ''}
         onChange={onChange}
         autoComplete="off"

package/src/components/order-view/products-info/collapsed-content/index.tsx

@@ -2,6 +2,7 @@ import { SectionHeader } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import { useProductDetails } from '../../store';
+import { WEIGHT_UNIT } from '../../../../common/utils';
 
 function CollapsedContent() {
   const [productsData] = useProductDetails();
@@ -23,8 +24,8 @@ function CollapsedContent() {
       {productsData?.length > 0 && (
         <>
           <Items style={{ display: 'flex' }}>
-            Total: {calculateTotal(productsData, 'weight')}KG /{' '}
-            {calculateTotal(productsData, 'cube')}m³
+            Total: {calculateTotal(productsData, 'weight')}
+            {WEIGHT_UNIT} / {calculateTotal(productsData, 'cube')}m³
           </Items>
 
           <Items style={{ display: 'flex' }}>

package/src/components/order-view/utils.ts

@@ -13,13 +13,11 @@ export const capitalize = (input: string) => {
     return char.toUpperCase();
   });
 };
+import { getProjectEnv } from '@bjsdistribution/dms-component-library';
+
 export const getBaseUrlSymbol = (): string => {
-  const storedSymbol = localStorage.getItem('baseUrlSymbol');
-  if (!storedSymbol) {
-    localStorage.setItem('baseUrlSymbol', '£');
-    return '£';
-  }
-  return storedSymbol;
+  const basedEnv = getProjectEnv();
+  return basedEnv === 'release_us' ? '$' : '£';
 };
 export const handleKeyDownDebrief = (
   e: React.KeyboardEvent<HTMLInputElement>
@@ -340,27 +338,5 @@ export const getEnvironment = ():
   | 'release_us'
   | 'release_uk'
   | 'staging' => {
-  const projectEnv = process.env.REACT_APP_PROJECT_ENV;
-  const apiPath = process.env.REACT_APP_API_PATH;
-  console.log(projectEnv, 'projectEnv', apiPath, 'apiPath');
-  if (apiPath === 'https://us.dms.api.bjshomedelivery.com') {
-    return 'release_us';
-  }
-  if (apiPath === 'https://development.dms.api.bjshomedelivery.com') {
-    return 'development';
-  }
-  if (apiPath === 'https://staging.dms.api.bjshomedelivery.com') {
-    return 'staging';
-  }
-
-  if (projectEnv === 'release_uk') {
-    return 'release_uk';
-  }
-  if (projectEnv === 'release_us') {
-    return 'release_us';
-  }
-  if (projectEnv === 'staging') {
-    return 'staging';
-  }
-  return 'development';
+  return getProjectEnv() as any;
 };