fix: fix notes.

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailDrawerProvider.js

@@ -3,6 +3,7 @@ import intl from 'react-intl-universal';
 import {
   useCreditNote,
   useRefundCreditNote,
+  useReconcileCreditNote,
   useReconcileCreditNotes,
 } from 'hooks/query';
 import { DrawerHeaderContent, DrawerLoading } from 'components';
@@ -33,15 +34,21 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
   // Handle fetch refund credit note.
   const {
     data: reconcileCreditNotes,
-    isFetching: isReconcileCreditNoteFetching,
     isLoading: isReconcileCreditNoteLoading,
   } = useReconcileCreditNotes(creditNoteId, {
     enabled: !!creditNoteId,
   });
 
+  // Handle fetch reconcile credit note details.
+  const { isLoading: isReconcileCreditLoading, data: reconcileCreditNote } =
+    useReconcileCreditNote(creditNoteId, {
+      enabled: !!creditNoteId,
+    });
+
   const provider = {
     creditNote,
     refundCreditNote,
+    reconcileCreditNote,
     reconcileCreditNotes,
 
     isRefundCreditNoteLoading,
@@ -54,7 +61,8 @@ function CreditNoteDetailDrawerProvider({ creditNoteId, ...props }) {
       loading={
         isCreditNoteLoading ||
         isRefundCreditNoteLoading ||
-        isReconcileCreditNoteLoading
+        isReconcileCreditNoteLoading ||
+        isReconcileCreditLoading
       }
     >
       <DrawerHeaderContent

src/containers/Drawers/CreditNoteDetailDrawer/CreditNoteDetailHeader.js

@@ -13,7 +13,7 @@ import CreditNoteDetailCls from '../../../style/components/Drawers/CreditNoteDet
  */
 export default function CreditNoteDetailHeader() {
   const { creditNote } = useCreditNoteDetailDrawerContext();
-  
+
   return (
     <div className={clsx(CreditNoteDetailCls.detail_panel_header)}>
       <DetailsMenu>
@@ -34,12 +34,16 @@ export default function CreditNoteDetailHeader() {
             <FormatDate value={creditNote.formatted_credit_note_date} />
           }
         />
+        <DetailItem
+          label={intl.get('credit_note.drawer.label_credits_remaining')}
+          children={creditNote.formatted_credits_remaining}
+        />
       </DetailsMenu>
 
       <DetailsMenu direction={'horizantal'} minLabelSize={'140px'}>
         <DetailItem
-          label={intl.get('credit_note.drawer.label_credits_remaining')}
-          children={creditNote.formatted_credits_remaining}
+          label={intl.get('reference')}
+          children={creditNote.reference_no}
         />
         <DetailItem
           label={intl.get('note')}