@shopgate/engage
Version:
Shopgate's ENGAGE library.
4 lines • 4.26 kB
JavaScript
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;}function _extends(){_extends=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source){if(Object.prototype.hasOwnProperty.call(source,key)){target[key]=source[key];}}}return target;};return _extends.apply(this,arguments);}import React,{Fragment}from'react';import{css}from'glamor';import classNames from'classnames';import PropTypes from'prop-types';import{Card,TextLink}from'@shopgate/engage/components';import{themeConfig}from'@shopgate/pwa-common/helpers/config';import{isIOSTheme}from'@shopgate/engage/core';import{i18n}from"../../../core/helpers/i18n";var colors=themeConfig.colors,variables=themeConfig.variables;var styles={wrapper:css({padding:"".concat(variables.gap.bigger,"px ").concat(variables.gap.big,"px 0 ").concat(variables.gap.big,"px")}).toString(),headline:css(_extends({color:colors.shade3,fontSize:'1rem',fontWeight:'normal',textTransform:'uppercase',paddingBottom:variables.gap.small,margin:0},!isIOSTheme()?{fontSize:'1.25rem',lineHeight:'1.5rem',fontWeight:500,color:'var(--color-text-high-emphasis)',textTransform:'none'}:{})),link:css({color:"var(--color-primary, ".concat(colors.primary,") !important")}).toString(),card:css(_extends({fontSize:'0.875rem',lineHeight:'1.25rem',margin:0,padding:variables.gap.big,color:'var(--color-text-medium-emphasis)',flex:'1 0 auto'},!isIOSTheme()?{background:'var(--color-background-accent)',boxShadow:'none'}:{})).toString(),cardWithForm:css(_extends({},!isIOSTheme()?{background:'inherit',boxShadow:'none',padding:0}:{})).toString(),list:css({margin:0}),listTitle:css({fontSize:'0.625rem',lineHeight:'1rem',fontWeight:'bold',letterSpacing:'1.5px',textTransform:'uppercase',color:'var(--color-text-high-emphasis)',':not(:first-child)':{paddingTop:variables.gap.xsmall*3}}),listEntry:css({fontSize:'0.875rem',lineHeight:'1.5rem',marginLeft:0,whiteSpace:'pre-line',wordBreak:'break-all',color:'var(--color-text-medium-emphasis)'}),table:css({color:'var(--color-text-high-emphasis)',' td':{padding:"".concat(variables.gap.xsmall,"px 0")},' td:last-child':{textAlign:'right',whiteSpace:'pre-wrap',paddingLeft:variables.gap.xsmall},' tr:nth-last-child(2) td':{paddingBottom:8},' tr:last-child td':{fontSize:'1rem',paddingTop:8,borderTop:'1px solid #979797',fontWeight:'bold'}})};/**
* CheckoutConfirmationSegment component
* @returns {JSX}
*/var CheckoutConfirmationSegment=function CheckoutConfirmationSegment(_ref){var title=_ref.title,content=_ref.content,children=_ref.children,hasForm=_ref.hasForm,isSummary=_ref.isSummary,className=_ref.className;if(!content){return null;}var isString=typeof content==='string';return React.createElement(Fragment,null,React.createElement("div",{className:classNames(styles.wrapper,className)},React.createElement("h3",{className:styles.headline},i18n.text(title)),React.createElement(Card,{className:classNames(styles.card,_defineProperty({},styles.cardWithForm,hasForm))},isString&&React.createElement("span",null,content),!isString&&!isSummary&&React.createElement("dl",{className:styles.list},content.map(function(_ref2){var label=_ref2.label,text=_ref2.text,link=_ref2.link;return React.createElement(Fragment,{key:label||text},label&&React.createElement("dt",{className:styles.listTitle},i18n.text(label)),link?React.createElement("dd",{className:styles.listEntry},React.createElement(TextLink,{href:link,className:styles.link},React.createElement("span",{dangerouslySetInnerHTML:{__html:text}}))):React.createElement("dd",{className:styles.listEntry,dangerouslySetInnerHTML:{__html:text}}));})),children,isSummary&&React.createElement("table",{className:styles.table},React.createElement("tbody",null,content.map(function(_ref3){var label=_ref3.label,text=_ref3.text;return React.createElement("tr",{key:label||text},label&&React.createElement("td",null,i18n.text(label)),React.createElement("td",{dangerouslySetInnerHTML:{__html:text}}));}))))));};CheckoutConfirmationSegment.defaultProps={children:null,content:null,hasForm:false,isSummary:false,className:null};export default CheckoutConfirmationSegment;