Order confirmation: Convert Order Details Templates to Blocks (#10095)

* Move code from templates into the details block

* Details -> Totals

* Downloads block

* Sample content for downloads block

* Add block icon

assets/js/blocks/order-confirmation/details/block.json → assets/js/blocks/order-confirmation/downloads/block.json

@@ -1,8 +1,8 @@
 {
-	"name": "woocommerce/order-confirmation-details",
+	"name": "woocommerce/order-confirmation-downloads",
 	"version": "1.0.0",
-	"title": "Order Confirmation Details",
-	"description": "Display the order confirmation details.",
+	"title": "Order Downloads",
+	"description": "Display links to purchased downloads.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"supports": {

assets/js/blocks/order-confirmation/downloads/edit.tsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import ServerSideRender from '@wordpress/server-side-render';
+import { useBlockProps } from '@wordpress/block-editor';
+import { Disabled } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+interface Props {
+	attributes: {
+		align: string;
+		className: string;
+		isPreview: boolean;
+	};
+	name: string;
+}
+
+const Edit = ( props: Props ): JSX.Element => {
+	const { attributes, name } = props;
+	const blockProps = useBlockProps( {
+		className: 'wc-block-order-confirmation-downloads',
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<Disabled>
+				<ServerSideRender
+					block={ name }
+					attributes={ {
+						...attributes,
+						isPreview: true,
+					} }
+				/>
+			</Disabled>
+		</div>
+	);
+};
+
+export default Edit;

assets/js/blocks/order-confirmation/downloads/index.tsx

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Icon, download } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import './style.scss';
+
+registerBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ download }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes: {
+		...metadata.attributes,
+	},
+	edit,
+	save() {
+		return null;
+	},
+} );

assets/js/blocks/order-confirmation/downloads/style.scss

@@ -0,0 +1,27 @@
+.wc-block-order-confirmation-downloads {
+	.woocommerce-order-downloads table,
+	.woocommerce-order-downloads table.shop_table {
+		width: 100%;
+		border: 1px solid currentColor;
+		border-bottom: 0;
+
+		thead {
+			text-transform: uppercase;
+		}
+
+		th {
+			font-weight: bold;
+		}
+
+		th,
+		td {
+			border-style: solid;
+			border-color: currentColor;
+			border-width: 0 0 1px 0;
+			padding: $gap-small;
+			margin: 0;
+			text-align: left;
+		}
+	}
+}
+

assets/js/blocks/order-confirmation/totals/block.json

@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/order-confirmation-totals",
+	"version": "1.0.0",
+	"title": "Order Totals",
+	"description": "Display the items purchased and order totals.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"supports": {
+		"multiple": false,
+		"align": [ "wide", "full" ]
+	},
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "wide"
+		},
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"isPreview": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/blocks/order-confirmation/details/edit.tsx → assets/js/blocks/order-confirmation/totals/edit.tsx

@@ -9,10 +9,19 @@ import { useBlockProps } from '@wordpress/block-editor';
  */
 import './style.scss';
 
+interface Props {
+	attributes: {
+		align: string;
+		className: string;
+		isPreview: boolean;
+	};
+	name: string;
+}
+
 const Edit = ( props: Props ): JSX.Element => {
 	const { attributes, name } = props;
 	const blockProps = useBlockProps( {
-		className: 'wc-block-order-confirmation-details',
+		className: 'wc-block-order-confirmation-totals',
 	} );
 
 	return (

assets/js/blocks/order-confirmation/details/style.scss → assets/js/blocks/order-confirmation/totals/style.scss

@@ -1,4 +1,4 @@
-.wc-block-order-confirmation-details {
+.wc-block-order-confirmation-totals {
 	.woocommerce-order-details table,
 	.woocommerce-order-details table.shop_table {
 		width: 100%;
@@ -9,6 +9,10 @@
 			text-transform: uppercase;
 		}
 
+		th {
+			font-weight: bold;
+		}
+
 		th,
 		td {
 			border-style: solid;

bin/webpack-entries.js

@@ -93,8 +93,11 @@ const blocks = {
 	'order-confirmation-summary': {
 		customDir: 'order-confirmation/summary',
 	},
-	'order-confirmation-details': {
-		customDir: 'order-confirmation/details',
+	'order-confirmation-totals': {
+		customDir: 'order-confirmation/totals',
+	},
+	'order-confirmation-downloads': {
+		customDir: 'order-confirmation/downloads',
 	},
 	'order-confirmation-billing-address': {
 		customDir: 'order-confirmation/billing-address',