fix: BIG-274 Duplicated description in payment receive details.

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailFooter.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+  CommercialDocFooter,
+  T,
+  If,
+  DetailsMenu,
+  DetailItem,
+} from '../../../components';
+import { useVendorCreditDetailDrawerContext } from './VendorCreditDetailDrawerProvider';
+
+export function VendorCreditDetailFooter() {
+  const { vendorCredit } = useVendorCreditDetailDrawerContext();
+
+  return (
+    <CommercialDocFooter>
+      <DetailsMenu direction={'horizantal'} minLabelSize={'150px'}>
+        <If condition={vendorCredit.note}>
+          <DetailItem label={<T id={'note'} />} children={vendorCredit.note} />
+        </If>
+      </DetailsMenu>
+    </CommercialDocFooter>
+  );
+}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailHeader.js

@@ -38,6 +38,11 @@ export default function VendorCreditDetailHeader() {
       <Row>
         <Col xs={6}>
           <DetailsMenu direction={'horizantal'} minLabelSize={'180px'}>
+            <DetailItem
+              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
+            >
+              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
+            </DetailItem>
             <DetailItem
               label={intl.get('vendor_credit.drawer.label_vendor_credit_no')}
             >
@@ -49,12 +54,6 @@ export default function VendorCreditDetailHeader() {
                 {vendorCredit.vendor?.display_name}
               </VendorDrawerLink>
             </DetailItem>
-
-            <DetailItem
-              label={intl.get('vendor_credit.drawer.label_vendor_credit_date')}
-            >
-              <FormatDate value={vendorCredit.formatted_vendor_credit_date} />
-            </DetailItem>
           </DetailsMenu>
         </Col>
         <Col xs={6}>
@@ -72,10 +71,6 @@ export default function VendorCreditDetailHeader() {
               label={intl.get('reference')}
               children={defaultTo(vendorCredit.reference_no, '-')}
             />
-            <DetailItem
-              label={intl.get('note')}
-              children={defaultTo(vendorCredit.note, '-')}
-            />
             <DetailItem
               label={<T id={'vendor_credit.drawer.label_created_at'} />}
               children={<FormatDate value={vendorCredit.created_at} />}

src/containers/Drawers/VendorCreditDetailDrawer/VendorCreditDetailPanel.js

@@ -5,6 +5,7 @@ import { CommercialDocBox } from 'components';
 import VendorCreditDetailHeader from './VendorCreditDetailHeader';
 import VendorCreditDetailTable from './VendorCreditDetailTable';
 import VendorCreditDetailDrawerFooter from './VendorCreditDetailDrawerFooter';
+import { VendorCreditDetailFooter } from './VendorCreditDetailFooter';
 
 /**
  * Vendor credit details panel.
@@ -16,6 +17,7 @@ export default function VendorCreditDetailPanel() {
       <VendorCreditDetailHeader />
       <VendorCreditDetailTable />
       <VendorCreditDetailDrawerFooter />
+      <VendorCreditDetailFooter />
     </CommercialDocBox>
   );
 }