@bjsdistribution/dms-client-return 0.0.82 → 0.0.84

package/src/components/order-view/order-details/expanded-content/orders-section/Carrier.tsx

@@ -1,22 +1,41 @@
-import { Input, Label } from '@bjsdistribution/dms-component-library';
+import { Label, SelectDropdown } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
-import CopyText from '../../../../../common/copy/CopyText';
+import { useOrderDetails } from '../../../store';
+import { useSubContracterData } from '../../../../store';
 
 function Carrier() {
-  // show copy icon if there is input value
+  const [orderDetails, setOrderDetails] = useOrderDetails();
+  const [subContracterData] = useSubContracterData();
+
+  const carrierOptions = subContracterData?.map((carrier: any) => ({
+    label: carrier.name,
+    value: carrier.id,
+  }));
+
+  const onChange = (selectedOption: any) => {
+    setOrderDetails(prev => ({
+      ...prev,
+      carrier_id: selectedOption.value,
+    }));
+  };
+
   return (
     <Container>
       <Wrapper>
         <Label label="Carrier" htmlFor="carrier" />
-        <CopyText text="hello234e" />
       </Wrapper>
-      <Input
-        name="carrier"
-        type="text"
-        placeholder="Carrier"
-        disabled
-        style={{ borderRadius: '25PX' }}
+      <SelectDropdown
+        placeholder="Select Carrier"
+        inputId="CarrierDropdown"
+        openMenuOnFocus={false}
+        value={
+          carrierOptions.find(
+            (option: any) => option.value === orderDetails?.carrier_id
+          ) || null
+        }
+        options={carrierOptions}
+        onChange={onChange}
       />
     </Container>
   );

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

@@ -2,11 +2,9 @@ import { FormSection } from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import Header from '../../common/Header';
-// import OrderNumber from './OrderNumber';
 import ConsignmentNumber from './ConsignmentNumber';
 import RecipientReference from './RecipientReference';
 import DepotDropdown from './Depot';
-// import ValueField from './ValueField';
 import Droptime from './Droptime';
 import DeliveryDate from './DeliveryDate';
 import Carrier from './Carrier';
@@ -32,7 +30,6 @@ function OrdersSection() {
           <ScheduleAfter />
         </GroupedInputs>
         <GroupedInputs>
-          {/* <ValueField OrdersSection={ Data}/> */}
           <Droptime />
         </GroupedInputs>
         <GroupedInputs>

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

@@ -2,13 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 
 function CollapsedContent() {
-  return <Font>CALL LOG</Font>;
+  return <Font>ORDER RESOURCES</Font>;
 }
 const Font = styled.div`
   font-family: 'Roboto', sans-serif;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
-  line-height: 20px; /* 150% */
+  line-height: 24px; /* 150% */
 `;
 export default CollapsedContent;

package/src/components/order-view/order-resources/columns/Date.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
+import { formatDate } from '../../order-actions/utils';
 
 function Date(props: any) {
   const data = props?.row?.original.date;
   return (
     <RowContainer>
-      <Row>{data}</Row>
+      <Row>{formatDate(data)}</Row>
     </RowContainer>
   );
 }

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

@@ -1,12 +1,140 @@
-import React from 'react';
+import { ViewIcon } from '@bjsdistribution/dms-component-library';
+import Tippy from '@tippyjs/react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
+import { atom } from 'jotai';
+import { useOrderProductsResources } from '../../../store';
+import { notification } from 'antd';
+import DownIcon from '../../../../../assets/icons/DownIcon';
+
+export const selectedOrderIdAtom = atom<number[]>([]);
+
+interface ActionProps {
+  row: {
+    original: {
+      id: number;
+    };
+  };
+}
+
+function Action({ row }: ActionProps) {
+  const [orderResources] = useOrderProductsResources();
+  const [isDownloading, setIsDownloading] = useState(false);
+  const urlID = row?.original?.id;
+
+  const matchingResource = orderResources?.data?.find(
+    (resource: any) => resource.id === urlID
+  );
+
+  const resourceUrl = matchingResource?.url;
+
+  const handleView = () => {
+    if (resourceUrl) {
+      window.open(resourceUrl, '_blank');
+    }
+  };
+
+  const handleDownload = async () => {
+    if (!resourceUrl) {
+      notification.error({
+        message: 'Error',
+        description: 'Resource URL is not available',
+      });
+      return;
+    }
+
+    setIsDownloading(true); // disable button
+    notification.info({
+      message: 'Info',
+      description: `Download is in progress. Please wait`,
+    });
+
+    fetch(resourceUrl, {
+      method: 'GET',
+      headers: {},
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.blob();
+      })
+      .then(blob => {
+        // Create a temporary URL for the blob
+        const urlObject = window.URL.createObjectURL(blob);
+
+        // Create a temporary anchor element
+        const link = document.createElement('a');
+        link.href = urlObject;
+
+        // Generate a filename (you can customize this)
+        const filename = `Downloads`;
+        link.download = filename;
+
+        // Append to body, click, and remove
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+
+        // Revoke the blob URL
+        window.URL.revokeObjectURL(urlObject);
+
+        notification.success({
+          message: 'Success',
+          description: 'Document downloaded successfully.',
+        });
+
+        setIsDownloading(false); // enable button
+      })
+      .catch(error => {
+        console.error('Error downloading the document:', error);
+        notification.error({
+          message: 'Error',
+          description: 'Failed to download the document.',
+        });
+      })
+      .finally(() => {
+        setIsDownloading(false);
+      });
+  };
 
-function index() {
   return (
-    //TO DO ACTIONS FOR THE TABLES
-    <Actions></Actions>
+    <Actions>
+      <Row>
+        <Tippy content="View" placement="top" trigger="mouseenter">
+          <TippyContainer onClick={handleView}>
+            <ViewIcon style={{ cursor: 'pointer' }} />
+          </TippyContainer>
+        </Tippy>
+        <Tippy content="Download" placement="top" trigger="mouseenter">
+          <TippyContainer
+            onClick={isDownloading ? undefined : handleDownload}
+            style={{
+              cursor: isDownloading ? 'not-allowed' : 'pointer',
+              opacity: isDownloading ? 0.6 : 1,
+            }}
+          >
+            <DownIcon />
+          </TippyContainer>
+        </Tippy>
+      </Row>
+    </Actions>
   );
 }
+
+// Styled components for styling
 const Actions = styled.div``;
 
-export default index;
+const TippyContainer = styled.div`
+  display: inline-block;
+  margin: 7px;
+`;
+
+const Row = styled.div`
+  gap: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+`;
+
+export default Action;

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

@@ -2,3 +2,4 @@ export { default as Category } from './Category';
 export { default as Date } from './Date';
 export { default as Reference } from './Reference';
 export { default as Type } from './Type';
+export { default as Actions } from './actions/index';

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

@@ -2,22 +2,22 @@ import React from 'react';
 import CollapsedContent from '../collapsed-content';
 import styled from 'styled-components';
 import CollapsableForm from '../../../../common/expand-collapse';
-// import DynamicTable from '../../DynamicTable';
-// import { orderResources, orderResourcesColumns } from '../../../fakeData';
-import { Alert } from '@bjsdistribution/dms-component-library';
+import DynamicTable from '../../DynamicTable';
+import { useOrderProductsResources } from '../../store';
+import { tableColumns } from '../helper';
 
 function Order() {
+  const [orderResources] = useOrderProductsResources();
+
+  const data =
+    orderResources?.data && orderResources?.data?.length > 0
+      ? orderResources?.data
+      : '';
+
   return (
     <Table>
       <CollapsableForm collapsedContent={<CollapsedContent />}>
-        {/* <DynamicTable columns={orderResourcesColumns} data={orderResources} /> */}
-        <Alert
-          description=""
-          onClose={() => {}}
-          type="warn"
-          title="No records found"
-          showOkButton={false}
-        />
+        <DynamicTable columns={tableColumns} data={data} />
       </CollapsableForm>
     </Table>
   );

package/src/components/order-view/order-resources/helper.ts

@@ -1,4 +1,4 @@
-import { Category, Date, Reference, Type } from './columns';
+import {  Actions, Category, Date, Reference, Type } from './columns';
 
 export const tableColumns = [
   {
@@ -25,4 +25,10 @@ export const tableColumns = [
     cell: Reference,
     enableSorting: false,
   },
+  {
+    header: 'Actions',
+    accessorKey: 'action',
+    cell: Actions,
+    enableSorting: false,
+  },
 ];

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

@@ -10,7 +10,8 @@ import { useOrderId, useOrderStaticData, useProductDetails } from '../../store';
 import { ApiResponse } from '../../types';
 import Loader from '../../../order-daily-overview/header/loader/Loader';
 import { notification } from 'antd';
-import { useSelectedProducts } from '../../../store';
+import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
+import styled from 'styled-components';
 
 const ReturnProductTable = () => {
   const [selectedProducts, setSelectedProducts] = useSelectedProducts();
@@ -18,6 +19,7 @@ const ReturnProductTable = () => {
   const [productData, setProductData] = useProductDetails();
   const [selectedRowId, setSelectedRowId] = useState<number | null>(null);
   const [orderId] = useOrderId();
+  const [returnOrderData] = useNewReturnOrderData();
 
   const handleActionClick = (id: number) => {
     setSelectedRowId(id);
@@ -93,7 +95,8 @@ const ReturnProductTable = () => {
     return matchedReason ? matchedReason.label : 'N/A';
   };
 
-  const disableCheckbox = productData?.length == 0;
+  const disableCheckbox =
+    productData?.length == 0 || returnOrderData?.length == 0;
 
   return (
     <div>
@@ -103,7 +106,7 @@ const ReturnProductTable = () => {
           <thead>
             <tr>
               <th className="emailproductsCheckbox">
-                <Checkbox
+                <StyleCheckbox
                   disabled={disableCheckbox}
                   checked={selectAll}
                   onChange={handleSelectAll}
@@ -123,9 +126,10 @@ const ReturnProductTable = () => {
               productData?.map((product: any) => (
                 <tr key={product.id}>
                   <td>
-                    <Checkbox
+                    <StyleCheckbox
                       checked={selectedProducts?.includes(product?.id)}
                       onChange={() => handleSelectProduct(product?.id)}
+                      disabled={disableCheckbox}
                     />
                   </td>
                   <td>{product?.orders_products_stock?.location || 'N/A'}</td>
@@ -164,4 +168,12 @@ const ReturnProductTable = () => {
   );
 };
 
+const StyleCheckbox = styled(Checkbox)`
+  &:disabled {
+    background-color: gray;
+    cursor: not-allowed;
+    opacity: -0.4;
+  }
+`;
+
 export default ReturnProductTable;

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

@@ -24,11 +24,10 @@ interface OrderRecipient {
 }
 
 const customerInfoAtom = atom<OrderRecipient>({
-    recipient_name: '',
-    postcode: '',
+  recipient_name: '',
+  postcode: '',
 });
 
-
 export const ordersInitialValue: OrdersType = {
   depot_id: null,
   gsit_order_id: null,
@@ -105,6 +104,7 @@ export const ordersInitialValue: OrdersType = {
   order_communications: [],
   id: null,
   name: '',
+  carrier_id: null,
 };
 
 export const orderProductInitialvalue: CreateProduct = {
@@ -169,7 +169,8 @@ function useIsOnHoldOrder() {
 }
 //value
 const orderId = atom<any>(undefined);
-export const useOrderId = () => { //dddddddddddd
+export const useOrderId = () => {
+  //dddddddddddd
   return useAtom(orderId);
 };
 
@@ -372,7 +373,6 @@ export {
   useClientData,
 };
 
-
 const notes = atom<any>([]);
 
 export function usegetNotes() {
@@ -445,7 +445,6 @@ export function useUpdateApiCall() {
   return useAtom(apiUpdateCalling);
 }
 
-
 const liveRecalling = atom<boolean>(false);
 
 //re api call of live status
@@ -468,20 +467,16 @@ export const letselectedProductIdAtom = atom<number | null>(null);
 //   return useAtom(BulkUPdateDisabledState);
 // };
 
-
 const auditLogLoadingState = atom<boolean>(true);
 export function useAuditLogLoadingState() {
   return useAtom(auditLogLoadingState);
 }
 
-
 const globalStateHitAuditLog = atom<boolean>(false);
 export function useGlobalStateHitAuditLog() {
   return useAtom(globalStateHitAuditLog);
 }
 
-
-
 // Popup state Manage
 const initialState = null;
 

package/src/components/order-view/system-event-logs/columns/index.tsx

@@ -1,6 +1,5 @@
 export { default as Event } from './Event';
 export { default as Date } from './Date';
-// export { default as Actions } from './actions/index';
 export { default as Code } from './Code';
 
 export { default as Note } from './Note';

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

@@ -34,6 +34,7 @@ export type OrderActionsType =
   | 'change-customer-account'
   | 'escalations'
   | 'create-task'
+  | 'create-reminder'
   | 'log-feedback'
   | 'hold-order'
   | 'unhold-order'
@@ -48,7 +49,8 @@ export type OrderActionsType =
   | 'release-order'
   | 'unrelease-order'
   | 'clear-date'
-  | 'uncancel-order';
+  | 'uncancel-order'
+  | 'remove-from-route';
 
 export interface ChargeLogData {
   id: number;
@@ -157,14 +159,15 @@ export interface OrdersType {
   order_communications: any[];
   id: number | null;
   status_value: string | null;
-  name: string
+  name: string;
   order_locked_by: string | null;
   delivery_instructions: string | null;
   drop_time: string | null;
   created_by: any;
   created_at: any;
   recipient_name: any;
-  postcode: any
+  postcode: any;
+  carrier_id: number | null;
 }
 
 export type DeleteProds = {

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

@@ -110,7 +110,23 @@ export const getCookie = (name: string): string | null => {
 
 export const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
   // Allowed keys: numbers (0-9), '.', '-', '+'
-  const allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '-', '+'];
+  const allowedKeys = [
+    '0',
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '.',
+    '-',
+    '+',
+    'ArrowLeft',
+    'ArrowRight',
+  ];
 
   // Allow backspace, delete, and Tab keys
   if (e.key === 'Backspace' || e.key === 'Delete' || e.key === 'Tab') {

package/src/components/store.ts

@@ -76,6 +76,14 @@ const locationOptions = atom<any[]>([]);
 
 const selectedProductsMove = atom<any>([]);
 
+const newReturnOrderData = atom<any>([]);
+
+const subContracterData = atom<any>([]);
+
+export function useSubContracterData() {
+  return useAtom(subContracterData);
+}
+
 function useReminderData() {
   return useAtom(reminderTableData);
 }
@@ -197,6 +205,10 @@ export function useSelectedData() {
   return useAtom(selectedAssignee);
 }
 
+export function useNewReturnOrderData() {
+  return useAtom(newReturnOrderData);
+}
+
 export {
   useAtom,
   useFilter,
@@ -226,5 +238,5 @@ export {
   useActionTypeOptions,
   useLocationOptions,
   useSelectedProducts,
-  useVisibilityData
+  useVisibilityData,
 };

package/dist/assets/PostCodeIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function PostCodeIcon(): React.JSX.Element;
-export default PostCodeIcon;

package/dist/assets/icons/ArrivalIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ArrivalIcon: () => React.JSX.Element;
-export default ArrivalIcon;

package/dist/assets/icons/ArrowIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ArrowIcon: () => React.JSX.Element;
-export default ArrowIcon;

package/dist/assets/icons/AssemblyIcons.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-export declare const AssemblyIcons: () => React.JSX.Element;
-export default AssemblyIcons;

package/dist/assets/icons/BarCode.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const BarCode: () => React.JSX.Element;
-export default BarCode;

package/dist/assets/icons/BoxIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function BoxIcon(): React.JSX.Element;
-export default BoxIcon;

package/dist/assets/icons/BoxTickIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function BoxTickIcon(): React.JSX.Element;
-export default BoxTickIcon;

package/dist/assets/icons/CallIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function CallIcon(): React.JSX.Element;
-export default CallIcon;

package/dist/assets/icons/CarIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function CarIcon(): React.JSX.Element;
-export default CarIcon;

package/dist/assets/icons/CardsIcon.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const CardsIcon: () => React.JSX.Element;
-export default CardsIcon;

package/dist/assets/icons/CbmIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const CbmIcon: () => React.JSX.Element;
-export default CbmIcon;

package/dist/assets/icons/ClockIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function ClockIcon(): React.JSX.Element;
-export default ClockIcon;

package/dist/assets/icons/Complete.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function Complete(): React.JSX.Element;
-export default Complete;

package/dist/assets/icons/CompleteIcon.d.ts

@@ -1,3 +0,0 @@
-import React from "react";
-declare const CompleteIcon: () => React.JSX.Element;
-export default CompleteIcon;

package/dist/assets/icons/CompletedIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const CompletedIcon: () => React.JSX.Element;
-export default CompletedIcon;

package/dist/assets/icons/DeleteIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function DeleteIcon(): React.JSX.Element;
-export default DeleteIcon;

package/dist/assets/icons/DownArrowIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const DownArrowIcon: () => React.JSX.Element;
-export default DownArrowIcon;

package/dist/assets/icons/DownloadIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function DownloadIcon(): React.JSX.Element;
-export default DownloadIcon;

package/dist/assets/icons/DriverIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const DriverIcon: () => React.JSX.Element;
-export default DriverIcon;

package/dist/assets/icons/DropDownLarge.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const DropDownLarge: () => React.JSX.Element;
-export default DropDownLarge;

package/dist/assets/icons/EditIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function EditIcon(): React.JSX.Element;
-export default EditIcon;

package/dist/assets/icons/ExportIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const ExportIcon: () => React.JSX.Element;
-export default ExportIcon;

package/dist/assets/icons/EyeIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare function EyeIcon(): React.JSX.Element;
-export default EyeIcon;

package/dist/assets/icons/FailedIcon.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const FailedIcon: () => React.JSX.Element;
-export default FailedIcon;