Checkout complete page improvements

The following patch links the order number and gets rid of the secondary message if the user is logged in.

I think we should add the order summary pane as well. It is consistently shown through the ceckout but is missing on the complete page.

Added the order summary after the completion message as recommended in #4.

The patch doesn apply to latest dev. There seems to be a new theme hook:

public function buildPaneForm(array $pane_form, FormStateInterface $form_state, array &$complete_form) {
    $pane_form['#theme'] = 'commerce_checkout_completion_message';
    $pane_form['#order_entity'] = $this->order;

    return $pane_form;
}

Also i am not sure if the order summary belongs into the CompletionMessage pane. On the other pages it lives in the sidebar as a separate pane.

Added order URL to order number for a logged in user.
This patch applies to latest dev.

PR : https://github.com/drupalcommerce/commerce/pull/749

This improves the user experience.

Setting to RTBC as it works fine.

The last patch removed the order summary pane again.

This patch adds the order summary again. But i guess that only mages sense if we apply the regulare checkout layout with sidebar. How can this be done?

This patch is using the new theme for the order summary introduced in #2896815: Replace the order summary view with a Twig template

Actually this doesn't take the setting of the order summary pane of the checkout flow into account. It always renders the template even if it is configured to use a view.

Tests will need updating too, as a lot of them check for the current message.

Also:

+++ b/modules/checkout/templates/commerce-checkout-completion-message.html.twig
@@ -20,4 +25,5 @@
+  {{ order_summary }}

Is this a desired change? It's not mentioned in the issue summary.

#16: Yes, isn't that a nice improvement?

I guess? Maybe?

I mean, at this point, the customer has seen their order a zillion times on one page after another. And they are a click away from seeing it too.

It seems like scope creep on this issue to me. It would be nice to fix the complete page so for instance, it actually has a link to my order and doesn't tell me about things I can do when logged in when I am already logged in. Adding more features should maybe be left to a follow-up, where the merits of different features can be discussed.

I agree with @joachim that

at this point, the customer has seen their order a zillion times on one page after another.

So adding another redundant order summary that shows on earlier checkout panes is not helpful here. But, at the root of this issue is that the two lines of obscure text in the current twig template are not helpful either (this weak completion message infuriates customers and store owners alike, in my experience). So what would be helpful?

If I just paid for something on a website, what do I want to see on the checkout completion screen?

1. A receipt showing items paid for, payment method, and payment complete. A PDF download of this receipt would also be standard and useful to me as a customer.
2. An explanation of how/when I can expect to receive/redeem what I purchased
3. A message stating that something was emailed to me about my order
4. Instructions for what actions I need to take next. Similar to the existing {{ payment_instructions }} variable in the twig template.

This is the kind of stuff that makes happy customers who have clarity about what they just paid for on the website.

I agree to everything in #19. That would be a great improvement!

+1 for everything in #19

Dear future googlers,

For now I'm slapping a receipt into the commerce-checkout-completion-message.html.twig template (copied into my theme directory) using this hook_preprocess_commerce_checkout_pane() implementation ... the super terse, no error checking anything, hope you get the point, version:

MYMODULE_preprocess_commerce_checkout_pane(&$variables){

      // peel the order id out of the url
      $path = \Drupal::service('path.current')->getPath();
      $parts = explode('/',$path);
      $order_id = $parts[2];

      // hint: make sure you're really on the checkout page here ... like: if ($parts[1] === 'checkout' && $parts[3] === 'complete') ... but with error checking ;-)

      // render the order summary that is used during the checkout process
      $render = [
        '#type' => 'view',
        // this view is built into drupal commerce, see: /admin/structure/views/view/commerce_checkout_order_summary
        '#name' => 'commerce_checkout_order_summary', 
        '#display_id' => 'default',
        '#arguments' => $order_id
      ];
      $order_items = \Drupal::service('renderer')->render($render);
      
      // do other stuff. hint: $Order = \Drupal\commerce_order\Entity\Order::load($order_id);
      // SEE: https://docs.drupalcommerce.org/commerce2/developer-guide/orders

      // compose an array that I'll pass to twig to be rendered inline
      $info['receipt'] = [
        'order_items'=>$order_items,
        'other_stuff'=>'everything else I want on the receipt'
      ]

      // have twig render the order items into a receipt template
      // SEE: https://www.jeffgeerling.com/blog/2019/rendering-twig-templates-programmatically-drupal-8
      $template_path = drupal_get_path('module', 'MYMODULE') . '/templates/invoice/checkout-receipt.html.twig';
      // and in my checkout-receipt.html.twig template=> {{ recipt.order_items }}
      $markup = twig_render_template($template_path, $info);
      // "Cast to string since twig_render_template returns a Markup object." -- Thanks Jeff Geerling!
      $markup = (string) $markup;

      // add a wrapper around the receipt to keep it separate from the create password form presented during guest checkout
      $message = [
        '#type' => 'html_tag',
        '#tag' => 'div',
        '#attributes' => ['id'=>'receipt-wrapper'],
        'value' => [
          '#markup' => $markup,
          '#weight' => 10,
        ],
      ];

      // pass the whole ball of wax down to the commerce-checkout-completion-message.html.twig template
      $variables['elements']['message']['#message'] = $message;
}

After reading #19 I'm getting right on the last three, starting with "A message stating that something was emailed to me about my order" because that's the most sensible thing I've read all day.

-Dan

I am using this much shorter and probably cleaner approach to adding the order summary to the checkout complete step:

/*
 * Implements hook_preprocess_field__HOOK().
 */
function HOOK_preprocess_commerce_checkout_completion_message(&$variables) {
  /** @var \Drupal\commerce_order\Entity\Order $order */
  $order = $variables['order_entity'];
  $variables['order_summary'] = [
    '#type' => 'view',
    '#name' => 'commerce_checkout_order_summary',
    '#display_id' => 'default',
    '#arguments' => [$order->id()],
  ];
}