@shopgate/engage
Version:
Shopgate's ENGAGE library.
51 lines (50 loc) • 1.58 kB
JavaScript
import React, { Fragment, useMemo } from 'react';
import { css } from 'glamor';
import { i18n, useRoute } from '@shopgate/engage/core';
import { ResponsiveContainer } from '@shopgate/engage/components';
import { ResponsiveBackButton } from "../ResponsiveBackButton";
import ProfileContact from "../../../account/components/ProfileContact";
import AddressBookProvider from "../../providers/AddressBookProvider";
import { ADDRESS_TYPE_BILLING } from "../../constants";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const styles = {
headline: css({
padding: 16,
fontSize: '2.125rem',
fontWeight: 'normal',
margin: 0,
lineHeight: '2.25rem'
}).toString()
};
/**
* AddressBookContact
* @param {Object} props The component props
* @returns {JSX}
*/
const AddressBookContact = () => {
const {
state: {
contact
},
params: {
type = ADDRESS_TYPE_BILLING
}
} = useRoute();
const title = useMemo(() => {
const mode = contact ? 'edit' : 'add';
return i18n.text(`titles.checkout_addresses_${mode}_${type}`);
}, [contact, type]);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(ResponsiveContainer, {
webOnly: true,
breakpoint: ">xs",
children: [/*#__PURE__*/_jsx(ResponsiveBackButton, {}), /*#__PURE__*/_jsx("h1", {
className: styles.headline,
children: title
})]
}), /*#__PURE__*/_jsx(AddressBookProvider, {
children: /*#__PURE__*/_jsx(ProfileContact, {})
})]
});
};
export default AddressBookContact;