@shopgate/engage/checkout/components/Checkout/Checkout.js

Shopgate's ENGAGE library.

import React from 'react';
import { css } from 'glamor';
import { useRoute } from '@shopgate/engage/core';
import { ResponsiveContainer } from '@shopgate/engage/components';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { CHECKOUT_PATTERN } from "../../constants/routes";
import ProfileProvider from "../../../account/components/Profile/Profile.provider";
import CheckoutProvider from "../../providers/CheckoutProvider";
import PaymentMethodProvider from "../../paymentMethods";
import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from "../../constants";
import { ShippingMethods } from "../ShippingMethods";
import PickupContactForm from "./CheckoutPickupContactForm";
import Address from "./CheckoutAddress";
import Summary from "./CheckoutSummary";
import Actions from "./CheckoutActions";
import Header from "./CheckoutHeader";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  root: css({
    display: 'flex',
    flexDirection: 'row'
  }),
  main: css({
    flex: 1,
    paddingTop: 16,
    [responsiveMediaQuery('>=md', {
      webOnly: true
    })]: {
      paddingRight: 16
    }
  }),
  side: css({
    [responsiveMediaQuery('>=md', {
      webOnly: true
    })]: {
      marginTop: 16,
      flex: 0.6
    }
  })
};

/**
 * The Cart component.
 * @returns {JSX}
 */
const Checkout = () => {
  const {
    id
  } = useRoute();
  return /*#__PURE__*/_jsxs(CheckoutProvider, {
    pathPattern: CHECKOUT_PATTERN,
    routeId: id,
    children: [/*#__PURE__*/_jsx(Header, {}), /*#__PURE__*/_jsxs("div", {
      className: styles.root,
      children: [/*#__PURE__*/_jsxs("div", {
        className: styles.main,
        children: [/*#__PURE__*/_jsxs(ProfileProvider, {
          isCheckout: true,
          children: [/*#__PURE__*/_jsx(Address, {
            type: ADDRESS_TYPE_BILLING
          }), /*#__PURE__*/_jsx(Address, {
            type: ADDRESS_TYPE_SHIPPING
          })]
        }), /*#__PURE__*/_jsx(PickupContactForm, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentMethodProvider, {}), /*#__PURE__*/_jsx(ResponsiveContainer, {
          breakpoint: "<md",
          appAlways: true,
          children: /*#__PURE__*/_jsx(Summary, {})
        }), /*#__PURE__*/_jsx(Actions, {})]
      }), /*#__PURE__*/_jsx("div", {
        className: styles.side,
        children: /*#__PURE__*/_jsx(ResponsiveContainer, {
          breakpoint: ">=md",
          webOnly: true,
          children: /*#__PURE__*/_jsx(Summary, {})
        })
      })]
    })]
  });
};
export default Checkout;