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

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import { CartItems } from '@shopgate/engage/cart';
import { CheckoutConfirmationPickUpContact, CheckoutConfirmationOrderContact, CheckoutConfirmationBilledTo, CheckoutConfirmationShippedTo, CheckoutConfirmationOrderSummary, SupplementalContent } from "../../../checkout/components";
import { convertLineItemsToCartItems, isDirectShipOnlyOrder, isReserveOnlyOrder } from "../../../checkout/helpers";
import { useOrderDetails } from "../../hooks";
import OrderDetailsOrderHeader from "./OrderDetailsOrderHeader";
import OrderDetailsOrderPickupLocation from "./OrderDetailsOrderPickupLocation";
import { root, contactsWrapper, contact, cartWrapper, summaryWrapper, summary, supplemental } from "./OrderDetailsOrder.style";

/**
 * The OrderDetailsOrder component
 * @returns {JSX}
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const OrderDetailsOrder = () => {
  const {
    isUserLoggedIn,
    order
  } = useOrderDetails();
  const {
    cartItems,
    isReserveOnly,
    isDirectShipOnly,
    currencyOverride
  } = useMemo(() => {
    if (!order?.lineItems) {
      return {};
    }
    return {
      orderNumber: order.orderNumber,
      date: order.date,
      cartItems: convertLineItemsToCartItems(order.lineItems),
      isReserveOnly: isReserveOnlyOrder(order),
      isDirectShipOnly: isDirectShipOnlyOrder(order),
      currencyOverride: order.currencyCode
    };
  }, [order]);
  if (!order || !cartItems) {
    return null;
  }
  return /*#__PURE__*/_jsxs("div", {
    className: root,
    children: [/*#__PURE__*/_jsx(OrderDetailsOrderHeader, {
      order: order
    }), /*#__PURE__*/_jsxs("div", {
      className: contactsWrapper,
      children: [!isUserLoggedIn && isReserveOnly ? /*#__PURE__*/_jsx(CheckoutConfirmationOrderContact, {
        order: order,
        className: contact
      }) : /*#__PURE__*/_jsx(CheckoutConfirmationBilledTo, {
        order: order,
        className: contact
      }), /*#__PURE__*/_jsx(CheckoutConfirmationShippedTo, {
        order: order,
        className: contact
      }), /*#__PURE__*/_jsx(CheckoutConfirmationPickUpContact, {
        order: order,
        className: contact
      }), /*#__PURE__*/_jsx(OrderDetailsOrderPickupLocation, {
        order: order,
        className: contact
      })]
    }), /*#__PURE__*/_jsx("div", {
      className: cartWrapper,
      children: /*#__PURE__*/_jsx(CartItems, {
        cartItems: cartItems,
        onFocus: () => {},
        editable: false,
        multiLineReservation: true,
        isOrderDetails: true,
        isDirectShipOnly: isDirectShipOnly,
        currencyOverride: currencyOverride
      })
    }), /*#__PURE__*/_jsxs("div", {
      className: summaryWrapper,
      children: [/*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
        order: order,
        className: summary
      }), /*#__PURE__*/_jsx(SupplementalContent, {
        className: supplemental
      })]
    })]
  });
};
export default OrderDetailsOrder;