UI: overridden: Override PaymentInformation and OrderLine

ui/src/config.js

@@ -146,6 +146,43 @@ export const config = {
   },
   ILL_BORROWING_REQUESTS: {
     defaultType: "PHYSICAL_COPY",
+    fieldOverrides: {
+      due_date: "Returned Date",
+    },
+    search: {
+      sort: [
+        {
+          order: 1,
+          sortBy: "created",
+          sortOrder: "desc",
+          text: "Recently added",
+        },
+        {
+          order: 2,
+          sortBy: "bestmatch",
+          sortOrder: "asc",
+          text: "Most relevant",
+        },
+        {
+          order: 3,
+          sortBy: "request_date",
+          sortOrder: "desc",
+          text: "Request date",
+        },
+        {
+          order: 4,
+          sortBy: "expected_delivery_date",
+          sortOrder: "desc",
+          text: "Expected delivery date",
+        },
+        {
+          order: 5,
+          sortBy: "due_date",
+          sortOrder: "desc",
+          text: "Returned Date",
+        },
+      ],
+    },
   },
   PATRONS: {
     customFields: {

ui/src/overridableMapping.js

@@ -25,6 +25,8 @@ import { Identifiers } from "./overridden/frontsite/Document/DocumentDetails/Doc
 import { DocumentConference } from "./overridden/frontsite/Document/DocumentDetails/DocumentMetadataTabs/DocumentConference";
 import { DocumentItemsHeader } from "./overridden/frontsite/Document/DocumentDetails/DocumentItemsHeader";
 import { OpeningHoursDetails } from "./overridden/frontsite/OpeningHours/OpeningHoursDetails";
+import { PaymentInformationGrid } from "./overridden/backoffice/PaymentInformation/PaymentInformation";
+import { OrderDetailsLine } from "./overridden/backoffice/Acquisition/OrderDetails";
 
 export const overriddenCmps = {
   "Backoffice.PatronDetails.Metadata": PatronMetadata,
@@ -52,4 +54,6 @@ export const overriddenCmps = {
   "DocumentConference.layout": DocumentConference,
   "DocumentDetails.DocumentItems.header": DocumentItemsHeader,
   "OpeningHours.details": OpeningHoursDetails,
+  "Backoffice.PaymentInformation": PaymentInformationGrid,
+  "Acquisition.OrderLine": OrderDetailsLine,
 };

ui/src/overridden/backoffice/Acquisition/OrderDetails.js

@@ -0,0 +1,40 @@
+import { OrderLine } from "@inveniosoftware/react-invenio-app-ils";
+import PropTypes from "prop-types";
+import React from "react";
+import { Icon, Item, Popup } from "semantic-ui-react";
+import { parametrize } from "react-overridable";
+
+export const OrderDetailsMiddleColumn = ({ line }) => {
+  return (
+    <>
+      <Item.Description>
+        <label htmlFor="Copies ordered">Copies ordered: </label>
+        {line.copies_ordered}
+      </Item.Description>
+      <Item.Description>
+        <label htmlFor="Copies received">Copies received: </label>
+        {line.copies_received || "-"}
+      </Item.Description>
+      <Item.Description>
+        <label htmlFor="Payment mode">Payment mode: </label>
+        {line.payment_mode || "-"}
+      </Item.Description>
+      <Item.Description>
+        <label htmlFor="TID ID">TID ID: </label>
+        {line.inter_departmental_transaction_id || "-"}{" "}
+        <Popup
+          content="Inter departmental transaction ID"
+          trigger={<Icon name="info circle" />}
+        />
+      </Item.Description>
+    </>
+  );
+};
+
+OrderDetailsMiddleColumn.propTypes = {
+  line: PropTypes.object.isRequired,
+};
+
+export const OrderDetailsLine = parametrize(OrderLine, {
+  MiddleColumn: OrderDetailsMiddleColumn,
+});

ui/src/overridden/backoffice/PaymentInformation/PaymentInformation.js

@@ -0,0 +1,46 @@
+import {
+  PaymentInformation,
+  formatPrice,
+} from "@inveniosoftware/react-invenio-app-ils";
+import React from "react";
+import { Icon, Popup } from "semantic-ui-react";
+import { parametrize } from "react-overridable";
+
+function leftPaymentInfoTable(order, type = "acquisition-order") {
+  const { payment } = order;
+  if (type === "borrowing-request") {
+    order.grand_total = order.total;
+    order.grand_total_main_currency = order.total_main_currency;
+  }
+  return [
+    {
+      name: `Total (${order.grand_total_main_currency.currency})`,
+      value: formatPrice(order.grand_total_main_currency) || "-",
+    },
+    {
+      name:
+        order.grand_total && order.grand_total.currency
+          ? `Total (${order.grand_total.currency})`
+          : "Total",
+      value: formatPrice(order.grand_total) || "-",
+    },
+    { name: "Payment Mode", value: payment.mode },
+    {
+      name: (
+        <>
+          DAI ID{" "}
+          <Popup
+            content="Internal purchase requisition ID"
+            trigger={<Icon name="info circle" size="large" />}
+          />
+        </>
+      ),
+      value: payment.internal_purchase_requisition_id || "-",
+    },
+    { name: "Notes", value: payment.debit_note || "-" },
+  ];
+}
+
+export const PaymentInformationGrid = parametrize(PaymentInformation, {
+  renderLeftTable: leftPaymentInfoTable,
+});