@bjsdistribution/dms-client-return 0.0.82 → 0.0.84

package/src/components/order-view/notes/order-dropdown/NewReturnDropdown.tsx

@@ -4,7 +4,7 @@ import { useApiHook } from '@bjsdistribution/dms-component-library';
 import { ApiResponse } from '../../types';
 import { useOrderDetails, useOrderId, useProductDetails } from '../../store';
 import { Select } from 'antd';
-import { useSelectedProducts } from '../../../store';
+import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
 
 export const payloadAtom = atom<any>(null);
@@ -12,7 +12,7 @@ export const payloadAtom = atom<any>(null);
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
-  const [returnOrderData, setReturnOrderData] = useState<any>([]);
+  const [returnOrderData, setReturnOrderData] = useNewReturnOrderData();
   const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
   const [selectedProducts] = useSelectedProducts();
   const [orderData] = useOrderDetails();
@@ -89,20 +89,33 @@ const NewReturnDropdown = () => {
   return (
     <Container>
       <Text>New Return Order:</Text>
-      <Select
+      <StyledAntSelect
         options={dropdownOptions}
+        value={selectedOrderId}
         placeholder="Select"
+        // @ts-ignore
         onChange={handleDropdownChange}
         style={defaultSelectStyle}
-        disabled={false}
         showSearch
         dropdownStyle={{ width: 'max-content' }}
         popupClassName={defaultPopupClassName}
+        status={selectedOrderId ? '' : 'error'}
       />
     </Container>
   );
 };
 
+const StyledAntSelect = styled(Select)`
+  .ant-select-selector {
+    /* width: 22vw; */
+    border-radius: 22px;
+  }
+  .ant-select-clear {
+    top: 40% !important;
+    font-size: 18px !important;
+  }
+`;
+
 const Container = styled.div`
   display: flex;
   align-items: center;

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

@@ -38,7 +38,7 @@ function FlagTemplate({ data }: any) {
           </>
         }
         subtitle=""
-        description={`${data.details}`}
+        description={`${data?.description}`}
         showOkButton={false}
         onClose={() => {}}
       />

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

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { useReminderRefId } from '../order-actions/store';
 import { formatDate } from '../order-actions/utils';
 
-function ReminderTemplate({ data }: any) {
+function ReminderTemplate({ data, dismissReminder }: any) {
   const [, setCurrentAction] = useCurrentAction();
   const [, setReminderRefId] = useReminderRefId();
   const openModal = () => {
@@ -15,7 +15,7 @@ function ReminderTemplate({ data }: any) {
   //getting particular reminder data
   const handleClick = (Id: number) => {
     setReminderRefId(Id);
-    openModal()
+    openModal();
   };
 
   const type =
@@ -25,13 +25,12 @@ function ReminderTemplate({ data }: any) {
       ? 'warn'
       : 'success';
 
-      const titleColor = 
-      data?.reminder_status?.name === 'SD' 
-        ? '#36A053' 
-        : data?.reminder_status?.name === 'pending' 
-        ? '#FEBA30' 
-        : '#3A3630';
-    
+  const titleColor =
+    data?.reminder_status?.name === 'SD'
+      ? '#36A053'
+      : data?.reminder_status?.name === 'pending'
+      ? '#FEBA30'
+      : '#3A3630';
 
   return (
     <div>
@@ -46,13 +45,13 @@ function ReminderTemplate({ data }: any) {
                   {' '}
                   {data?.reference || 'NA'}{' '}
                 </StyledLink>
-                {formatDate(data?.due)}, Assigned to : {' '}
+                {formatDate(data?.due)}, Assigned to :{' '}
               </StyledTitle>
             </>
           }
           description={`${data?.details}`}
           showOkButton={false}
-          onClose={() => {}}
+          onClose={() => dismissReminder(data.id)}
         />
       </StyledAlert>
     </div>

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';
 
@@ -10,6 +9,8 @@ function Tabs({
   closedNotifications,
   activeReminders,
   closedReminders,
+  dismissReminder,
+  dismissFlags,
 }: any) {
   const [activeTab] = useTabType();
 
@@ -25,24 +26,33 @@ function Tabs({
         <Container className="tab-content">
           {activeTab === 'active' && (
             <>
-              <OrderTemplate />
               {initialReminders.map((item: any, index: any) => (
-                <ReminderTemplate key={index} data={item} />
+                <ReminderTemplate
+                  key={index}
+                  data={item}
+                  dismissReminder={dismissReminder}
+                />
               ))}
               {initialNotifications.map((item: any, index: any) => (
-                <FlagTemplate key={index} data={item} />
+                <FlagTemplate
+                  key={index}
+                  data={item}
+                  dismissFlags={dismissFlags}
+                />
               ))}
               <>
                 {additionalReminders.map((item: any, index: any) => (
                   <ReminderTemplate
                     key={index + initialReminders.length}
                     data={item}
+                    dismissReminder={dismissReminder}
                   />
                 ))}
                 {additionalNotifications.map((item: any, index: any) => (
                   <FlagTemplate
                     key={index + initialNotifications.length}
                     data={item}
+                    dismissFlags={dismissFlags}
                   />
                 ))}
               </>
@@ -51,10 +61,18 @@ function Tabs({
           {activeTab === 'closed' && (
             <>
               {closedReminders.map((item: any, index: any) => (
-                <ReminderTemplate key={index} data={item} />
+                <ReminderTemplate
+                  key={index}
+                  data={item}
+                  dismissReminder={dismissReminder}
+                />
               ))}
               {closedNotifications.map((item: any, index: any) => (
-                <FlagTemplate key={index} data={item} />
+                <FlagTemplate
+                  key={index}
+                  data={item}
+                  dismissFlags={dismissFlags}
+                />
               ))}
             </>
           )}

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

@@ -2,7 +2,7 @@ import {
   SectionHeader,
   useApiHook,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import Tabs from './Tabs';
 import styled from 'styled-components';
 import { useInfoType, useOrderDetails, useTabType } from '../store';
@@ -38,6 +38,10 @@ function Notification() {
   const routeId = OrderData?.order_routes?.route_id;
   const [, setRouteData] = useRouteDetails();
   const [orderCount] = useOrderNotify();
+  const [activeNotifications, setActiveNotifications] = useState([]);
+  const [closedNotifications, setCloseNotifications] = useState([]);
+  const [activeReminders, setActiveReminders] = useState([]);
+  const [closedReminders, setCloseReminders] = useState([]);
 
   const handleTabChange = (tab: string) => {
     setActiveTab(tab);
@@ -79,19 +83,47 @@ function Notification() {
     }
   });
 
-  const activeNotifications = notificationData.filter(
-    (item: any) => item.task_status_id !== 2
-  );
-  const closedNotifications = notificationData.filter(
-    (item: any) => item?.task_status_id === 2
-  );
+  useEffect(() => {
+    if (notificationData?.length > 0) {
+      setActiveNotifications(
+        notificationData?.filter((item: any) => item.task_status_id !== 2)
+      );
+      setCloseNotifications(
+        notificationData?.filter((item: any) => item?.task_status_id === 2)
+      );
+    }
+  }, [notificationData]);
 
-  const activeReminders = reminderData.filter(
-    (item: any) => item.status_id == 1 || item.status_id == 3
-  );
-  const closedReminders = reminderData.filter(
-    (item: any) => item?.status_id === 2
-  );
+  useEffect(() => {
+    if (reminderData?.length > 0) {
+      setActiveReminders(
+        reminderData?.filter(
+          (item: any) => item.status_id === 1 || item.status_id === 3
+        )
+      );
+      setCloseReminders(
+        reminderData?.filter((item: any) => item?.status_id === 2)
+      );
+    }
+  }, [reminderData]);
+
+  //dismiss notifcations
+  const dismissFlags = (id: any) => {
+    setActiveNotifications(prevFlags =>
+      prevFlags.filter((flags: any) => flags.id !== id)
+    );
+    setCloseNotifications(prevFlags =>
+      prevFlags.filter((flags: any) => flags.id !== id)
+    );
+  };
+  const dismissReminder = (id: any) => {
+    setActiveReminders(prevReminders =>
+      prevReminders.filter((reminder: any) => reminder.id !== id)
+    );
+    setCloseReminders(prevReminders =>
+      prevReminders.filter((reminder: any) => reminder.id !== id)
+    );
+  };
 
   const totalActiveCount =
     activeNotifications.length + activeReminders.length + orderCount;
@@ -136,6 +168,8 @@ function Notification() {
               closedNotifications={closedNotifications}
               activeReminders={activeReminders}
               closedReminders={closedReminders}
+              dismissReminder={dismissReminder}
+              dismissFlags={dismissFlags}
             />
           </TabsWrapper>
         ) : (

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}