@shopgate/engage/checkout/components/CheckoutConfirmation/CheckoutConfirmationSection.js

Shopgate's ENGAGE library.

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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const {
  colors,
  variables
} = themeConfig;
const styles = {
  wrapper: css({
    padding: `${variables.gap.bigger}px ${variables.gap.big}px 0 ${variables.gap.big}px`
  }).toString(),
  headline: css({
    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, ${colors.primary}) !important`
  }).toString(),
  card: css({
    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({
    ...(!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: `${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}
 */
const CheckoutConfirmationSegment = ({
  title,
  content,
  children,
  hasForm,
  isSummary,
  className
}) => {
  if (!content) {
    return null;
  }
  const isString = typeof content === 'string';
  return /*#__PURE__*/_jsxs("div", {
    className: classNames(styles.wrapper, className),
    children: [/*#__PURE__*/_jsx("h3", {
      className: styles.headline,
      children: i18n.text(title)
    }), /*#__PURE__*/_jsxs(Card, {
      className: classNames(styles.card, {
        [styles.cardWithForm]: hasForm
      }),
      children: [isString && /*#__PURE__*/_jsx("span", {
        children: content
      }), !isString && !isSummary && /*#__PURE__*/_jsx("dl", {
        className: styles.list,
        children: content.map(({
          label,
          text,
          link
        }) => /*#__PURE__*/_jsxs(Fragment, {
          children: [label && /*#__PURE__*/_jsx("dt", {
            className: styles.listTitle,
            children: i18n.text(label)
          }), link ? /*#__PURE__*/_jsx("dd", {
            className: styles.listEntry,
            children: /*#__PURE__*/_jsx(TextLink, {
              href: link,
              className: styles.link,
              children: /*#__PURE__*/_jsx("span", {
                dangerouslySetInnerHTML: {
                  __html: text
                }
              })
            })
          }) : /*#__PURE__*/_jsx("dd", {
            className: styles.listEntry,
            dangerouslySetInnerHTML: {
              __html: text
            }
          })]
        }, label || text))
      }), children, isSummary && /*#__PURE__*/_jsx("table", {
        className: styles.table,
        children: /*#__PURE__*/_jsx("tbody", {
          children: content.map(({
            label,
            text
          }) => /*#__PURE__*/_jsxs("tr", {
            children: [label && /*#__PURE__*/_jsx("td", {
              children: i18n.text(label)
            }), /*#__PURE__*/_jsx("td", {
              dangerouslySetInnerHTML: {
                __html: text
              }
            })]
          }, label || text))
        })
      })]
    })]
  });
};
CheckoutConfirmationSegment.defaultProps = {
  children: null,
  content: null,
  hasForm: false,
  isSummary: false,
  className: null
};
export default CheckoutConfirmationSegment;