Order Received FSE template

assets/js/blocks/classic-template/constants.ts

@@ -14,10 +14,12 @@ export const TYPES = {
 	productCatalog: 'product-catalog',
 	productTaxonomy: 'product-taxonomy',
 	productSearchResults: 'product-search-results',
+	orderReceived: 'order-received',
 };
 export const PLACEHOLDERS = {
 	singleProduct: 'single-product',
 	archiveProduct: 'archive-product',
+	orderReceived: 'fallback',
 };
 
 export const TEMPLATES: TemplateDetails = {
@@ -69,4 +71,12 @@ export const TEMPLATES: TemplateDetails = {
 		),
 		placeholder: PLACEHOLDERS.archiveProduct,
 	},
+	'order-received': {
+		type: TYPES.orderReceived,
+		title: __(
+			'WooCommerce Order Received Block',
+			'woo-gutenberg-products-block'
+		),
+		placeholder: PLACEHOLDERS.orderReceived,
+	},
 };

assets/js/blocks/classic-template/index.tsx

@@ -35,6 +35,8 @@ import {
 } from './archive-product';
 import * as blockifiedSingleProduct from './single-product';
 import * as blockifiedProductSearchResults from './product-search-results';
+import * as blockifiedOrderReceived from './order-received';
+
 import type { BlockifiedTemplateConfig } from './types';
 
 type Attributes = {
@@ -54,6 +56,7 @@ const conversionConfig: { [ key: string ]: BlockifiedTemplateConfig } = {
 	[ TYPES.productTaxonomy ]: blockifiedProductTaxonomyConfig,
 	[ TYPES.singleProduct ]: blockifiedSingleProduct,
 	[ TYPES.productSearchResults ]: blockifiedProductSearchResults,
+	[ TYPES.orderReceived ]: blockifiedOrderReceived,
 	fallback: blockifiedFallbackConfig,
 };
 

assets/js/blocks/classic-template/order-received.ts

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+
+const getBlockifiedTemplate = () => [];
+
+const isConversionPossible = () => {
+	// Blockification is possible for the WP version 6.1 and above,
+	// which are the versions the Products block supports.
+	return false;
+};
+
+const getDescriptionAllowingConversion = ( templateTitle: string ) =>
+	sprintf(
+		/* translators: %s is the template title */
+		__(
+			"This block serves as a placeholder for your %s. We recommend upgrading to the Order Received block for more features and to edit it visually. Don't worry, you can always revert back.",
+			'woo-gutenberg-products-block'
+		),
+		templateTitle
+	);
+
+const getDescriptionDisallowingConversion = ( templateTitle: string ) =>
+	sprintf(
+		/* translators: %s is the template title */
+		__(
+			'This block serves as a placeholder for your %s. It will display the thankyou.php template. You can move this placeholder around and add more blocks around to customize the template.',
+			'woo-gutenberg-products-block'
+		),
+		templateTitle
+	);
+
+const getDescription = ( templateTitle: string, canConvert: boolean ) => {
+	if ( canConvert ) {
+		return getDescriptionAllowingConversion( templateTitle );
+	}
+
+	return getDescriptionDisallowingConversion( templateTitle );
+};
+
+const getButtonLabel = () =>
+	__( 'Upgrade to Products block', 'woo-gutenberg-products-block' );
+
+export {
+	getBlockifiedTemplate,
+	isConversionPossible,
+	getDescription,
+	getButtonLabel,
+};

assets/js/blocks/classic-template/types.ts

@@ -3,7 +3,13 @@
  */
 import { type BlockInstance } from '@wordpress/blocks';
 
-export type TemplateDetails = Record< string, Record< string, string > >;
+type TemplateDetail = {
+	type: string;
+	title: string;
+	placeholder: string;
+};
+
+export type TemplateDetails = Record< string, TemplateDetail >;
 
 export type InheritedAttributes = {
 	align?: string;

src/BlockTemplatesController.php

@@ -1,10 +1,12 @@
 <?php
 namespace Automattic\WooCommerce\Blocks;
 
+use Automattic\WooCommerce\Admin\Overrides\Order;
 use Automattic\WooCommerce\Blocks\Domain\Package;
 use Automattic\WooCommerce\Blocks\Templates\ProductAttributeTemplate;
 use Automattic\WooCommerce\Blocks\Templates\SingleProductTemplateCompatibility;
 use Automattic\WooCommerce\Blocks\Utils\BlockTemplateUtils;
+use Automattic\WooCommerce\Blocks\Templates\OrderReceivedTemplate;
 
 /**
  * BlockTypesController class.
@@ -560,6 +562,12 @@ public function render_block_template() {
 			if ( ! BlockTemplateUtils::theme_has_template( 'archive-product' ) ) {
 				add_filter( 'woocommerce_has_block_template', '__return_true', 10, 0 );
 			}
+		} elseif (
+			is_wc_endpoint_url( 'order-received' )
+			&& ! BlockTemplateUtils::theme_has_template( OrderReceivedTemplate::SLUG )
+			&& $this->block_template_is_available( OrderReceivedTemplate::SLUG )
+		) {
+			add_filter( 'woocommerce_has_block_template', '__return_true', 10, 0 );
 		} else {
 			$queried_object = get_queried_object();
 			if ( is_null( $queried_object ) ) {

src/BlockTypes/ClassicTemplate.php

@@ -3,8 +3,9 @@
 
 use Automattic\WooCommerce\Blocks\Templates\ProductAttributeTemplate;
 use Automattic\WooCommerce\Blocks\Templates\ProductSearchResultsTemplate;
+use Automattic\WooCommerce\Blocks\Templates\OrderReceivedTemplate;
 use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
-use WC_Query;
+use WC_Shortcode_Checkout;
 
 /**
  * Classic Single Product class
@@ -62,11 +63,23 @@ protected function render( $attributes, $content, $block ) {
 			$frontend_scripts::load_scripts();
 		}
 
-		$archive_templates = array( 'archive-product', 'taxonomy-product_cat', 'taxonomy-product_tag', ProductAttributeTemplate::SLUG, ProductSearchResultsTemplate::SLUG );
+		if ( OrderReceivedTemplate::SLUG === $attributes['template'] ) {
+			return $this->render_order_received();
+		}
 
 		if ( 'single-product' === $attributes['template'] ) {
 			return $this->render_single_product();
-		} elseif ( in_array( $attributes['template'], $archive_templates, true ) ) {
+		}
+
+		$archive_templates = array(
+			'archive-product',
+			'taxonomy-product_cat',
+			'taxonomy-product_tag',
+			ProductAttributeTemplate::SLUG,
+			ProductSearchResultsTemplate::SLUG,
+		);
+
+		if ( in_array( $attributes['template'], $archive_templates, true ) ) {
 			// Set this so that our product filters can detect if it's a PHP template.
 			$this->asset_data_registry->add( 'is_rendering_php_template', true, true );
 
@@ -80,14 +93,39 @@ protected function render( $attributes, $content, $block ) {
 			);
 
 			return $this->render_archive_product();
-		} else {
-			ob_start();
+		}
 
-			echo "You're using the ClassicTemplate block";
+		ob_start();
 
-			wp_reset_postdata();
-			return ob_get_clean();
-		}
+		echo "You're using the ClassicTemplate block";
+
+		wp_reset_postdata();
+
+		return ob_get_clean();
+	}
+
+	/**
+	 * Render method for rendering the order received template.
+	 *
+	 * @return string Rendered block type output.
+	 */
+	protected function render_order_received() {
+		ob_start();
+
+		echo '<div class="wp-block-group">';
+
+		echo sprintf(
+			'<%1$s %2$s>%3$s</%1$s>',
+			'h1',
+			get_block_wrapper_attributes(), // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+			esc_html__( 'Order received', 'woo-gutenberg-products-block' )
+		);
+
+		WC_Shortcode_Checkout::output( array() );
+
+		echo '</div>';
+
+		return ob_get_clean();
 	}
 
 	/**

src/Domain/Bootstrap.php

@@ -22,15 +22,16 @@
 use Automattic\WooCommerce\Blocks\Payments\Integrations\PayPal;
 use Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry;
 use Automattic\WooCommerce\Blocks\Registry\Container;
+use Automattic\WooCommerce\Blocks\Shipping\ShippingController;
+use Automattic\WooCommerce\Blocks\Templates\ArchiveProductTemplatesCompatibility;
 use Automattic\WooCommerce\Blocks\Templates\ClassicTemplatesCompatibility;
+use Automattic\WooCommerce\Blocks\Templates\OrderReceivedTemplate;
 use Automattic\WooCommerce\Blocks\Templates\ProductAttributeTemplate;
 use Automattic\WooCommerce\Blocks\Templates\ProductSearchResultsTemplate;
+use Automattic\WooCommerce\Blocks\Templates\SingleProductTemplateCompatibility;
 use Automattic\WooCommerce\StoreApi\RoutesController;
 use Automattic\WooCommerce\StoreApi\SchemaController;
 use Automattic\WooCommerce\StoreApi\StoreApi;
-use Automattic\WooCommerce\Blocks\Shipping\ShippingController;
-use Automattic\WooCommerce\Blocks\Templates\SingleProductTemplateCompatibility;
-use Automattic\WooCommerce\Blocks\Templates\ArchiveProductTemplatesCompatibility;
 
 /**
  * Takes care of bootstrapping the plugin.
@@ -132,6 +133,7 @@ function() {
 		$this->container->get( BlockTemplatesController::class );
 		$this->container->get( ProductSearchResultsTemplate::class );
 		$this->container->get( ProductAttributeTemplate::class );
+		$this->container->get( OrderReceivedTemplate::class );
 		$this->container->get( ClassicTemplatesCompatibility::class );
 		$this->container->get( ArchiveProductTemplatesCompatibility::class )->init();
 		$this->container->get( SingleProductTemplateCompatibility::class )->init();
@@ -273,6 +275,12 @@ function () {
 				return new ProductAttributeTemplate();
 			}
 		);
+		$this->container->register(
+			OrderReceivedTemplate::class,
+			function () {
+				return new OrderReceivedTemplate();
+			}
+		);
 		$this->container->register(
 			ClassicTemplatesCompatibility::class,
 			function ( Container $container ) {

src/Templates/OrderReceivedTemplate.php

@@ -0,0 +1,41 @@
+<?php
+namespace Automattic\WooCommerce\Blocks\Templates;
+
+/**
+ * OrderReceivedTemplate class.
+ *
+ * @internal
+ */
+class OrderReceivedTemplate {
+
+	const SLUG = 'order-received';
+
+	/**
+	 * Constructor.
+	 */
+	public function __construct() {
+		$this->init();
+	}
+
+	/**
+	 * Initialization method.
+	 */
+	protected function init() {
+		add_filter( 'page_template_hierarchy', array( $this, 'update_page_template_hierarchy' ), 10, 3 );
+	}
+
+	/**
+	 * When it's the Order Received page and a block theme is active, render the Order Received Template.
+	 *
+	 * @param array $templates Templates that match the pages_template_hierarchy.
+	 */
+	public function update_page_template_hierarchy( $templates ) {
+
+		if ( is_wc_endpoint_url( 'order-received' ) && wc_current_theme_is_fse_theme() ) {
+			array_unshift( $templates, self::SLUG );
+		}
+
+		return $templates;
+	}
+
+}

src/Utils/BlockTemplateUtils.php

@@ -1,11 +1,12 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\Utils;
 
-use Automattic\WooCommerce\Blocks\Templates\ProductAttributeTemplate;
-use Automattic\WooCommerce\Blocks\Templates\ProductSearchResultsTemplate;
 use Automattic\WooCommerce\Blocks\Domain\Services\FeatureGating;
 use Automattic\WooCommerce\Blocks\Options;
 use Automattic\WooCommerce\Blocks\Templates\MiniCartTemplate;
+use Automattic\WooCommerce\Blocks\Templates\OrderReceivedTemplate;
+use Automattic\WooCommerce\Blocks\Templates\ProductAttributeTemplate;
+use Automattic\WooCommerce\Blocks\Templates\ProductSearchResultsTemplate;
 
 /**
  * Utility methods used for serving block templates from WooCommerce Blocks.
@@ -331,6 +332,10 @@ public static function get_plugin_block_template_types() {
 				'title'       => _x( 'Mini Cart', 'Template name', 'woo-gutenberg-products-block' ),
 				'description' => __( 'Template used to display the Mini Cart drawer.', 'woo-gutenberg-products-block' ),
 			),
+			OrderReceivedTemplate::SLUG        => array(
+				'title'       => _x( 'Order Received', 'Template name', 'woo-gutenberg-products-block' ),
+				'description' => __( 'Displays the order confirmation page.', 'woo-gutenberg-products-block' ),
+			),
 		);
 
 		return $plugin_template_types;

templates/templates/order-received.html

@@ -0,0 +1,7 @@
+<!-- wp:template-part {"slug":"header"} /-->
+<!-- wp:group {"tagName": "main", "layout":{"inherit":true,"type":"constrained"}} -->
+<main class="wp-block-group">
+	<!-- wp:woocommerce/legacy-template {"template":"order-received"} /-->
+</main>
+<!-- /wp:group -->
+<!-- wp:template-part {"slug":"footer"} /-->