@bjsdistribution/dms-client-return 0.1.5-prod → 0.1.6-prod

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5-prod",
+  "version": "0.1.6-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.39-staging",
+    "@bjsdistribution/dms-component-library": "0.3.42-prod",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@tippyjs/react": "^4.2.6",
     "@types/react": "^18.2.47",

package/src/assets/icons/ActionIcon.tsx

@@ -11,7 +11,7 @@ const ActionIcon = () => (
     <path
       d="M0.5 12.2432C0.5 5.61581 5.87258 0.243225 12.5 0.243225C19.1274 0.243225 24.5 5.61581 24.5 12.2432C24.5 18.8706 19.1274 24.2432 12.5 24.2432C5.87258 24.2432 0.5 18.8706 0.5 12.2432Z"
       fill="#E95252"
-      fill-opacity="0.5"
+      fillOpacity="0.5"
     />
     <path
       d="M16.566 9.23825C16.6377 9.16909 16.6948 9.08636 16.7342 8.99488C16.7735 8.90339 16.7943 8.80499 16.7952 8.70541C16.7961 8.60582 16.7772 8.50705 16.7395 8.41486C16.7018 8.32267 16.6462 8.23891 16.5758 8.16846C16.5054 8.098 16.4217 8.04228 16.3295 8.00452C16.2374 7.96677 16.1386 7.94774 16.0391 7.94856C15.9395 7.94938 15.841 7.97002 15.7495 8.00929C15.658 8.04855 15.5752 8.10565 15.506 8.17725L12.5 11.1822L9.495 8.17725C9.42634 8.10356 9.34354 8.04446 9.25154 8.00347C9.15954 7.96247 9.06022 7.94043 8.95952 7.93865C8.85882 7.93688 8.75879 7.9554 8.6654 7.99312C8.57201 8.03084 8.48718 8.08699 8.41596 8.15821C8.34474 8.22943 8.2886 8.31426 8.25087 8.40765C8.21315 8.50104 8.19463 8.60107 8.19641 8.70177C8.19818 8.80247 8.22022 8.90178 8.26122 8.99378C8.30221 9.08578 8.36131 9.16858 8.435 9.23725L11.438 12.2432L8.433 15.2482C8.30052 15.3904 8.22839 15.5785 8.23182 15.7728C8.23525 15.9671 8.31396 16.1525 8.45138 16.2899C8.58879 16.4273 8.77417 16.506 8.96847 16.5094C9.16278 16.5128 9.35082 16.4407 9.493 16.3082L12.5 13.3032L15.505 16.3092C15.6472 16.4417 15.8352 16.5139 16.0295 16.5104C16.2238 16.507 16.4092 16.4283 16.5466 16.2909C16.684 16.1535 16.7627 15.9681 16.7662 15.7738C16.7696 15.5795 16.6975 15.3914 16.565 15.2492L13.562 12.2432L16.566 9.23825Z"

package/src/assets/icons/ArrowDownIcon.tsx

@@ -16,8 +16,8 @@ const ArrowDownIcon: React.FC<ArrowDownIconProps> = ({ fill = '#3A3630' }) => {
       <rect width="24" height="24" fill={fill} />
       <path
         opacity="0.4"
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M6.69104 9.8912C6.82604 9.75637 7.00903 9.68063 7.19984 9.68063C7.39064 9.68063 7.57363 9.75637 7.70864 9.8912L11.9998 14.1824L16.291 9.8912C16.4275 9.76402 16.608 9.69478 16.7946 9.69807C16.9811 9.70136 17.1591 9.77693 17.291 9.90884C17.4229 10.0408 17.4985 10.2187 17.5018 10.4053C17.5051 10.5918 17.4358 10.7723 17.3086 10.9088L12.5086 15.7088C12.3736 15.8436 12.1906 15.9194 11.9998 15.9194C11.809 15.9194 11.626 15.8436 11.491 15.7088L6.69104 10.9088C6.5562 10.7738 6.48047 10.5908 6.48047 10.4C6.48047 10.2092 6.5562 10.0262 6.69104 9.8912Z"
         fill="#3A3630"
       />

package/src/components/order-view/details-filters/left-side-filters/dropdowns/OptionsDropDown.tsx

@@ -40,7 +40,7 @@ function Options() {
   };
 
   const isReleased = orderStatus[0]?.released;
-  const routedValue = orderStatus[0]?.routed;
+  // const routedValue = orderStatus[0]?.routed;
   const isRouted = orderStatus[0]?.routed && orderDetails?.order_routes?.id;
   const isOrderOnHold = orderDetails?.status === 'OO';
   const isOrderCancelled = orderDetails?.status === 'CO';
@@ -74,9 +74,9 @@ function Options() {
       shouldExclude = true;
     }
 
-    if (routedValue && option.value === 'remove-from-route') {
-      shouldExclude = true;
-    }
+    // if (routedValue && option.value === 'remove-from-route') {
+    //   shouldExclude = true;
+    // }
 
     return !shouldExclude;
   });

package/src/components/order-view/generic-table/AuditLogs.tsx

@@ -1,12 +1,16 @@
 import styled from 'styled-components';
 import React from 'react';
+
 import { Skeleton } from 'antd';
-import { formatUtcToLocal } from '@bjsdistribution/dms-component-library';
-import { useAuditLogLoadingState, usegetNotes } from '../store';
+import {
+  PrivateIcon,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import { NotesTableData } from '../notes/logs/fakeData';
+import { useAuditLogLoadingState, usegetNotes } from '../store';
 
 const GenericAuditLogsTable = () => {
-  const tableHeadData = NotesTableData[0].tableHead; // Assuming NotesTableData contains table header information
+  const tableHeadData = NotesTableData[0]?.tableHead; // Assuming NotesTableData contains table header information
   const [getNotes] = usegetNotes();
   const [auditLogLoadingStatus] = useAuditLogLoadingState();
 
@@ -35,9 +39,23 @@ const GenericAuditLogsTable = () => {
                     <div className="bold" title={note?.created_by}>
                       {note?.created_by}
                     </div>
-                    <div>{`${formatUtcToLocal(note?.created_at).date} @ ${
-                      formatUtcToLocal(note?.created_at).time
-                    }`}</div>
+                    <div className="notesIcon">
+                      {note?.is_private ? (
+                        <>
+                          <PrivateIcon />{' '}
+                          <span className="datetime">{`${
+                            formatUtcToLocal(note?.created_at).date
+                          } @ ${
+                            formatUtcToLocal(note?.created_at).time
+                          }`}</span>
+                        </>
+                      ) : (
+                        <span className="datetime">{`${
+                          formatUtcToLocal(note?.created_at).date
+                        } @ ${formatUtcToLocal(note?.created_at).time}`}</span>
+                      )}
+                    </div>
+                    <div>{note?.note_type || 'N/A'}</div>
                   </td>
                   <td
                     dangerouslySetInnerHTML={{ __html: note?.description }}
@@ -56,6 +74,8 @@ const GenericAuditLogsTable = () => {
   );
 };
 
+const ScrollableTableWrapper = styled.div``;
+
 export const AuditTableWrapper = styled.div`
   height: 250px;
   min-height: 200px;
@@ -82,22 +102,29 @@ export const AuditTableWrapper = styled.div`
         color: #667085;
         font-family: Lato;
         font-size: 13px;
-        font-style: normal;
         font-weight: 400;
         line-height: 16px;
         padding: 10px;
+        border-bottom: 1px solid #efe8e8;
+        word-break: break-word;
+        vertical-align: top;
+
         .bold {
           font-weight: 500;
           font-size: 14px;
         }
+        .notesIcon {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+
+          .datetime {
+            min-width: 155px;
+          }
+        }
       }
     }
   }
 `;
 
-const ScrollableTableWrapper = styled.div`
-  height: 550px;
-  overflow: auto;
-`;
-
 export default GenericAuditLogsTable;

package/src/components/order-view/notes/AddNote.tsx

@@ -1,42 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 import {
   Button,
   Label,
   useAxios,
-  // SelectDropdown,
 } from '@bjsdistribution/dms-component-library';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
-import { useLocation } from 'react-router-dom';
+import { Select, notification } from 'antd';
 import { useGlobalStateHitAuditLog, usemoduleIds, useOrderId } from '../store';
-import { notification } from 'antd';
+import { useLocation } from 'react-router-dom';
+import { useClientPortal, useSelectedData } from '../../store';
 import NoteType from './NoteType';
-import { useSelectedData } from '../../store';
 import { ApiResponse } from '../types';
+const template = `REASON- \nSTC- \nACTION- `;
 
 function AddNote() {
-  const [noteText, setNoteText] = useState('');
+  const [noteText, setNoteText] = useState(template);
+  const [noteOptions, setNoteOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  const [selectedNoteType, setSelectedNoteType] = useState<string | null>(
+    'standard'
+  );
   const [orderId] = useOrderId();
   const location = useLocation();
   const pathname = location.pathname;
   const orderIdLocaation = pathname.split('/')[1];
+  const [isClientPortal] = useClientPortal();
   const [moduleIds] = usemoduleIds();
   const [, setRecallAuditLog] = useGlobalStateHitAuditLog();
-  const [selected] = useSelectedData();
+  const [selectedAssignee] = useSelectedData();
+
+  const { fetchData: getNoteType, data: fetchedData } = useAxios<any>({
+    endpoint: `audit_logs/order/type`,
+    method: 'GET',
+  });
+  console.log(selectedNoteType, 'selectedNoteType');
+  useEffect(() => {
+    getNoteType();
+  }, []);
+
+  useEffect(() => {
+    if (fetchedData?.data) {
+      const options = fetchedData?.data?.map((item: any) => ({
+        label: item?.name,
+        value: item?.name,
+      }));
+      setNoteOptions(options);
+
+      const standardOption = options?.find(
+        (opt: any) => opt?.value?.toLowerCase() === 'standard'
+      );
+      if (standardOption) {
+        setSelectedNoteType(standardOption?.value);
+      } else if (options?.length > 0) {
+        setSelectedNoteType(options[0]?.value);
+      }
+    }
+  }, [fetchedData]);
 
-  // Save New Note
-  const { fetchData: callAuditLogs } = useAxios<{
-    data: ApiResponse[];
-  }>({
+  const { fetchData: callAuditLogs } = useAxios<{ data: ApiResponse[] }>({
     endpoint: `/audit_logs/orders/`,
     method: 'POST',
   });
 
-  const [notificationData, setNotificationData] = useState<{
-    type: 'success' | 'error';
-    message: string;
-    description: string;
-  } | null>(null);
-
+  const isValidFormat = () => {
+    const lines = noteText.split('\n');
+    if (lines.length < 3) return false;
+    return (
+      lines[0].startsWith('REASON-') &&
+      lines[1].startsWith('STC-') &&
+      lines[2].startsWith('ACTION-')
+    );
+  };
+  const isDisabled = !noteText.trim() || !isValidFormat() || !selectedAssignee;
   const saveNote = async () => {
     setRecallAuditLog(false);
     if (!noteText) return;
@@ -46,34 +82,38 @@ function AddNote() {
           parent_object_id: orderId || orderIdLocaation,
           parent_module_id: moduleIds?.parentId,
           module_id: moduleIds?.id,
+          note_type: selectedNoteType,
           module_object_id: orderId || orderIdLocaation,
           action: 'create',
           description: noteText,
           data_dump: '{}',
           manual: 1,
-          is_private: selected,
+          is_private: isClientPortal
+            ? false
+            : selectedAssignee === '0'
+            ? true
+            : false,
         },
       ],
     };
     try {
-      let response = (await callAuditLogs({
-        payload: payload,
-      })) as {
-        code: number | null;
-        error?: string | null | undefined;
-        [key: string]: any;
-      };
-      if (response.code == 200 && response?.data) {
+      const response = await callAuditLogs({ payload });
+      //@ts-ignore
+      if (response?.code === 200 && response?.data) {
         notification.success({
           message: 'Success',
-          description: `${response?.message}`,
+          //@ts-ignore
+          description: response?.message || 'Note saved successfully',
         });
-        setNoteText('');
+
+        setNoteText(template);
+        setSelectedNoteType('Standard');
         setRecallAuditLog(true);
       } else {
         notification.error({
           message: 'Error',
-          description: `${response?.error}`,
+          //@ts-ignore
+          description: response?.error || 'Failed to save note',
         });
       }
     } catch (error) {
@@ -83,38 +123,47 @@ function AddNote() {
       });
     }
   };
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const val = e.target.value;
+    const lines = val.split('\n');
 
-  useEffect(() => {
-    if (notificationData) {
-      const { type, message, description } = notificationData;
-      notification[type]({
-        message,
-        description,
-        duration: 5,
-      });
-      setNotificationData(null); // Clear notification data after showing
+    while (lines.length < 3) {
+      if (lines.length === 0) lines.push('REASON- ');
+      else if (lines.length === 1) lines.push('STC- ');
+      else if (lines.length === 2) lines.push('ACTION- ');
     }
 
-    // Set top position for notifications
-    notification.config({
-      top: 80,
+    const enforcedLines = lines.map((line, idx) => {
+      if (idx === 0) {
+        if (!line.startsWith('REASON-')) return 'REASON- ';
+      }
+      if (idx === 1) {
+        if (!line.startsWith('STC-')) return 'STC- ';
+      }
+      if (idx === 2) {
+        if (!line.startsWith('ACTION-')) return 'ACTION- ';
+      }
+      return line;
     });
-  }, [notificationData]);
+
+    setNoteText(enforcedLines.join('\n'));
+  };
 
   return (
     <Container>
-      <Label label="Add New Note" />
-      <StyledTextArea
-        name="description"
-        placeholder="Enter your note here..."
-        value={noteText}
-        onChange={(e: any) => setNoteText(e.target.value)}
+      <Label label="Add New Note" required style={{ color: 'black' }} />
+      <StyledAntSelect
+        options={noteOptions}
+        placeholder="Select Note Type"
+        onChange={(value: string) => setSelectedNoteType(value)}
+        value={selectedNoteType}
       />
+      <StyledTextArea value={noteText} onChange={handleChange} rows={3} />
       <SaveNoteContainer>
-        <Button disabled={!noteText} onClick={saveNote}>
+        <Button disabled={isDisabled} onClick={saveNote}>
           SAVE NOTE
         </Button>
-        <NoteType />
+        {!isClientPortal && <NoteType />}
       </SaveNoteContainer>
     </Container>
   );
@@ -137,20 +186,20 @@ const SaveNoteContainer = styled.div`
 `;
 
 const StyledTextArea = styled.textarea`
-  height: 57px;
-  border-radius: 12px;
-  background: #fff;
-  resize: none;
+  height: 65px;
   border-radius: 8px;
-  border: 1px solid var(--Neutral-Gray-Gray-100, #e0e2e7);
-  background: var(--Flowkit-White, #fff);
+  background: #fff;
+  resize: vertical;
+  border: 1px solid #e0e2e7;
   padding: 8px 12px;
+  font-family: monospace;
+  white-space: pre-wrap;
 `;
 
-// const StyledSelectDropdown = styled(SelectDropdown)`
-//   border-color: #e0e2e7 !important;
-//   width: 8vw;
-//   margin-bottom: 5px;
-// `;
+export const StyledAntSelect: any = styled(Select)`
+  .ant-select-selector {
+    border-radius: 8px;
+  }
+`;
 
 export default AddNote;