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

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

@@ -1,12 +1,31 @@
 import { SectionHeader } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
+import { useProductDetails } from '../../store';
 
 function CollapsedContent() {
+  const [productsData] = useProductDetails();
+
+  const calculateTotal = (items: any[], field: 'cube' | 'weight') => {
+    return items
+      .reduce((total, item) => {
+        const val = parseFloat(item[field]);
+        return total + (isNaN(val) ? 0 : val);
+      }, 0)
+      .toFixed(2);
+  };
+
   return (
     <Container>
       <SectionHeader label="Products" />
       <Dimensions>Products to be Returned</Dimensions>
+
+      {productsData?.length > 0 && (
+        <Items style={{ display: 'flex' }}>
+          Total: {calculateTotal(productsData, 'weight')}KG /{' '}
+          {calculateTotal(productsData, 'cube')}m³
+        </Items>
+      )}
     </Container>
   );
 }
@@ -27,4 +46,14 @@ const Container = styled.div`
   gap: 30px;
 `;
 
+const Items = styled.span`
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 24px;
+  color: #8e8a85;
+  text-transform: capitalize;
+  color: #6a7378;
+`;
+
 export default CollapsedContent;

package/src/components/order-view/return-client-products/product-table/ReturnProductTable.tsx

@@ -12,10 +12,15 @@ import ActionIcon from '../../../../assets/icons/ActionIcon';
 import { useOrderId, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
 import { Empty, notification, Skeleton } from 'antd';
-import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
+import {
+  useIsShowNorthSouth,
+  useNewReturnOrderData,
+  useSelectedProducts,
+} from '../../../store';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
 import { EmptyDataContainer } from '../../order-actions/actions/charge-log';
+import CustomInput from '../../northern-southern-info/CustomInput';
 
 interface IPROS {
   callReturnProducts: any;
@@ -30,6 +35,7 @@ const ReturnProductTable = (props: IPROS) => {
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [orderId] = useOrderId();
   const [returnOrderData] = useNewReturnOrderData();
+  const [isNorthSouth] = useIsShowNorthSouth();
 
   // const handleActionClick = (id: number) => {
   //   setSelectedRowId(id);
@@ -123,7 +129,6 @@ const ReturnProductTable = (props: IPROS) => {
 
   const disableCheckbox =
     productData?.length == 0 || returnOrderData?.length == 0;
-
   return (
     <div>
       <StyledTableWrapper id="tableScrolling" className="orderProductTable">
@@ -163,48 +168,108 @@ const ReturnProductTable = (props: IPROS) => {
               </tr>
             ) : (
               productData?.map((product: any) => (
-                <tr key={product.id}>
-                  <td>
-                    <StyleCheckbox
-                      checked={selectedProducts?.includes(product?.id)}
-                      onChange={() => handleSelectProduct(product?.id)}
-                      disabled={disableCheckbox}
-                    />
-                  </td>
-                  <td>{product?.location || 'N/A'}</td>
-                  <td>
-                    <ul style={{ listStyleType: 'none', padding: 0 }}>
-                      <li
-                        style={{
-                          color: '#0099ff',
-                          fontWeight: 600,
-                          paddingLeft: 0,
-                        }}
+                <React.Fragment key={product.id}>
+                  {/* MAIN ROW */}
+                  <tr className="product-row">
+                    <td>
+                      <StyleCheckbox
+                        checked={selectedProducts?.includes(product?.id)}
+                        onChange={() => handleSelectProduct(product?.id)}
+                        disabled={disableCheckbox}
+                      />
+                    </td>
+                    <td>{product?.location || 'N/A'}</td>
+                    <td>
+                      <ul style={{ listStyleType: 'none', padding: 0 }}>
+                        <li
+                          style={{
+                            color: '#0099ff',
+                            fontWeight: 600,
+                          }}
+                        >
+                          <NavLink to={`/orders/view/${product?.order_id}`}>
+                            {displayValueOrNA(product?.recipient_name)}
+                          </NavLink>
+                        </li>
+                        <li style={{ color: '#888075' }}>
+                          {displayValueOrNA(product?.postcode)}
+                        </li>
+                      </ul>
+                    </td>
+                    <td>{product?.code}</td>
+                    <td>{product?.description}</td>
+                    <td>{product?.return_reason}</td>
+                    <td>{product?.part}</td>
+                    <td>
+                      <div
+                        onClick={() => deleteProduct(product?.id)}
+                        style={{ cursor: 'pointer' }}
                       >
-                        <NavLink to={`/orders/view/${product?.order_id}`}>
-                          {displayValueOrNA(product?.recipient_name)}
-                        </NavLink>
-                      </li>
-                      <li style={{ color: '#888075' }}>
-                        {displayValueOrNA(product?.postcode)}
-                      </li>
-                    </ul>
-                  </td>
-                  <td>{product?.code}</td>
-                  <td>{product?.description}</td>
-                  <td>{product?.return_reason}</td>
-                  <td>{product?.part}</td>
-                  <td>
-                    <div
-                      onClick={() => {
-                        deleteProduct(product?.id);
-                      }}
-                      style={{ cursor: 'pointer' }}
-                    >
-                      <ActionIcon />
-                    </div>
-                  </td>
-                </tr>
+                        <ActionIcon />
+                      </div>
+                    </td>
+                  </tr>
+
+                  {/* EXPANDED ROW */}
+                  {isNorthSouth === true && (
+                    <td colSpan={8}>
+                      <NSWrapper>
+                        <div className="left">Northern/Southern Ireland</div>
+                        <div className="left-end"></div>
+
+                        <div className="section">
+                          <CustomInput
+                            label="Commodity Code"
+                            type="text"
+                            direction="row"
+                            placeholder="Enter Commodity Code"
+                            value={
+                              product?.product_customs_details
+                                ?.commodity_code || 'NA'
+                            }
+                            disabled
+                          />
+
+                          <CustomInput
+                            label="Country of Origin"
+                            type="text"
+                            direction="row"
+                            placeholder="Enter Country of Origin"
+                            value={
+                              product?.product_customs_details
+                                ?.country_of_origin || 'NA'
+                            }
+                            disabled
+                          />
+
+                          <CustomInput
+                            label="Item Invoice Amount"
+                            type="number"
+                            direction="row"
+                            placeholder="Enter Item Invoice Amount"
+                            value={
+                              product?.product_customs_details
+                                ?.item_invoice_amount || 0
+                            }
+                            disabled
+                          />
+
+                          <CustomInput
+                            label="NI Additional Info Codes"
+                            type="text"
+                            direction="row"
+                            placeholder="Enter NI Add Info Codes"
+                            value={
+                              product?.product_customs_details
+                                ?.ni_additional_information_codes || 'NA'
+                            }
+                            disabled
+                          />
+                        </div>
+                      </NSWrapper>
+                    </td>
+                  )}
+                </React.Fragment>
               ))
             )}
           </tbody>
@@ -214,6 +279,64 @@ const ReturnProductTable = (props: IPROS) => {
   );
 };
 
+export const NSWrapper = styled.div`
+  display: flex;
+  width: 100%;
+  padding: 5px 10px;
+  align-items: center;
+  gap: 10px;
+  // position: absolute;
+  // right: 84px;
+  // top: 181px;
+  border-radius: 6px;
+  border: 1px solid rgb(237, 235, 232);
+  background: rgb(248, 250, 252);
+  margin-bottom: 14px;
+
+  .left {
+    display: flex;
+    padding-right: 10px;
+    align-items: center;
+    gap: 5px;
+    align-self: stretch;
+    color: #3a3630;
+    font-feature-settings: 'liga' off, 'clig' off;
+    font-family: Roboto;
+    font-size: 13px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    text-transform: uppercase;
+  }
+
+  .left-end {
+    display: flex;
+    padding-right: 10px;
+    align-items: center;
+    gap: 5px;
+    align-self: stretch;
+    border-right: 1px solid #e2e0db;
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+    gap: 30px;
+    flex: 1 0 0;
+
+    input {
+      display: flex;
+      height: 28px;
+      padding: 3px 10px;
+      align-items: center;
+      gap: 8px;
+      flex: 1 0 0;
+      border-radius: 30px;
+      border: 1px solid #ccc;
+      background: #fff;
+    }
+  }
+`;
 const StyleCheckbox = styled(Checkbox)`
   &:disabled {
     background-color: gray;

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

@@ -34,6 +34,7 @@ const customerInfoAtom = atom<OrderRecipient>({
 });
 
 export const ordersInitialValue: OrdersType = {
+  order_locked_time: null,
   depot_id: null,
   gsit_order_id: null,
   customer_id: null,
@@ -119,6 +120,25 @@ export const ordersInitialValue: OrdersType = {
   take_packaging_away: false,
   collect_disposal: false,
   assembly_type: null,
+  route_id: null,
+  hold_untill: null,
+  hold_reason: null,
+
+  order_on_hold: {
+    order_id: null,
+    hold_indefinitely: null,
+    hold_until: null,
+    reason_id: null,
+    un_hold: null,
+  },
+
+  refused_service: [],
+  refused_service_reason: '',
+  invalid_order: null,
+  owner_name: null,
+  force_debrief_enabled: null,
+  import_reference: null,
+  labels: null,
 };
 
 export const orderProductInitialvalue: CreateProduct = {

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

@@ -133,6 +133,21 @@ export interface OrderRouteType {
 export interface orderType {
   type: string | null;
 }
+
+export interface OrderCustomsDetails {
+  consignor_eori?: string | undefined;
+  consignee_country?: string | undefined;
+  commodity_code?: string | undefined;
+  country_of_origin?: string | undefined;
+  item_invoice_amount?: string | undefined;
+  procedure_code?: string | undefined;
+  ni_additional_information_codes?: string | undefined;
+  additional_procedure_code?: string | undefined;
+  additional_procedures?: string | undefined;
+  id?: number | null;
+  order_id?: number | null;
+  packaging_type?: string | undefined;
+}
 export interface OrdersType {
   depot_id: number | null;
   gsit_order_id: number | null;
@@ -182,6 +197,30 @@ export interface OrdersType {
   collect_disposal: boolean;
   assembly_type: string | null;
   labels?: any;
+
+  route_id: any;
+  order_locked_time: string | null;
+  refused_service: any[];
+  refused_service_reason: string;
+  tomtom_status?: [];
+  carrier_name?: string;
+  sub_contracted_date?: string;
+  sub_contractor_transfer_id?: number;
+  hold_untill?: Date | null;
+  hold_reason?: null;
+  order_on_hold?: {
+    order_id: null;
+    hold_indefinitely: null;
+    hold_until: Date | null;
+    reason_id: null;
+    un_hold: Date | null;
+  };
+  invalid_order: boolean | null;
+  owner_name: string | null;
+  force_debrief_enabled: boolean | null;
+  order_customs_details?: OrderCustomsDetails;
+  show_customs_details?: false;
+  import_reference: string | null;
 }
 
 export type DeleteProds = {

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

@@ -335,3 +335,32 @@ export const compareOrderDetailsStates = (
 export const sanitizeInput = (value: string): string => {
   return value.trim() === '' ? '' : value;
 };
+export const getEnvironment = ():
+  | 'development'
+  | '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';
+};

package/src/components/store.ts

@@ -161,7 +161,10 @@ const searchAfter = atom<any>('');
 export const useSearchAfterText = () => {
   return useAtom(searchAfter);
 };
-
+const isShow = atom<any>(null);
+export function useIsShowNorthSouth() {
+  return useAtom(isShow);
+}
 const rclientReturnDataAtom = atom<any[]>([]);
 export function useClientOutstandingReturnData() {
   return useAtom(rclientReturnDataAtom);