@shopgate/engage
Version:
Shopgate's ENGAGE library.
64 lines (63 loc) • 2.06 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import TimeIcon from '@shopgate/pwa-ui-shared/icons/TimeIcon';
import moment from 'moment';
import { i18n } from "../../../core/helpers/i18n";
import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
import { getCheckoutTaxLinesFromOrder } from "../../helpers";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const styles = {
time: css({
marginBottom: 4,
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}).toString(),
timeText: css({
marginLeft: 8
})
};
/**
* CheckoutConfirmationOrderSummary component
* @returns {JSX}
*/
const CheckoutConfirmationOrderSummary = ({
order,
className
}) => {
const content = useMemo(() => getCheckoutTaxLinesFromOrder(order).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
};
}), [order]);
const fulfillmentSlot = order?.lineItems[0]?.fulfillmentSlot;
return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
title: "checkout.success.order_summary",
content: content,
isSummary: true,
className: className,
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
});
};
CheckoutConfirmationOrderSummary.defaultProps = {
className: null
};
export default CheckoutConfirmationOrderSummary;