@bjsdistribution/dms-client-return 0.0.83 → 0.0.84

package/src/components/order-view/notification/Tabs.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useTabType } from '../store';
-// import OrderTemplate from './OrderTemplate';
 import FlagTemplate from './FlagTemplate';
 import ReminderTemplate from './ReminderTemplate';
 
@@ -27,7 +26,6 @@ function Tabs({
         <Container className="tab-content">
           {activeTab === 'active' && (
             <>
-              {/* <OrderTemplate /> */}
               {initialReminders.map((item: any, index: any) => (
                 <ReminderTemplate
                   key={index}

package/src/components/order-view/order-actions/actions/add-resources/CategoryDropdown.tsx

@@ -1,23 +1,38 @@
 import React from 'react';
 import OrderActionsDropdown from '../../Dropdown';
+import { useOrderStaticData } from '../../../store';
+import { useAtom } from 'jotai';
+import { selectedCategoryIdAtom } from '../../store';
 
 function CategoryDropdown() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [staticOrderData] = useOrderStaticData();
+  const [, setSelectedCategoryId] = useAtom(selectedCategoryIdAtom);
 
-  const options = [
-    { label: 'small', value: 'small' },
-    { label: 'medium', value: 'medium' },
-    { label: 'large', value: 'large' },
-  ];
+  const categoryOptions = staticOrderData?.resource_category_type?.map(
+    (x: any) => ({
+      id: x?.id,
+      type: x?.type,
+      value: x?.value,
+    })
+  );
+
+  const onSelect = (selectedValue: any) => {
+    const selectedOption = categoryOptions?.find(
+      (option: any) => option?.value === selectedValue
+    );
+
+    if (selectedOption) {
+      setSelectedCategoryId(selectedOption.value);
+    }
+  };
 
   return (
     <OrderActionsDropdown
       label="Category"
+      required
       placeholder="Select Category"
-      options={options}
+      options={categoryOptions}
       onSelect={onSelect}
-      onSearch={onSearch}
     />
   );
 }

package/src/components/order-view/order-actions/actions/add-resources/DocFileUpload.tsx

@@ -1,65 +1,136 @@
-import React from 'react';
-import type { UploadProps } from 'antd';
-import { message, Upload } from 'antd';
+import React, { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { Button } from '@bjsdistribution/dms-component-library';
 import UploadIcon from '../../../../../assets/icons/UploadIcon';
+import { atom, useAtom } from 'jotai';
+import { notification } from 'antd';
 
-const { Dragger } = Upload;
+export const uploadedFilesAtom = atom<File[]>([]);
 
-const props: UploadProps = {
-  name: 'file',
-  multiple: true,
-  action: 'sdfkj',
-  onChange(info) {
-    const { status } = info.file;
-    if (status !== 'uploading') {
-      console.log(info.file, info.fileList);
+// Allowed photo and video file types
+const fileTypes = ['image/jpeg', 'image/png', 'video/mp4'];
+
+function DocFileUpload() {
+  const [uploadedFiles, setUploadedFiles] = useAtom(uploadedFilesAtom);
+  const [dragging, setDragging] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileUpload = (files: FileList | null) => {
+    if (files) {
+      const validFiles = Array.from(files).filter(file =>
+        fileTypes.includes(file.type)
+      );
+
+      if (validFiles.length > 0) {
+        setUploadedFiles(prev => [...prev, ...validFiles]);
+        validFiles.forEach(file => {
+          notification.success({
+            message: 'Success',
+            description: `${file.name} added successfully.`,
+          });
+        });
+      } else {
+        notification.error({
+          message: 'Error',
+          description: 'Only photos (JPEG, PNG) and videos (MP4) are allowed.',
+        });
+      }
     }
-    if (status === 'done') {
-      message.success(`${info.file.name} file uploaded successfully.`);
-    } else if (status === 'error') {
-      message.error(`${info.file.name} file upload failed.`);
+  };
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    setDragging(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setDragging(false);
+    handleFileUpload(e.dataTransfer.files);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    handleFileUpload(e.target.files);
+  };
+
+  const handleButtonClick = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
     }
-  },
-  onDrop(e) {
-    console.log('Dropped files', e.dataTransfer.files);
-  },
-};
+  };
 
-function DocFileUpload () {
   return (
     <MainContainer>
-      <Dragger {...props}>
+      <DraggerContainer
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        dragging={dragging}
+      >
         <Container>
-          <UploadButton colors='secondary' shape='rounded'>
-            Upload Button
+          <UploadButton
+            colors="secondary"
+            shape="rounded"
+            onClick={handleButtonClick}
+          >
+            UPLOAD FILE
           </UploadButton>
+          <FileInput
+            type="file"
+            required
+            multiple
+            onChange={handleInputChange}
+            accept="image/jpeg, image/png, video/mp4"
+            ref={fileInputRef}
+          />
           <IconContainer>
-          <UploadIcon />
+            <UploadIcon />
           </IconContainer>
           <TextContainer>
             <Text1>or drag and drop your file </Text1>
-            <Text2>Excel (.xls / .xlsx) or CSV (.csv) Only</Text2>
+            <Text2>Photos (JPEG, PNG) or Videos (MP4) Only</Text2>
           </TextContainer>
         </Container>
-      </Dragger>
+      </DraggerContainer>
+
+      {/* Uploaded Files List */}
+      {uploadedFiles.length > 0 && (
+        <UploadedFilesContainer>
+          <FilesTitle>Uploaded Files:</FilesTitle>
+          <FilesList>
+            {uploadedFiles.map((file, index) => (
+              <FileItem key={index}>
+                {file.name} - {(file.size / 1024).toFixed(2)} KB
+              </FileItem>
+            ))}
+          </FilesList>
+        </UploadedFilesContainer>
+      )}
     </MainContainer>
-  )
+  );
 }
+
 const MainContainer = styled.div`
   width: 100%;
-  .ant-upload-wrapper .ant-upload-drag .ant-upload {
-    padding: 0;
-  }
-  .ant-upload-wrapper, .ant-upload-drag, .ant-upload  {
-    border: none;
-    background: transparent;
-  }
-`
+`;
+
+const DraggerContainer = styled.div<{ dragging: boolean }>`
+  width: 100%;
+  padding: 6px;
+  border-radius: 30px;
+  border: ${props =>
+    props.dragging ? '2px dashed #0465ac' : '1px solid #e0e2e7'};
+  background-color: #fff;
+  transition: border-color 0.3s ease;
+  cursor: pointer;
+`;
 
 const Text2 = styled.p`
-  color: #BCBAB7;
+  color: #bcbab7;
   text-align: center;
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
@@ -68,14 +139,12 @@ const Text2 = styled.p`
   text-transform: lowercase;
   padding: 0;
   margin: 0;
-`
-
-const TextContainer = styled.div`
-
 `;
 
+const TextContainer = styled.div``;
+
 const Text1 = styled.p`
-  color: #AEA9A1;
+  color: #aea9a1;
   text-align: left;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
@@ -87,7 +156,7 @@ const Text1 = styled.p`
 `;
 
 const IconContainer = styled.div`
-  border: 1px dashed #0465AC;
+  border: 1px dashed #0465ac;
   padding: 5px;
   display: flex;
   align-items: center;
@@ -106,12 +175,35 @@ const Container = styled.div`
   align-items: center;
   align-self: stretch;
   border-radius: 30px;
-  border: 1px solid #E0E2E7;
-  background: #FFF;
+  background: #fff;
+`;
 
-  
+const FileInput = styled.input`
+  display: none;
 `;
 
-// const Text = styled.p``;
+const UploadedFilesContainer = styled.div`
+  margin-top: 20px;
+  border-top: 1px solid #e0e2e7;
+  padding-top: 10px;
+`;
+
+const FilesTitle = styled.h4`
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  color: #0465ac;
+`;
+
+const FilesList = styled.ul`
+  list-style-type: none;
+  padding: 0;
+`;
+
+const FileItem = styled.li`
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  color: #333;
+  margin: 5px 0;
+`;
 
-export default DocFileUpload;
+export default DocFileUpload;

package/src/components/order-view/order-actions/actions/add-resources/DocumentTypeDropdown.tsx

@@ -1,16 +1,39 @@
 import React from 'react';
 import OrderActionsDropdown from '../../Dropdown';
+import { useAtom } from 'jotai';
+import { useOrderStaticData } from '../../../store';
+import { selectedDocumentTypeAtom } from '../../store';
 
 function DocumentTypeDropdown() {
-  const onSelect = () => {};
-  const onSearch = () => {};
+  const [hello, setSelectedDocumentType] = useAtom(selectedDocumentTypeAtom);
+  const [staticOrderData] = useOrderStaticData();
+
+  const documentOptions = staticOrderData?.resource_document_type?.map(
+    (x: any) => ({
+      id: x?.id,
+      type: x?.type,
+      value: x?.value,
+    })
+  );
+
+  const onSelectCancelReason = (selectedValue: any) => {
+    const selectedOption = documentOptions?.find(
+      (option: any) => option?.value === selectedValue
+    );
+    if (selectedOption) {
+      setSelectedDocumentType(selectedOption.value);
+    }
+  };
+
+  console.log(hello, 'hellohello');
+
   return (
     <OrderActionsDropdown
       label="Document Type"
+      required
       placeholder="Select Document Type"
-      options={[]}
-      onSelect={onSelect}
-      onSearch={onSearch}
+      options={documentOptions}
+      onSelect={onSelectCancelReason}
     />
   );
 }

package/src/components/order-view/order-actions/actions/add-resources/Visibility.tsx

@@ -1,23 +1,40 @@
 import { RadioButtonGroup } from '@bjsdistribution/dms-component-library';
 import React from 'react';
-
-const visibilityOptions = [
-  {
-    label: 'Public',
-    value: 'public',
-  },
-  {
-    label: 'Private',
-    value: 'private',
-  },
-];
+import { useAtom, useOrderStaticData } from '../../../store';
+import { capitalize } from '../../../utils';
+import { selectedVisibilityAtom } from '../../store';
 
 function VisibilityRadioButtons() {
-  const handleRadioButtonChange = () => {};
+  const [staticOrderData] = useOrderStaticData();
+  const [selectedVisibility, setSelectedVisibility] = useAtom(
+    selectedVisibilityAtom
+  );
+
+  const visibilityOptions = staticOrderData?.resource_visibility_type?.map(
+    (option: any) => ({
+      label: capitalize(option.type.replaceAll('_', ' ')),
+      value: option.value.toString(),
+    })
+  );
+
+  const handleRadioButtonChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const selectedValue = event.target.value;
+
+    const selectedOption = visibilityOptions?.find(
+      (option: any) => option.value === selectedValue
+    );
+
+    if (selectedOption) {
+      setSelectedVisibility(selectedOption.value);
+      console.log(selectedOption, 'selectedOption');
+    }
+  };
+
   return (
-    // refer product information for implementation
     <RadioButtonGroup
-      selectedValue={'public'}
+      selectedValue={selectedVisibility || []}
       heading="Visibility"
       options={visibilityOptions || []}
       required={false}

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

@@ -1,43 +1,132 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import DocumentTypeDropdown from './DocumentTypeDropdown';
 import styled from 'styled-components';
 import CategoryDropdown from './CategoryDropdown';
 import VisibilityRadioButtons from './Visibility';
-import DocFileUpload from './DocFileUpload';
-import { useCurrentAction } from '../../../store';
-// import DocFileUpload from './DocFileUpload';
+import DocFileUpload, { uploadedFilesAtom } from './DocFileUpload';
+import {
+  useAtom,
+  useCurrentAction,
+  useCustomerInfo,
+  useOrderStaticData,
+} from '../../../store';
+import {
+  selectedCategoryIdAtom,
+  selectedDocumentTypeAtom,
+  selectedTypeAtom,
+  setResourcesCall,
+} from '../../store';
+import OrderActionsDropdown from '../../Dropdown';
+import { notification } from 'antd';
+import useUploadFiles from '../../../hooks/AddResources';
 
 function AddResources() {
   const [, setCurrentAction] = useCurrentAction();
+  const [staticOrderData] = useOrderStaticData();
+  const [, setSelectedType] = useAtom(selectedTypeAtom);
+  const [uploadedFiles, setUploadedFiles] = useAtom(uploadedFilesAtom);
+  const uploadFiles = useUploadFiles();
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [selectedCategoryId] = useAtom(selectedCategoryIdAtom);
+  const [selectedDocumentType] = useAtom(selectedDocumentTypeAtom);
+  const [selectedType] = useAtom(selectedTypeAtom);
+  const [, setResources] = useAtom(setResourcesCall);
 
   const onClose = () => {
     setCurrentAction(undefined);
+    setUploadedFiles([]);
   };
 
+  const [customerInfo] = useCustomerInfo();
+  const infoText = `${customerInfo?.recipient_name}, ${customerInfo?.postcode}`;
+  const typeOptions = staticOrderData?.resource_type?.map((x: any) => ({
+    id: x?.id,
+    type: x?.type,
+    value: x?.value,
+  }));
+
+  const onSelectCancelReason = (selectedValue: any) => {
+    const selectedOption = typeOptions?.find(
+      (option: any) => option?.value === selectedValue
+    );
+    if (selectedOption) {
+      setSelectedType(selectedOption.value);
+    }
+  };
+  const handleSubmit = async () => {
+    if (!uploadedFiles) {
+      notification.error({ message: 'No files selected' });
+      return;
+    }
+
+    const formData = new FormData();
+    if (uploadedFiles) {
+      Array.from(uploadedFiles).forEach(uploadedFiles => {
+        formData.append('files', uploadedFiles); // Adjust the key as per your API requirement
+      });
+    }
+
+    try {
+      const response = await uploadFiles(formData);
+      console.log('Upload successful:', response);
+      notification.success({ message: 'Files uploaded successfully' });
+      onClose(); // Close modal after successful upload
+      setResources(false);
+
+      setTimeout(() => {
+        setResources(true);
+      }, 1000);
+    } catch (error) {
+      console.error('Upload failed:', error);
+    }
+  };
+
+  useEffect(() => {
+    setIsFormValid(
+      !!selectedType &&
+        !!selectedDocumentType &&
+        !!selectedCategoryId &&
+        uploadedFiles?.length > 0
+    );
+  }, [selectedDocumentType, selectedCategoryId, uploadedFiles]);
+
   return (
     <OrderActionModal
-      headerTitle="Add New Resource"
+      headerTitle="ADD RESOURCE"
       showAdditionalInfo
-      infoText="NICK OLIVER, YO42 2ST"
+      infoText={infoText}
       onCloseHeader={onClose}
-      onSubmit={() => {}}
+      onSubmit={handleSubmit}
+      isSubmitDisabled={!isFormValid}
     >
       <ContentContainer>
         <Top>
           <DocumentTypeDropdown />
+
+          <OrderActionsDropdown
+            label="Type"
+            required
+            placeholder="Select Type"
+            options={typeOptions}
+            onSelect={onSelectCancelReason}
+          />
+
           <CategoryDropdown />
           <VisibilityRadioButtons />
         </Top>
         <Bottom>
-          <Label>File</Label>
-          <DocFileUpload />
+          <Label>File</Label> <RequiredAsterisk>*</RequiredAsterisk>
+          <DocFileUpload />{' '}
         </Bottom>
       </ContentContainer>
     </OrderActionModal>
   );
 }
-
+const RequiredAsterisk = styled.span`
+  color: red;
+  margin-left: 2px;
+`;
 const Label = styled.label`
   color: #6a7378;
   font-family: 'Lato', sans-serif;
@@ -59,7 +148,6 @@ const Top = styled.div`
 `;
 
 const ContentContainer = styled.div`
-  /* display: flex; */
   padding: 15px 12px;
   flex: 1 0 0;
   border-radius: 15px;

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

@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 import OrderActionModal from '../../../../../common/modals/order-action-modal/OrderActionModal';
 import ReturnAction from './ReturnAction';
 import ReturnReason from './ReturnReason';
-// import CancelOrderTable from './CancelOrderTable';
 import {
   useCurrentAction,
   useCustomerInfo,
@@ -165,9 +164,6 @@ function CancelOrder() {
             </Container>
           </TopRight>
         </Top>
-        {/* <Bottom>
-          <CancelOrderTable />
-        </Bottom> */}
       </ContentContainer>
     </OrderActionModal>
   );

package/src/components/order-view/order-actions/actions/clear-booking-status/ClearBookingStatus.tsx

@@ -0,0 +1,113 @@
+import {
+  CancelAndCompleteAction,
+  CancelationModal,
+  useApiHook,
+} from '@bjsdistribution/dms-component-library';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import {
+  useCurrentAction,
+  useLiveRecalling,
+  useOrderDetails,
+  useOrderId,
+  usePrevOrderDetails,
+} from '../../../store';
+import { ApiResponse, OrdersType } from '../../../types';
+import { useLoading } from '../../../../order-daily-overview/store/store';
+import { notification } from 'antd';
+
+const ClearBookingStatus = () => {
+  const [orderId] = useOrderId();
+  const [, setOrderDetails] = useOrderDetails();
+  const [, setPrevOrderDetails] = usePrevOrderDetails();
+  const [, setLoading] = useLoading();
+  const [, setCurrentAction] = useCurrentAction();
+  const [liveRecalling, setRecalling] = useLiveRecalling();
+
+  const {
+    data: response,
+    setShouldPerformAction: setPerformAction,
+  } = useApiHook<{
+    data: ApiResponse[];
+  }>({
+    endpoint: `orders/${orderId}/clear-date/`,
+    method: 'POST',
+    performAction: false,
+  });
+  const { data: fetchedData, loading, setShouldPerformAction } = useApiHook<{
+    data: OrdersType[];
+  }>({
+    endpoint: `orders/${orderId}`,
+    method: 'GET',
+    performAction: false,
+  });
+
+  useEffect(() => {
+    setLoading(loading);
+    if (fetchedData && fetchedData.data) {
+      const requiredData = fetchedData?.data;
+      setOrderDetails(requiredData[0]);
+      setPrevOrderDetails(requiredData[0]);
+      setCurrentAction(undefined);
+    }
+    if (
+      (fetchedData && fetchedData?.data === null) ||
+      fetchedData?.data?.length === 0
+    ) {
+      setCurrentAction(undefined);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (response) {
+      //@ts-ignore
+      if (response?.data && response?.code === 200) {
+        setShouldPerformAction(true);
+        setRecalling(true);
+        setTimeout(() => {
+          setRecalling(false);
+        }, 2000);
+      } else {
+        notification.error({
+          message: 'Error',
+          description:
+            //@ts-ignore
+            response?.error_traceback ||
+            'An error has occurred. Please try again later.',
+        });
+        setCurrentAction(undefined);
+      }
+    }
+  }, [response, liveRecalling]);
+
+  const saveButton = () => {
+    if (orderId) {
+      setRecalling(false);
+      setPerformAction(true);
+    }
+  };
+
+  const closeModal = () => {
+    setCurrentAction(undefined);
+  };
+  return (
+    <CancelationModal
+      title="Clear Booking Status"
+      description="Are you sure, you want to clear booking status of the Order?"
+      actions={
+        <CustomCancelAndCompleteAction
+          cancelLabel="Cancel"
+          onCancel={closeModal}
+          completeLabel="Confirm"
+          onComplete={saveButton}
+        />
+      }
+    />
+  );
+};
+
+const CustomCancelAndCompleteAction = styled(CancelAndCompleteAction)`
+  justify-content: center;
+`;
+
+export default ClearBookingStatus;