fix(email-plugin): Include shipping method in order receipt handler

Closes #473

packages/email-plugin/src/default-email-handlers.ts

@@ -5,6 +5,7 @@ import {
     NativeAuthenticationMethod,
     OrderStateTransitionEvent,
     PasswordResetEvent,
+    ShippingMethod,
 } from '@vendure/core';
 
 import { EmailEventHandler } from './event-handler';
@@ -19,10 +20,19 @@ import {
 export const orderConfirmationHandler = new EmailEventListener('order-confirmation')
     .on(OrderStateTransitionEvent)
     .filter(event => event.toState === 'PaymentSettled' && !!event.order.customer)
+    .loadData(async context => {
+        let shippingMethod: ShippingMethod | undefined;
+        if (!context.event.order.shippingMethod && context.event.order.shippingMethodId) {
+            shippingMethod = await context.connection
+                .getRepository(ShippingMethod)
+                .findOne(context.event.order.shippingMethodId);
+        }
+        return { shippingMethod };
+    })
     .setRecipient(event => event.order.customer!.emailAddress)
     .setFrom(`{{ fromAddress }}`)
     .setSubject(`Order confirmation for #{{ order.code }}`)
-    .setTemplateVars(event => ({ order: event.order }))
+    .setTemplateVars(event => ({ order: event.order, shippingMethod: event.data.shippingMethod }))
     .setMockEvent(mockOrderStateTransitionEvent);
 
 export const emailVerificationHandler = new EmailEventListener('email-verification')

packages/email-plugin/src/event-handler.ts

@@ -50,7 +50,7 @@ export class EmailEventHandler<T extends string = string, Event extends EventWit
     private configurations: EmailTemplateConfig[] = [];
     private defaultSubject: string;
     private from: string;
-    private _mockEvent: Omit<Event, 'ctx'> | undefined;
+    private _mockEvent: Omit<Event, 'ctx' | 'data'> | undefined;
 
     constructor(public listener: EmailEventListener<T>, public event: Type<Event>) {}
 
@@ -60,7 +60,7 @@ export class EmailEventHandler<T extends string = string, Event extends EventWit
     }
 
     /** @internal */
-    get mockEvent(): Omit<Event, 'ctx'> | undefined {
+    get mockEvent(): Omit<Event, 'ctx' | 'data'> | undefined {
         return this._mockEvent;
     }
 
@@ -213,7 +213,7 @@ export class EmailEventHandler<T extends string = string, Event extends EventWit
      * Optionally define a mock Event which is used by the dev mode mailbox app for generating mock emails
      * from this handler, which is useful when developing the email templates.
      */
-    setMockEvent(event: Omit<Event, 'ctx'>): EmailEventHandler<T, Event> {
+    setMockEvent(event: Omit<Event, 'ctx' | 'data'>): EmailEventHandler<T, Event> {
         this._mockEvent = event;
         return this;
     }
@@ -225,7 +225,7 @@ export class EmailEventHandler<T extends string = string, Event extends EventWit
         if (this.configurations.length === 0) {
             return;
         }
-        const exactMatch = this.configurations.find((c) => {
+        const exactMatch = this.configurations.find(c => {
             return (
                 (c.channelCode === channelCode || c.channelCode === 'default') &&
                 c.languageCode === languageCode
@@ -235,7 +235,7 @@ export class EmailEventHandler<T extends string = string, Event extends EventWit
             return exactMatch;
         }
         const channelMatch = this.configurations.find(
-            (c) => c.channelCode === channelCode && c.languageCode === 'default',
+            c => c.channelCode === channelCode && c.languageCode === 'default',
         );
         if (channelMatch) {
             return channelMatch;

packages/email-plugin/templates/order-confirmation/body.hbs

@@ -109,7 +109,7 @@
                 <td>${{ formatMoney order.subTotal }}</td>
             </tr>
             <tr class="order-row">
-                <td colspan="3">Shipping ({{ order.shippingMethod.description }}):</td>
+                <td colspan="3">Shipping ({{ shippingMethod.description }}):</td>
                 <td>${{ formatMoney order.shipping }}</td>
             </tr>
             <tr class="order-row total-row">