Issue #2862287 by Bojan Živkov, niko-, bojanz: Use a twig template for the CompletionMessage pane

Author: bojanzivkov

modules/checkout/commerce_checkout.module

@@ -21,6 +21,11 @@ function commerce_checkout_theme() {
         'steps' => [],
       ],
     ],
+    'commerce_checkout_completion_message' => [
+      'variables' => [
+        'order_entity' => NULL,
+      ],
+    ],
     'commerce_checkout_form' => [
       'render element' => 'form',
     ],

modules/checkout/config/install/commerce_checkout.commerce_checkout_flow.default.yml

@@ -24,6 +24,5 @@ configuration:
       step: review
       weight: 3
     completion_message:
-      message: 'Your order number is %order_number. You can view your order on your account page when logged in.'
       step: complete
       weight: 4

modules/checkout/config/schema/commerce_checkout.schema.yml

@@ -53,13 +53,6 @@ commerce_checkout_flow_with_panes_configuration:
 commerce_checkout.commerce_checkout_pane.*:
   type: commerce_checkout_pane_configuration
 
-commerce_checkout.commerce_checkout_pane.completion_message:
-  type: commerce_checkout_pane_configuration
-  mapping:
-    message:
-      type: text
-      label: 'Message'
-
 commerce_checkout.commerce_checkout_pane.contact_information:
   type: commerce_checkout_pane_configuration
   mapping:

modules/checkout/src/Plugin/Commerce/CheckoutPane/CompletionMessage.php

@@ -15,55 +15,13 @@
  */
 class CompletionMessage extends CheckoutPaneBase {
 
-  /**
-   * {@inheritdoc}
-   */
-  public function defaultConfiguration() {
-    // @todo Add token, HTML support.
-    $default_message = 'Your order number is %order_number. ';
-    $default_message .= 'You can view your order on your account page when logged in.';
-
-    return [
-      'message' => $default_message,
-    ] + parent::defaultConfiguration();
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
-    $form = parent::buildConfigurationForm($form, $form_state);
-    $form['message'] = [
-      '#type' => 'textarea',
-      '#title' => $this->t('Message'),
-      '#default_value' => $this->configuration['message'],
-    ];
-
-    return $form;
-  }
-
-  /**
-   * {@inheritdoc}
-   */
-  public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
-    parent::submitConfigurationForm($form, $form_state);
-
-    if (!$form_state->getErrors()) {
-      $values = $form_state->getValue($form['#parents']);
-      $this->configuration['message'] = $values['message'];
-    }
-  }
-
   /**
    * {@inheritdoc}
    */
   public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form) {
-    $message = $this->configuration['message'];
-    $message = str_replace('%order_number', $this->order->getOrderNumber(), $message);
+    $pane_form['#theme'] = 'commerce_checkout_completion_message';
+    $pane_form['#order_entity'] = $this->order;
 
-    $pane_form['message'] = [
-      '#markup' => $message,
-    ];
     return $pane_form;
   }
 

modules/checkout/templates/commerce-checkout-completion-message.html.twig

@@ -0,0 +1,15 @@
+{#
+/**
+ * @file
+ * Default theme implementation for the completion message.
+ *
+ * Available variables:
+ * - order_entity: The order entity.
+ *
+ * @ingroup themeable
+ */
+#}
+<p>
+  {{ 'Your order number is @number.'|t({'@number': order_entity.getOrderNumber}) }} <br>
+  {{ 'You can view your order on your account page when logged in.'|t }}
+</p>