@shopgate/engage/cart/components/PaymentBar/PaymentBarPromotionalText.js

Shopgate's ENGAGE library.

function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{Fragment,useCallback,useContext}from'react';import PropTypes from'prop-types';import{css}from'glamor';import{connect}from'react-redux';import classNames from'classnames';import{nl2br,showModal as showModalAction}from'@shopgate/engage/core';import{InfoIcon}from'@shopgate/engage/components';import{responsiveMediaQuery}from'@shopgate/engage/styles';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import CartTotalLine from'@shopgate/pwa-ui-shared/CartTotalLine';import{spacer}from"./PaymentBarContent.style";import{CartContext}from"../../cart.context";var mapDispatchToProps={showModal:showModalAction};var variables=themeConfig.variables;var styles={textWrapper:css({padding:"".concat(variables.gap.xsmall,"px 0"),color:'var(--color-state-alert)',order:3}).toString(),line:css(_defineProperty({justifyContent:'start'},responsiveMediaQuery('<=xs',{appAlways:true}),{fontSize:'0.75rem',paddingBottom:3,verticalAlign:'text-bottom'})).toString(),message:css({order:2}).toString(),iconWrapper:css(_defineProperty({cursor:'pointer',color:'var(--color-primary)',fontSize:'1.5rem',display:'inline-flex',verticalAlign:'bottom',paddingBottom:1},responsiveMediaQuery('<=xs',{appAlways:true}),{fontSize:'1.375rem',paddingBottom:0})).toString(),icon:css({display:'inline'}).toString(),loading:css({opacity:0.5}).toString()};/**
 * @param {Object} props The component props
 * @returns {JSX}
 */var PaymentBarPromotionalText=function PaymentBarPromotionalText(_ref){var text=_ref.text,showModal=_ref.showModal,renderIcon=_ref.renderIcon;var _useContext=useContext(CartContext),isLoading=_useContext.isLoading;var showText=useCallback(function(){showModal({message:text,title:null,confirm:null,dismiss:'modal.ok'});},[showModal,text]);if(!text){return null;}if(!renderIcon){return React.createElement(CartTotalLine,{className:styles.line},React.createElement(Fragment,null,React.createElement("div",{className:classNames(styles.textWrapper,_defineProperty({},styles.loading,isLoading)),dangerouslySetInnerHTML:{__html:nl2br(text)}}),React.createElement(CartTotalLine.Spacer,{className:spacer})));}return React.createElement("span",{onClick:showText,onKeyDown:showText,className:classNames(styles.iconWrapper,_defineProperty({},styles.loading,isLoading)),role:"button",tabIndex:0},React.createElement(InfoIcon,{className:styles.icon}));};PaymentBarPromotionalText.defaultProps={text:null,renderIcon:true};export default connect(null,mapDispatchToProps)(PaymentBarPromotionalText);