@shopgate/engage
Version:
Shopgate's ENGAGE library.
61 lines (60 loc) • 1.96 kB
JavaScript
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import startCase from 'lodash/startCase';
import { i18n } from "../../../core/helpers/i18n";
import CheckoutConfirmationSection from "./CheckoutConfirmationSection";
/**
* CheckoutConfirmationBilledTo component
* @returns {JSX}
*/
import { jsx as _jsx } from "react/jsx-runtime";
const CheckoutConfirmationBilledTo = ({
order,
className
}) => {
const content = useMemo(() => {
const billing = order.addressSequences.find(address => address.type === 'billing');
const {
firstName,
lastName,
address1,
city,
region,
postalCode
} = billing;
const [payment = {}] = order.paymentTransactions || [{}];
const {
paymentInfo: {
card: {
type,
last4
} = {},
type: paymentType
} = {}
} = payment;
const hasPayment = order.paymentTransactions && order.paymentTransactions[0];
const address = [`${firstName} ${lastName}`, `${address1 || ''}`, `${city ? `${city},` : ''} ${city && region ? region : ''} ${postalCode || ''}`].filter(Boolean).join('\n');
return [].concat(hasPayment && paymentType === 'cc' ? [{
label: i18n.text('checkout.success.card_holder'),
text: address
}] : [{
label: i18n.text('checkout.success.address'),
text: address
}], hasPayment && paymentType === 'cc' ? [{
label: i18n.text('checkout.success.payment_method'),
text: `${startCase(type)} **** **** ${last4}`
}] : [], hasPayment && paymentType === 'paypal' ? [{
label: i18n.text('checkout.success.payment_method'),
text: 'PayPal'
}] : []);
}, [order]);
return /*#__PURE__*/_jsx(CheckoutConfirmationSection, {
title: "checkout.success.billed_to",
content: content,
className: className
});
};
CheckoutConfirmationBilledTo.defaultProps = {
className: null
};
export default CheckoutConfirmationBilledTo;