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

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import I18n from '@shopgate/pwa-common/components/I18n';
import { i18n } from '@shopgate/engage/core';
import { CardList, Link } from '@shopgate/engage/components';
import { getTranslatedOrderStatus } from "../../helpers";
import { card, list, orderNumber, column, rightAlign, cardContent } from "./OrderHistoryList.style";
import { getOrderDetailsRoute } from "../../helpers/orderDetails";

/**
 * The Order History List Item component
 * @param {Object} props props
 * @returns {JSX}
 */
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
export const Row = props => /*#__PURE__*/_jsx(CardList.Item, {
  className: card,
  onClick: props.openDetails,
  children: /*#__PURE__*/_jsxs(Link, {
    className: cardContent,
    href: getOrderDetailsRoute(props.orderNumber),
    children: [/*#__PURE__*/_jsxs("div", {
      className: column,
      children: [/*#__PURE__*/_jsxs("span", {
        className: orderNumber,
        children: [i18n.text('orders.header.orderNumber'), ":\xA0", props.orderNumber]
      }), /*#__PURE__*/_jsxs("span", {
        children: [/*#__PURE__*/_jsx(I18n.Date, {
          timestamp: new Date(props.submitDate).getTime(),
          format: "short"
        }), "\xA0", /*#__PURE__*/_jsx(I18n.Time, {
          timestamp: new Date(props.submitDate).getTime(),
          format: "short"
        })]
      }), /*#__PURE__*/_jsxs("span", {
        children: [i18n.text('orders.header.status'), ":\xA0", getTranslatedOrderStatus(props.status)]
      })]
    }), /*#__PURE__*/_jsxs("div", {
      className: column,
      children: [/*#__PURE__*/_jsx("span", {
        className: rightAlign,
        children: /*#__PURE__*/_jsx(I18n.Price, {
          currency: props.currencyCode,
          price: props.total
        })
      }), /*#__PURE__*/_jsxs("span", {
        className: rightAlign,
        children: [/*#__PURE__*/_jsx(I18n.Number, {
          number: props.lineItemCount,
          fractions: 0
        }), "\xA0", i18n.text('orders.itemCount', {
          count: props.lineItemCount
        })]
      })]
    })]
  })
}, props.orderNumber);
/**
 * The Order History List component
 * @param {Object} props props
 * @returns {JSX}
 */
export const List = ({
  children
}) => /*#__PURE__*/_jsx(CardList, {
  className: list,
  children: children
});