@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}
 */var OrderDetailsOrderHeader=function OrderDetailsOrderHeader(_ref){var _lineItems$;var order=_ref.order;var _useOrderDetails=useOrderDetails(),cancelOrder=_useOrderDetails.cancelOrder;if(!order){return null;}var orderNumber=order.orderNumber,status=order.status,statusText=order.statusText,lineItems=order.lineItems;var fulfillmentSlot=(_lineItems$=lineItems[0])===null||_lineItems$===void 0?void 0:_lineItems$.fulfillmentSlot;/* eslint-disable react/no-danger */return React.createElement("div",{className:wrapper},React.createElement("div",{className:subline},React.createElement("p",{className:orderNum},i18n.text('order_details.subline.order_number',{orderNumber:orderNumber}),' | ',i18n.text('order_details.subline.order_status',{status:getTranslatedOrderStatus(status)})),status===ORDER_STATUS_SUBMITTED&&React.createElement(Button,{className:cancel,type:"secondary",onClick:cancelOrder,flat:true,wrapContent:false},i18n.text('order_details.cancel.button'))),fulfillmentSlot?React.createElement("div",{className:time},React.createElement(TimeIcon,{size:20,className:timeIcon}),React.createElement("span",{className:subline},moment(fulfillmentSlot===null||fulfillmentSlot===void 0?void 0:fulfillmentSlot.date,'YYYY:MM-DD').format('LL'),' ',moment(fulfillmentSlot===null||fulfillmentSlot===void 0?void 0:fulfillmentSlot.from,'HH:mm').format('LT'),' - ',moment(fulfillmentSlot===null||fulfillmentSlot===void 0?void 0:fulfillmentSlot.to,'HH:mm').format('LT'))):null,statusText&&React.createElement("div",{className:instructions},React.createElement("p",{className:body,dangerouslySetInnerHTML:{__html:statusText}})));/* eslint-enable react/no-danger */};export default OrderDetailsOrderHeader;