@shopgate/engage/orders/components/OrderHistory/OrderHistory.js

Shopgate's ENGAGE library.

import React from 'react';
import { ResponsiveContainer, NoResults } from '@shopgate/engage/components';
import { Table, TableRow } from "./OrderHistoryTable";
import { List, Row } from "./OrderHistoryList";
import OrderHistoryLoader from "./OrderHistoryLoader";
import { useOrderHistory } from "../../hooks";
import { root, noResult } from "./OrderHistory.style";

/**
 * The OrderDetails components
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const OrderHistory = () => {
  const {
    totalOrderCount
  } = useOrderHistory();
  if (totalOrderCount === 0) {
    return /*#__PURE__*/_jsx("div", {
      className: noResult,
      children: /*#__PURE__*/_jsx(NoResults, {
        headlineText: "orders.no_result.body",
        bodyText: ""
      })
    });
  }
  return /*#__PURE__*/_jsxs("div", {
    className: root,
    children: [/*#__PURE__*/_jsx(ResponsiveContainer, {
      appAlways: true,
      breakpoint: "<=xs",
      children: /*#__PURE__*/_jsx(OrderHistoryLoader, {
        wrapper: List,
        iterator: Row
      })
    }), /*#__PURE__*/_jsx(ResponsiveContainer, {
      webOnly: true,
      breakpoint: ">xs",
      children: /*#__PURE__*/_jsx(OrderHistoryLoader, {
        wrapper: Table,
        iterator: TableRow
      })
    })]
  });
};
export default OrderHistory;