@shopgate/engage/checkout/components/Checkout/CheckoutSummary.js

Shopgate's ENGAGE library.

import React, { useMemo } from 'react';
import { css } from 'glamor';
import { i18n } from '@shopgate/engage/core';
import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
import moment from 'moment';
import Section from "./CheckoutSection";
import { useCheckoutContext } from "../../hooks/common";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
  root: css({
    padding: 16,
    paddingTop: 0,
    display: 'flex',
    flexDirection: 'column',
    flex: '0 0 auto'
  }).toString(),
  card: css({
    marginTop: 8
  }).toString(),
  time: css({
    marginBottom: 4,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center'
  }).toString(),
  timeText: css({
    marginLeft: 8
  })
};

/**
 * Billing
 * @returns {JSX}
 */
const Billing = () => {
  const {
    taxLines,
    fulfillmentSlot
  } = useCheckoutContext();
  const content = useMemo(() => taxLines.filter(t => t.visible).map(t => {
    let text = null;
    if (t.value !== null) {
      if (t.type === 'shippingTotal' && t.value === 0) {
        text = i18n.text('shipping.free_short');
      } else {
        text = i18n.price(t.value, t.currencyCode, 2);
      }
    }
    return {
      label: t.label === null ? i18n.text(`checkout.summary.${t.type}`) : t.label,
      text,
      info: t.info || null,
      messages: t.messages || null
    };
  }), [taxLines]);
  return /*#__PURE__*/_jsx("div", {
    className: styles.root,
    children: /*#__PURE__*/_jsx(Section, {
      className: styles.card,
      title: "checkout.summary.headline",
      content: content,
      children: fulfillmentSlot ? /*#__PURE__*/_jsxs("div", {
        className: styles.time,
        children: [/*#__PURE__*/_jsx(TimeIcon, {
          size: 20
        }), /*#__PURE__*/_jsxs("span", {
          className: styles.timeText,
          children: [moment(fulfillmentSlot?.date, 'YYYY-MM-DD').format('ll'), ' ', moment(fulfillmentSlot?.from, 'HH:mm').format('LT'), ' - ', moment(fulfillmentSlot?.to, 'HH:mm').format('LT')]
        })]
      }) : null
    })
  });
};
export default Billing;