@bjsdistribution/dms-client-return 0.1.20-dev → 0.1.21-dev

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

@@ -1,41 +1,80 @@
+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',
+    showLoader: false,
+  });
+
+  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() || !selectedAssignee;
 
   const saveNote = async () => {
     setRecallAuditLog(false);
@@ -46,34 +85,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 +126,25 @@ function AddNote() {
       });
     }
   };
-
-  useEffect(() => {
-    if (notificationData) {
-      const { type, message, description } = notificationData;
-      notification[type]({
-        message,
-        description,
-        duration: 5,
-      });
-      setNotificationData(null); // Clear notification data after showing
-    }
-
-    // Set top position for notifications
-    notification.config({
-      top: 80,
-    });
-  }, [notificationData]);
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setNoteText(e.target.value);
+  };
 
   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 +167,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;

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

@@ -8,12 +8,13 @@ import { useNewReturnOrderData, useSelectedProducts } from '../../../store';
 import { atom, useAtom } from 'jotai';
 
 export const payloadAtom = atom<any>(null);
+export const selectedOrderId = atom<any>(null);
 
 const NewReturnDropdown = () => {
   const defaultSelectStyle = { width: '100%' };
   const defaultPopupClassName = 'dropDownStyle';
   const [returnOrderData, setReturnOrderData] = useNewReturnOrderData();
-  const [selectedOrderId, setSelectedOrderId] = useState<string | null>(null);
+  const [selectedId, setSelectedOrderId] = useAtom(selectedOrderId);
   const [selectedProducts] = useSelectedProducts();
   const [orderData] = useOrderDetails();
   const [, setPayload] = useAtom(payloadAtom);
@@ -67,14 +68,14 @@ const NewReturnDropdown = () => {
   }, [fetchedReturnOrderData, id]);
 
   useEffect(() => {
-    if (selectedOrderId && selectedProducts?.length > 0) {
+    if (selectedId && selectedProducts?.length > 0) {
       const newPayload = {
-        new_return_order: selectedOrderId,
+        new_return_order: selectedId,
         products: selectedProducts,
       };
       setPayload(newPayload);
     }
-  }, [selectedOrderId, selectedProducts, setPayload]);
+  }, [selectedId, selectedProducts, setPayload]);
 
   const handleDropdownChange = (value: string) => {
     setSelectedOrderId(value);
@@ -83,23 +84,20 @@ const NewReturnDropdown = () => {
     label: `${order?.recipient_name} - ${order?.postcode}`,
     value: order?.id,
   }));
-
   return (
     <Container>
       <Text>New Return Order:</Text>
       <StyledAntSelect
         options={dropdownOptions}
-        value={selectedOrderId}
+        value={selectedId}
         placeholder="Select"
         // @ts-ignore
         onChange={handleDropdownChange}
         style={defaultSelectStyle}
         showSearch
-        dropdownStyle={{ width: 'max-content' }}
+        dropdownStyle={{ width: '250px' }}
         popupClassName={defaultPopupClassName}
-        status={
-          dropdownOptions.length === 0 ? '' : selectedOrderId ? '' : 'error'
-        }
+        status={dropdownOptions.length === 0 ? '' : selectedId ? '' : 'error'}
         notFoundContent="No orders found with a similar postcode"
       />
     </Container>

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

@@ -1,14 +1,17 @@
-import { FlagAlert } from '@bjsdistribution/dms-component-library';
+import {
+  FlagAlert,
+  formatUtcToLocal,
+} from '@bjsdistribution/dms-component-library';
 import React from 'react';
 import styled from 'styled-components';
 import { useFlagRefId } from '../order-actions/store';
 import { useCurrentAction } from '../store';
-import { formatDate } from '../order-actions/utils';
-
+import { useClientPortal } from '../../store';
 function FlagTemplate({ data, dismissFlags }: any) {
   const [, setSelectedFlag] = useFlagRefId();
   const [, setCurrentAction] = useCurrentAction();
-
+  const [isCustomerPortal] = useClientPortal();
+  //
   const openModal = () => {
     setCurrentAction('view-flag');
   };
@@ -25,21 +28,30 @@ function FlagTemplate({ data, dismissFlags }: any) {
         title={
           <>
             <StyledTitle color={titleColor}>
-              Flag : {data?.is_private ? 'Private' : ''}{' '}
+              Flag : {data?.is_private ? 'Private' : 'Public'}{' '}
               <StyledLink onClick={() => handleClick(data.id)}>
                 {data?.id} - {data?.flag_type}{' '}
               </StyledLink>{' '}
               {data?.status === 'AD' ? 'Unresolved' : 'Resolved on'}{' '}
               {data?.status == 'SD' ? (
                 <>
-                  {formatDate(data?.resolved_at)} by {data?.resolved_by}{' '}
+                  {`${formatUtcToLocal(data?.resolved_at)?.date}  ${
+                    formatUtcToLocal(data?.resolved_at)?.time
+                  }`}{' '}
+                  by {data?.resolved_by}{' '}
                 </>
               ) : null}
             </StyledTitle>
           </>
         }
         subtitle=""
-        description={`${data?.description}`}
+        description={
+          isCustomerPortal ? (
+            <span dangerouslySetInnerHTML={{ __html: data?.description }} />
+          ) : (
+            `${data?.description}`
+          )
+        }
         showOkButton={false}
         onClose={() => dismissFlags(data?.id)}
       />
@@ -47,9 +59,7 @@ function FlagTemplate({ data, dismissFlags }: any) {
   );
 }
 
-const StyledAlert = styled.div`
-  margin-bottom: 10px;
-`;
+const StyledAlert = styled.div``;
 
 const StyledLink = styled.span`
   color: var(--contextual-blue, #6396e5);
@@ -57,6 +67,7 @@ const StyledLink = styled.span`
   font-size: 14px;
   font-style: normal;
   font-weight: 600;
+  cursor: pointer;
 `;
 
 const StyledTitle = styled.span<{ color: string }>`