@shopgate/engage
Version:
Shopgate's ENGAGE library.
65 lines (64 loc) • 2.37 kB
JavaScript
import React, { Fragment, useMemo } from 'react';
import { css } from 'glamor';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import CheckoutHeader from "../../../checkout/components/Checkout/CheckoutHeader";
import RegistrationFormBilling from "../Registration/RegistrationFormBilling";
import RegistrationFormShipping from "../Registration/RegistrationFormShipping";
import RegistrationFormExtra from "../Registration/RegistrationFormExtra";
import RegistrationFormToggle from "../Registration/RegistrationFormToggle";
import RegistrationFormActions from "../Registration/RegistrationFormActions";
import RegistrationFormPickup from "./GuestRegistrationFormPickup";
import { useRegistration } from "../../hooks";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const {
variables
} = themeConfig;
const styles = {
container: css({
padding: `${variables.gap.big}px ${variables.gap.big}px 0`,
display: 'flex',
flex: '0 0 auto',
flexDirection: 'column',
'@media(min-width: 768px)': {
width: '50%',
paddingRight: 0
}
})
};
/**
* The GuestRegistrationContent component.
* @returns {JSX}
*/
const GuestRegistrationContent = () => {
const {
orderReserveOnly,
guestRegistrationEditMode
} = useRegistration(true);
const headline = useMemo(() => {
if (guestRegistrationEditMode) {
return orderReserveOnly ? 'checkout.change_contacts' : 'checkout.change_addresses';
}
return 'titles.checkout';
}, [guestRegistrationEditMode, orderReserveOnly]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(CheckoutHeader, {
stepFrom: !guestRegistrationEditMode ? 1 : null,
stepTo: !guestRegistrationEditMode ? 2 : null,
headline: headline
}), /*#__PURE__*/_jsxs("div", {
className: styles.container,
children: [/*#__PURE__*/_jsx(RegistrationFormBilling, {
isGuest: true
}), /*#__PURE__*/_jsx(RegistrationFormToggle, {
isGuest: true
}), /*#__PURE__*/_jsx(RegistrationFormShipping, {
isGuest: true
}), /*#__PURE__*/_jsx(RegistrationFormExtra, {
isGuest: true
}), /*#__PURE__*/_jsx(RegistrationFormPickup, {})]
}), /*#__PURE__*/_jsx(RegistrationFormActions, {
isGuest: true
})]
});
};
export default GuestRegistrationContent;