Display vendor details and extended info for version history

src/invoices/VersionHistory/InvoiceVersionHistory/VersionHistoryView/VersionHistoryView.js

@@ -18,6 +18,8 @@ import {
 
 import { VersionHistoryViewInformation } from './VersionHistoryViewInformation';
 import { VersionHistoryViewInvoiceLine } from './VersionHistoryViewInvoiceLine';
+import { VersionHistoryViewVendorDetails } from './VersionHistoryViewVendorDetails';
+import { VersionHistoryViewExtendedInformation } from './VersionHistoryViewExtendedInformation';
 import { VersionHistoryAdjustments } from '../../components';
 
 export function VersionHistoryView({ version = {} }) {
@@ -68,7 +70,18 @@ export function VersionHistoryView({ version = {} }) {
               </Accordion>
             )
           }
-
+          <Accordion
+            label={<FormattedMessage id="ui-invoice.invoice.details.vendor.title" />}
+            id="vendorDetails"
+          >
+            <VersionHistoryViewVendorDetails version={version} />
+          </Accordion>
+          <Accordion
+            label={<FormattedMessage id="ui-invoice.extendedInformation" />}
+            id="extendedInformation"
+          >
+            <VersionHistoryViewExtendedInformation version={version} />
+          </Accordion>
           {
             Boolean(adjustments.length) && (
               <Accordion

src/invoices/VersionHistory/InvoiceVersionHistory/VersionHistoryView/VersionHistoryViewExtendedInformation/VersionHistoryViewExtendedInformation.js

@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import { useStripes } from '@folio/stripes/core';
+import {
+  Col,
+  Row,
+} from '@folio/stripes/components';
+import {
+  PAYMENT_METHOD_LABELS,
+  VersionKeyValue,
+  VersionCheckbox,
+} from '@folio/stripes-acq-components';
+
+export const VersionHistoryViewExtendedInformation = ({ version = {} }) => {
+  const { folioInvoiceNo,
+    paymentMethod,
+    currency,
+    chkSubscriptionOverlap,
+    exportToAccounting,
+    enclosureNeeded,
+    exchangeRate,
+  } = version;
+
+  const stripes = useStripes();
+  const isExchangeRateVisible = stripes.currency !== currency;
+
+  return (
+    <Row>
+      <Col xs={3}>
+        <VersionKeyValue
+          name="folioInvoiceNo"
+          label={<FormattedMessage id="ui-invoice.invoice.folioInvoiceNo" />}
+          value={folioInvoiceNo}
+        />
+      </Col>
+
+      <Col xs={3}>
+        <VersionKeyValue
+          name="paymentMethod"
+          label={<FormattedMessage id="ui-invoice.invoice.paymentMethod" />}
+          value={PAYMENT_METHOD_LABELS[paymentMethod]}
+        />
+      </Col>
+
+      <Col xs={3}>
+        <VersionCheckbox
+          checked={Boolean(chkSubscriptionOverlap)}
+          disabled
+          label={<FormattedMessage id="ui-invoice.invoice.chkSubscriptionOverlap" />}
+          type="checkbox"
+          name="chkSubscriptionOverlap"
+        />
+      </Col>
+
+      <Col xs={3}>
+        <VersionCheckbox
+          checked={Boolean(exportToAccounting)}
+          disabled
+          label={<FormattedMessage id="ui-invoice.invoice.exportToAccounting" />}
+          type="checkbox"
+          name="exportToAccounting"
+        />
+      </Col>
+
+      <Col xs={3}>
+        <VersionCheckbox
+          checked={Boolean(enclosureNeeded)}
+          disabled
+          label={<FormattedMessage id="ui-invoice.invoice.enclosureNeeded" />}
+          type="checkbox"
+          name="enclosureNeeded"
+        />
+      </Col>
+
+      <Col xs={3}>
+        <VersionKeyValue
+          name="currency"
+          label={<FormattedMessage id="ui-invoice.invoice.currency" />}
+          value={currency}
+        />
+      </Col>
+
+      {isExchangeRateVisible && (
+        <Col
+          xs={3}
+        >
+          <VersionKeyValue
+            name="exchangeRate"
+            label={<FormattedMessage id="ui-invoice.invoice.details.voucher.exchangeRate" />}
+            value={exchangeRate}
+          />
+        </Col>
+      )}
+    </Row>
+  );
+};
+
+VersionHistoryViewExtendedInformation.propTypes = {
+  version: PropTypes.object.isRequired,
+};

src/invoices/VersionHistory/InvoiceVersionHistory/VersionHistoryView/VersionHistoryViewExtendedInformation/index.js

@@ -0,0 +1 @@
+export { VersionHistoryViewExtendedInformation } from './VersionHistoryViewExtendedInformation';

src/invoices/VersionHistory/InvoiceVersionHistory/VersionHistoryView/VersionHistoryViewVendorDetails/VersionHistoryViewVendorDetails.js

@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Col,
+  Row,
+} from '@folio/stripes/components';
+import {
+  VersionKeyValue,
+} from '@folio/stripes-acq-components';
+
+export const VersionHistoryViewVendorDetails = ({ version = {} }) => {
+  const { vendor, vendorInvoiceNo, accountingCode } = version;
+
+  return (
+    <Row>
+      <Col xs={3}>
+        <VersionKeyValue
+          name="vendorInvoiceNo"
+          label={<FormattedMessage id="ui-invoice.invoice.details.vendor.vendorInvoiceNo" />}
+          value={vendorInvoiceNo}
+        />
+      </Col>
+      <Col xs={3}>
+        <VersionKeyValue
+          name="vendorId"
+          label={<FormattedMessage id="ui-invoice.invoice.details.vendor.name" />}
+          value={vendor}
+        />
+      </Col>
+      <Col xs={3}>
+        <VersionKeyValue
+          name="accountingCode"
+          label={<FormattedMessage id="ui-invoice.invoice.accountingCode" />}
+          value={accountingCode}
+        />
+      </Col>
+    </Row>
+  );
+};
+
+VersionHistoryViewVendorDetails.propTypes = {
+  version: PropTypes.object.isRequired,
+};

src/invoices/VersionHistory/InvoiceVersionHistory/VersionHistoryView/VersionHistoryViewVendorDetails/index.js

@@ -0,0 +1 @@
+export { VersionHistoryViewVendorDetails } from './VersionHistoryViewVendorDetails';