@shopgate/engage
Version:
Shopgate's ENGAGE library.
259 lines (256 loc) • 8.21 kB
JavaScript
import React, { useMemo, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import { ResponsiveContainer, RippleButton } from '@shopgate/engage/components';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { CartItems } from '@shopgate/engage/cart';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import { useRoute } from '@shopgate/engage/core';
import { i18n } from "../../../core/helpers/i18n";
import { convertLineItemsToCartItems, isReserveOnlyOrder, isDirectShipOnlyOrder } from "../../helpers";
import { ResponsiveBackButton } from "../ResponsiveBackButton";
import CheckoutConfirmationPickUpContact from "./CheckoutConfirmationPickUpContact";
import CheckoutConfirmationOrderContact from "./CheckoutConfirmationOrderContact";
import CheckoutConfirmationPickupNotes from "./CheckoutConfirmationPickupNotes";
import CheckoutConfirmationBilledTo from "./CheckoutConfirmationBilledTo";
import CheckoutConfirmationShippedTo from "./CheckoutConfirmationShippedTo";
import CheckoutConfirmationOrderSummary from "./CheckoutConfirmationOrderSummary";
import { SupplementalContent } from "../SupplementalContent";
import connect from "./CheckoutConfirmation.connector";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
variables
} = themeConfig;
const style = {
root: css({
display: 'flex',
flexDirection: 'row'
}),
main: css({
flex: 1,
[responsiveMediaQuery('>=md', {
webOnly: true
})]: {
paddingRight: 16
}
}),
side: css({
[responsiveMediaQuery('>=md', {
webOnly: true
})]: {
marginTop: 134,
marginLeft: variables.gap.big * -1,
flex: 0.45
}
}),
cartItems: css({
marginBottom: 32
}),
container: css({
padding: `${variables.gap.big}px ${variables.gap.small * 1.5}px 0 ${variables.gap.xbig}px`,
[responsiveMediaQuery('<sm')]: {
paddingLeft: variables.gap.big
}
}),
backButtonContainer: css({
paddingLeft: variables.gap.big,
display: 'none',
[responsiveMediaQuery('>=sm', {
webOnly: true
})]: {
display: 'block'
}
}),
heading: css({
fontSize: '2.125rem',
fontWeight: 'normal',
margin: 0,
lineHeight: '2.25rem',
paddingBottom: variables.gap.xbig
}),
yourItemsHeading: css({
fontSize: '1.25rem',
fontWeight: 'bold',
margin: `${variables.gap.bigger}px 0 0`
}),
instructions: css({
marginBottom: variables.gap.xbig
}),
body: css({
border: 0,
fontSize: '0.875rem',
lineHeight: '1.25rem'
}),
orderNum: css({
padding: 0,
fontSize: '1.25rem',
fontWeight: 500,
lineHeight: '1.5rem',
margin: `0 0 ${variables.gap.big}px`,
border: 0
}),
button: css({
flex: '0 0 auto !important',
borderRadius: '2px !important',
minWidth: '50% !important',
[responsiveMediaQuery('<md')]: {
width: '100%'
}
}),
buttonWrapper: css({
padding: variables.gap.big
}),
supplementalWrapper: css({
padding: `${variables.gap.xbig}px ${variables.gap.big}px`
}).toString()
};
/**
* CheckoutConfirmation component
* @returns {JSX}
*/
const CheckoutConfirmation = ({
onContinueShopping,
isUserLoggedIn,
fetchCheckoutOrder
}) => {
const {
state: {
order
},
query
} = useRoute();
const [orderData, setOrderData] = useState(null);
// Finding the source of order data.
// Either from the route state or from a pipeline request.
useEffect(() => {
/** */
const handleFetch = async () => {
const data = await fetchCheckoutOrder();
setOrderData(data);
};
if (!order) {
handleFetch();
return;
}
setOrderData(order);
}, [fetchCheckoutOrder, order, query]);
// Map order data to more UI friendly format.
const {
orderNumber,
date,
cartItems,
isReserveOnly,
isDirectShipOnly,
currencyOverride
} = useMemo(() => {
if (!orderData) {
return {};
}
return {
orderNumber: orderData.orderNumber,
date: orderData.date,
cartItems: convertLineItemsToCartItems(orderData.lineItems),
isReserveOnly: isReserveOnlyOrder(orderData),
isDirectShipOnly: isDirectShipOnlyOrder(orderData),
currencyOverride: orderData.currencyCode
};
}, [orderData]);
if (!orderData || !cartItems) {
return null;
}
return /*#__PURE__*/_jsxs("div", {
className: style.root,
children: [/*#__PURE__*/_jsxs("div", {
className: style.main,
children: [/*#__PURE__*/_jsx("div", {
className: style.backButtonContainer,
children: /*#__PURE__*/_jsx(ResponsiveBackButton, {
label: "checkout.success.continue",
onClick: onContinueShopping
})
}), /*#__PURE__*/_jsxs("div", {
className: style.container,
children: [/*#__PURE__*/_jsx("h2", {
className: style.heading,
children: i18n.text('checkout.success.title')
}), /*#__PURE__*/_jsxs("p", {
className: style.orderNum,
children: [i18n.text('checkout.success.order_date', {
date: i18n.date(new Date(date).getTime(), 'short')
}), ' | ', i18n.text('checkout.success.order_number', {
orderNumber
})]
}), /*#__PURE__*/_jsxs("div", {
className: style.instructions,
children: [/*#__PURE__*/_jsx("p", {
className: style.body,
children: i18n.text('checkout.success.instructions_1')
}), /*#__PURE__*/_jsx("p", {
className: style.body,
children: i18n.text('checkout.success.instructions_2')
})]
})]
}), /*#__PURE__*/_jsx("div", {
className: style.cartItems,
children: /*#__PURE__*/_jsx(CartItems, {
cartItems: cartItems,
onFocus: () => {},
multiLineReservation: true,
editable: false,
isCheckoutConfirmation: true,
isDirectShipOnly: isDirectShipOnly,
currencyOverride: currencyOverride
})
}), /*#__PURE__*/_jsxs(ResponsiveContainer, {
breakpoint: "<md",
appAlways: true,
children: [/*#__PURE__*/_jsx(CheckoutConfirmationPickUpContact, {
order: orderData
}), /*#__PURE__*/_jsx(CheckoutConfirmationPickupNotes, {
order: orderData
}), /*#__PURE__*/_jsx(CheckoutConfirmationShippedTo, {
order: orderData
}), !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/_jsx(CheckoutConfirmationOrderContact, {
order: orderData
}) : /*#__PURE__*/_jsx(CheckoutConfirmationBilledTo, {
order: orderData
}), /*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
order: orderData
}), /*#__PURE__*/_jsx(SupplementalContent, {
className: style.supplementalWrapper
})]
}), /*#__PURE__*/_jsx("div", {
className: style.buttonWrapper,
children: /*#__PURE__*/_jsx(RippleButton, {
type: "secondary",
disabled: false,
className: style.button.toString(),
onClick: onContinueShopping,
children: i18n.text('checkout.success.continue')
})
})]
}), /*#__PURE__*/_jsx("div", {
className: style.side,
children: /*#__PURE__*/_jsxs(ResponsiveContainer, {
breakpoint: ">=md",
webOnly: true,
children: [/*#__PURE__*/_jsx(CheckoutConfirmationPickUpContact, {
order: orderData
}), /*#__PURE__*/_jsx(CheckoutConfirmationPickupNotes, {
order: orderData
}), /*#__PURE__*/_jsx(CheckoutConfirmationShippedTo, {
order: orderData
}), !isUserLoggedIn && isReserveOnly ? /*#__PURE__*/_jsx(CheckoutConfirmationOrderContact, {
order: orderData
}) : /*#__PURE__*/_jsx(CheckoutConfirmationBilledTo, {
order: orderData
}), /*#__PURE__*/_jsx(CheckoutConfirmationOrderSummary, {
order: orderData
}), /*#__PURE__*/_jsx(SupplementalContent, {
className: style.supplementalWrapper
})]
})
})]
});
};
export default connect(CheckoutConfirmation);