@shopgate/engage
Version:
Shopgate's ENGAGE library.
77 lines (76 loc) • 1.89 kB
JavaScript
import React, { useCallback } from 'react';
import { css } from 'glamor';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { InfoIcon } from '@shopgate/engage/components';
import { nl2br, showModal as showModalAction } from '@shopgate/engage/core';
import { responsiveMediaQuery } from '@shopgate/engage/styles';
import { themeConfig } from '@shopgate/pwa-common/helpers/config';
import { jsx as _jsx } from "react/jsx-runtime";
const mapDispatchToProps = {
showModal: showModalAction
};
const {
variables
} = themeConfig;
const styles = {
textWrapper: css({
paddingTop: variables.gap.xsmall,
fontSize: '0.75rem',
color: 'var(--color-state-alert)'
}).toString(),
iconWrapper: css({
cursor: 'pointer',
color: 'var(--color-primary)',
fontSize: '1.5rem',
display: 'inline-flex',
verticalAlign: 'bottom',
[responsiveMediaQuery('<=xs', {
appAlways: true
})]: {
fontSize: '1.375rem'
}
}).toString()
};
/**
* @param {Object} props The components props
* @returns {JSX}
*/
const CheckoutSectionInfo = ({
text,
showModal,
renderIcon
}) => {
const showPopup = useCallback(() => {
showModal({
message: text,
title: null,
confirm: null,
dismiss: 'modal.ok'
});
}, [showModal, text]);
if (!text) {
return null;
}
if (!renderIcon) {
return /*#__PURE__*/_jsx("div", {
className: styles.textWrapper,
dangerouslySetInnerHTML: {
__html: nl2br(text)
}
});
}
return /*#__PURE__*/_jsx("span", {
onClick: showPopup,
onKeyDown: showPopup,
className: styles.iconWrapper,
role: "button",
tabIndex: 0,
children: /*#__PURE__*/_jsx(InfoIcon, {})
});
};
CheckoutSectionInfo.defaultProps = {
text: null,
renderIcon: true
};
export default connect(null, mapDispatchToProps)(CheckoutSectionInfo);