@shopgate/engage
Version:
Shopgate's ENGAGE library.
77 lines (76 loc) • 2.56 kB
JavaScript
import React from 'react';
import { css } from 'glamor';
import { ResponsiveContainer } from '@shopgate/engage/components';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import Header from "../Checkout/CheckoutHeader";
import { GUEST_CHECKOUT_PAYMENT_PATTERN } from "../../constants/routes";
import CheckoutProvider from "../../providers/CheckoutProvider";
import PaymentProvider from "../../paymentMethods";
import { ADDRESS_TYPE_BILLING, ADDRESS_TYPE_SHIPPING } from "../../constants";
import Address from "../Checkout/CheckoutAddress";
import Summary from "../Checkout/CheckoutSummary";
import Actions from "../Checkout/CheckoutActions";
import Pickup from "./GuestCheckoutPickup";
import PickupNotes from "./GuestCheckoutPickupNotes";
import GuestCheckoutOptIn from "./GuestCheckoutOptIn";
import { ShippingMethods } from "../ShippingMethods";
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,
paddingTop: 0
}
}),
side: css({
[responsiveMediaQuery('>=md', {
webOnly: true
})]: {
flex: 0.6
}
})
};
/**
* The Cart component.
* @returns {JSX}
*/
const GuestCheckout = () => /*#__PURE__*/_jsxs(CheckoutProvider, {
pathPattern: GUEST_CHECKOUT_PAYMENT_PATTERN,
orderInitialized: true,
orderReadOnly: true,
isGuestCheckout: true,
children: [/*#__PURE__*/_jsx(Header, {
stepFrom: 2,
stepTo: 2
}), /*#__PURE__*/_jsxs("div", {
className: styles.root,
children: [/*#__PURE__*/_jsxs("div", {
className: styles.main,
children: [/*#__PURE__*/_jsx(Pickup, {}), /*#__PURE__*/_jsx(PickupNotes, {}), /*#__PURE__*/_jsx(Address, {
type: ADDRESS_TYPE_BILLING
}), /*#__PURE__*/_jsx(Address, {
type: ADDRESS_TYPE_SHIPPING
}), /*#__PURE__*/_jsx(GuestCheckoutOptIn, {}), /*#__PURE__*/_jsx(ShippingMethods, {}), /*#__PURE__*/_jsx(PaymentProvider, {}), /*#__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 GuestCheckout;