85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useBlockProps } from '@wordpress/block-editor';
|
|
import { Disabled } from '@wordpress/components';
|
|
import { __ } from '@wordpress/i18n';
|
|
import { formatPrice } from '@woocommerce/price-format';
|
|
import { date } from '@wordpress/date';
|
|
import { getSetting } from '@woocommerce/settings';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
const Edit = (): JSX.Element => {
|
|
const blockProps = useBlockProps( {
|
|
className: 'wc-block-order-confirmation-summary',
|
|
} );
|
|
|
|
return (
|
|
<div { ...blockProps }>
|
|
<Disabled>
|
|
<ul className="wc-block-order-confirmation-summary-list">
|
|
<li className="wc-block-order-confirmation-summary-list-item">
|
|
<span className="wc-block-order-confirmation-summary-list-item__key">
|
|
{ __(
|
|
'Order number:',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
</span>{ ' ' }
|
|
<span className="wc-block-order-confirmation-summary-list-item__value">
|
|
123
|
|
</span>
|
|
</li>
|
|
<li className="wc-block-order-confirmation-summary-list-item">
|
|
<span className="wc-block-order-confirmation-summary-list-item__key">
|
|
{ __( 'Date:', 'woo-gutenberg-products-block' ) }
|
|
</span>{ ' ' }
|
|
<span className="wc-block-order-confirmation-summary-list-item__value">
|
|
{ date(
|
|
getSetting( 'dateFormat' ),
|
|
new Date(),
|
|
undefined
|
|
) }
|
|
</span>
|
|
</li>
|
|
<li className="wc-block-order-confirmation-summary-list-item">
|
|
<span className="wc-block-order-confirmation-summary-list-item__key">
|
|
{ __( 'Total:', 'woo-gutenberg-products-block' ) }
|
|
</span>{ ' ' }
|
|
<span className="wc-block-order-confirmation-summary-list-item__value">
|
|
{ formatPrice( 4000 ) }
|
|
</span>
|
|
</li>
|
|
<li className="wc-block-order-confirmation-summary-list-item">
|
|
<span className="wc-block-order-confirmation-summary-list-item__key">
|
|
{ __( 'Email:', 'woo-gutenberg-products-block' ) }
|
|
</span>{ ' ' }
|
|
<span className="wc-block-order-confirmation-summary-list-item__value">
|
|
test@test.com
|
|
</span>
|
|
</li>
|
|
<li className="wc-block-order-confirmation-summary-list-item">
|
|
<span className="wc-block-order-confirmation-summary-list-item__key">
|
|
{ __(
|
|
'Payment method:',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
</span>{ ' ' }
|
|
<span className="wc-block-order-confirmation-summary-list-item__value">
|
|
{ __(
|
|
'Credit Card',
|
|
'woo-gutenberg-products-block'
|
|
) }
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</Disabled>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Edit;
|