124 lines
2.6 KiB
TypeScript
124 lines
2.6 KiB
TypeScript
/**
|
|
* External dependencies
|
|
*/
|
|
import { useBlockProps } from '@wordpress/block-editor';
|
|
import { Disabled } from '@wordpress/components';
|
|
import { __, _x } from '@wordpress/i18n';
|
|
|
|
/**
|
|
* Internal dependencies
|
|
*/
|
|
import './style.scss';
|
|
|
|
const Edit = (): JSX.Element => {
|
|
const blockProps = useBlockProps( {
|
|
className: 'wc-block-order-confirmation-downloads',
|
|
} );
|
|
|
|
const {
|
|
borderBottomColor,
|
|
borderLeftColor,
|
|
borderRightColor,
|
|
borderTopColor,
|
|
borderWidth,
|
|
} = blockProps.style;
|
|
|
|
const borderStyles = {
|
|
borderBottomColor,
|
|
borderLeftColor,
|
|
borderRightColor,
|
|
borderTopColor,
|
|
borderWidth,
|
|
} as React.CSSProperties;
|
|
|
|
return (
|
|
<div { ...blockProps }>
|
|
<Disabled>
|
|
<table
|
|
style={ borderStyles }
|
|
cellSpacing="0"
|
|
className="wc-block-order-confirmation-downloads__table"
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th className="download-product">
|
|
<span className="nobr">
|
|
{ __( 'Product', 'woocommerce' ) }
|
|
</span>
|
|
</th>
|
|
<th className="download-remaining">
|
|
<span className="nobr">
|
|
{ __(
|
|
'Downloads remaining',
|
|
'woocommerce'
|
|
) }
|
|
</span>
|
|
</th>
|
|
<th className="download-expires">
|
|
<span className="nobr">
|
|
{ __( 'Expires', 'woocommerce' ) }
|
|
</span>
|
|
</th>
|
|
<th className="download-file">
|
|
<span className="nobr">
|
|
{ __( 'Download', 'woocommerce' ) }
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td
|
|
className="download-product"
|
|
data-title="Product"
|
|
>
|
|
<a href="https://example.com">
|
|
{ _x(
|
|
'Test Product',
|
|
'sample product name',
|
|
'woocommerce'
|
|
) }
|
|
</a>
|
|
</td>
|
|
<td
|
|
className="download-remaining"
|
|
data-title="Downloads remaining"
|
|
>
|
|
{ _x(
|
|
'∞',
|
|
'infinite downloads remaining',
|
|
'woocommerce'
|
|
) }
|
|
</td>
|
|
<td
|
|
className="download-expires"
|
|
data-title="Expires"
|
|
>
|
|
{ _x(
|
|
'Never',
|
|
'download expires',
|
|
'woocommerce'
|
|
) }
|
|
</td>
|
|
<td className="download-file" data-title="Download">
|
|
<a
|
|
href="https://example.com"
|
|
className="woocommerce-MyAccount-downloads-file button alt"
|
|
>
|
|
{ _x(
|
|
'Test Download',
|
|
'sample download name',
|
|
'woocommerce'
|
|
) }
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</Disabled>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Edit;
|