Feature/add order details components

package.json

@@ -1,6 +1,6 @@
 {
     "name": "openstack-uicore-foundation",
-    "version": "5.0.15",
+    "version": "5.0.17-beta.4",
     "description": "ui reactjs components for openstack marketing site",
     "main": "lib/openstack-uicore-foundation.js",
     "scripts": {

src/components/index.js

@@ -80,7 +80,7 @@ export {useSnackbarMessage} from './mui/SnackbarNotification/Context'
 export {default as MuiInfiniteTable} from './mui/infinite-table'
 export {default as MuiEditableTable} from './mui/editable-table/mui-table-editable'
 export {default as MuiTable} from './mui/table/mui-table'
-export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow} from './mui/table/extra-rows'
+export {TotalRow as MuiTotalRow, NotesRow as MuiNotesRow, FeeRow as MuiFeeRow, PaymentRow as MuiPaymentRow, RefundRow as MuiRefundRow} from './mui/table/extra-rows'
 export {default as MuiFormikAsyncSelect} from './mui/formik-inputs/mui-formik-async-select'
 export {default as MuiFormikCheckboxGroup} from './mui/formik-inputs/mui-formik-checkbox-group'
 export {default as MuiFormikCheckbox} from './mui/formik-inputs/mui-formik-checkbox'
@@ -109,7 +109,9 @@ export {default as MuiAlertModal} from './mui/AlertModal'
 export {default as MuiAuthButton} from './mui/AuthButton'
 export {default as MuiCartButton} from './mui/CartButton'
 export {default as MuiConfirmDeleteDialog} from './mui/ConfirmDeleteDialog'
-export {default as MuiDashboardCard} from './mui/DashboardCard'
+export {default as MuiInlineCard} from './mui/cards/InlineCard'
+export {default as MuiListCard} from './mui/cards/ListCard'
+export {default as MuiTableCard} from './mui/cards/TableCard'
 export {default as MuiDownloadBtn} from './mui/DownloadBtn'
 export {default as MuiLoadingOverlay} from './mui/LoadingOverlay'
 export {default as MuiNavBar} from './mui/NavBar'

src/components/mui/__tests__/fee-row.test.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("../../../utils/money", () => ({
+  currencyAmountFromCents: (amount) => `$${(amount / 100).toFixed(2)}`
+}));
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import FeeRow from "../table/extra-rows/FeeRow";
+
+const renderInTable = (props) =>
+  render(
+    <table>
+      <tbody>
+        <FeeRow {...props} />
+      </tbody>
+    </table>
+  );
+
+describe("FeeRow", () => {
+  test("renders nothing when fee is not provided", () => {
+    const { container } = renderInTable({});
+    expect(container.querySelector("tr")).not.toBeInTheDocument();
+  });
+
+  test("renders the fee title", () => {
+    renderInTable({ fee: { title: "Processing Fee", amount: 150 } });
+    expect(screen.getByText("Processing Fee")).toBeInTheDocument();
+  });
+
+  test("renders the formatted fee amount", () => {
+    renderInTable({ fee: { title: "Service Fee", amount: 500 } });
+    expect(screen.getByText("$5.00")).toBeInTheDocument();
+  });
+
+  test("renders the i18n label key", () => {
+    renderInTable({ fee: { title: "Fee", amount: 0 } });
+    expect(screen.getByText("mui_table.payfee")).toBeInTheDocument();
+  });
+
+  test("renders a single table row", () => {
+    const { container } = renderInTable({ fee: { title: "Fee", amount: 100 } });
+    expect(container.querySelectorAll("tr")).toHaveLength(1);
+  });
+});

src/components/mui/__tests__/payment-row.test.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("../../../utils/money", () => ({
+  currencyAmountFromCents: (amount) => `$${(amount / 100).toFixed(2)}`
+}));
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import PaymentRow from "../table/extra-rows/PaymentRow";
+
+// 2026-01-15 00:00:00 UTC in seconds
+const PAYMENT_TIMESTAMP = 1736899200;
+
+const renderInTable = (props) =>
+  render(
+    <table>
+      <tbody>
+        <PaymentRow {...props} />
+      </tbody>
+    </table>
+  );
+
+describe("PaymentRow", () => {
+  test("renders nothing when payment is not provided", () => {
+    const { container } = renderInTable({});
+    expect(container.querySelector("tr")).not.toBeInTheDocument();
+  });
+
+  test("renders the formatted payment amount", () => {
+    renderInTable({ payment: { method: "Visa", amount: 2000, created: PAYMENT_TIMESTAMP } });
+    expect(screen.getByText("-$20.00")).toBeInTheDocument();
+  });
+
+  test("renders the payment method", () => {
+    renderInTable({ payment: { method: "Visa", amount: 1000, created: PAYMENT_TIMESTAMP } });
+    expect(screen.getByText(/Visa/)).toBeInTheDocument();
+  });
+
+  test("renders the i18n label keys", () => {
+    renderInTable({ payment: { method: "Card", amount: 500, created: PAYMENT_TIMESTAMP } });
+    expect(screen.getByText("mui_table.pay")).toBeInTheDocument();
+    expect(screen.getByText("mui_table.payment")).toBeInTheDocument();
+  });
+
+  test("renders a single table row", () => {
+    const { container } = renderInTable({
+      payment: { method: "Card", amount: 100, created: PAYMENT_TIMESTAMP }
+    });
+    expect(container.querySelectorAll("tr")).toHaveLength(1);
+  });
+});

src/components/mui/__tests__/refund-row.test.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2026 OpenStack Foundation
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * */
+
+jest.mock("i18n-react/dist/i18n-react", () => ({
+  __esModule: true,
+  default: { translate: (key) => key }
+}));
+
+jest.mock("../../../utils/money", () => ({
+  currencyAmountFromCents: (amount) => `$${(amount / 100).toFixed(2)}`
+}));
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import RefundRow from "../table/extra-rows/RefundRow";
+
+const renderInTable = (props) =>
+  render(
+    <table>
+      <tbody>
+        <RefundRow {...props} />
+      </tbody>
+    </table>
+  );
+
+describe("RefundRow", () => {
+  test("renders nothing when refund is not provided", () => {
+    const { container } = renderInTable({});
+    expect(container.querySelector("tr")).not.toBeInTheDocument();
+  });
+
+  test("renders the formatted refund amount", () => {
+    renderInTable({ refund: { reason: "Duplicate", status: "completed", amount: 3000 } });
+    expect(screen.getByText("-$30.00")).toBeInTheDocument();
+  });
+
+  test("renders the refund reason", () => {
+    renderInTable({ refund: { reason: "Customer request", status: "pending", amount: 1000 } });
+    expect(screen.getByText("Customer request")).toBeInTheDocument();
+  });
+
+  test("renders the refund status", () => {
+    renderInTable({ refund: { reason: "Error", status: "approved", amount: 500 } });
+    expect(screen.getByText("approved")).toBeInTheDocument();
+  });
+
+  test("renders the i18n label keys", () => {
+    renderInTable({ refund: { reason: "Test", status: "pending", amount: 100 } });
+    expect(screen.getByText("mui_table.ref")).toBeInTheDocument();
+    expect(screen.getByText("mui_table.refund")).toBeInTheDocument();
+  });
+
+  test("renders a single table row", () => {
+    const { container } = renderInTable({
+      refund: { reason: "Test", status: "pending", amount: 100 }
+    });
+    expect(container.querySelectorAll("tr")).toHaveLength(1);
+  });
+});