@shopgate/engage/orders/components/OrderDetails/OrderDetailsOrderHeader.js

Shopgate's ENGAGE library.

import React from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { i18n } from '@shopgate/engage/core';
import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
import { getTranslatedOrderStatus } from "../../helpers";
import { useOrderDetails } from "../../hooks";
import { wrapper, instructions, body, orderNum, subline, cancel, time, timeIcon } from "./OrderDetailsOrderHeader.style";
import { Button } from "../../../components";
import { ORDER_STATUS_SUBMITTED } from "../../constants";

/**
 * @param {Object} props The component props
 * @returns {JSX}
 */
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
const OrderDetailsOrderHeader = ({
  order
}) => {
  const {
    cancelOrder
  } = useOrderDetails();
  if (!order) {
    return null;
  }
  const {
    orderNumber,
    status,
    statusText,
    lineItems
  } = order;
  const fulfillmentSlot = lineItems[0]?.fulfillmentSlot;

  /* eslint-disable react/no-danger */
  return /*#__PURE__*/_jsxs("div", {
    className: wrapper,
    children: [/*#__PURE__*/_jsxs("div", {
      className: subline,
      children: [/*#__PURE__*/_jsxs("p", {
        className: orderNum,
        children: [i18n.text('order_details.subline.order_number', {
          orderNumber
        }), ' | ', i18n.text('order_details.subline.order_status', {
          status: getTranslatedOrderStatus(status)
        })]
      }), status === ORDER_STATUS_SUBMITTED && /*#__PURE__*/_jsx(Button, {
        className: cancel,
        type: "secondary",
        onClick: cancelOrder,
        flat: true,
        wrapContent: false,
        children: i18n.text('order_details.cancel.button')
      })]
    }), fulfillmentSlot ? /*#__PURE__*/_jsxs("div", {
      className: time,
      children: [/*#__PURE__*/_jsx(TimeIcon, {
        size: 20,
        className: timeIcon
      }), /*#__PURE__*/_jsxs("span", {
        className: subline,
        children: [moment(fulfillmentSlot?.date, 'YYYY:MM-DD').format('LL'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT')]
      })]
    }) : null, statusText && /*#__PURE__*/_jsx("div", {
      className: instructions,
      children: /*#__PURE__*/_jsx("p", {
        className: body,
        dangerouslySetInnerHTML: {
          __html: statusText
        }
      })
    })]
  });
  /* eslint-enable react/no-danger */
};
export default OrderDetailsOrderHeader;