feat(admin-ui): Display billing address in Order detail view

Relates to #372

packages/admin-ui/i18n-coverage.json

@@ -1,36 +1,36 @@
 {
-  "generatedOn": "2020-06-15T12:08:07.862Z",
-  "lastCommit": "a0ef63ff60e69739c31525a50cae7bd1b5d22977",
+  "generatedOn": "2020-06-30T08:09:29.407Z",
+  "lastCommit": "83347b27acf895b746b7b3288593d6c60d1a14dc",
   "translationStatus": {
     "de": {
-      "tokenCount": 650,
+      "tokenCount": 651,
       "translatedCount": 609,
       "percentage": 94
     },
     "en": {
-      "tokenCount": 650,
+      "tokenCount": 651,
       "translatedCount": 650,
       "percentage": 100
     },
     "es": {
-      "tokenCount": 650,
+      "tokenCount": 651,
       "translatedCount": 467,
       "percentage": 72
     },
     "pl": {
-      "tokenCount": 650,
+      "tokenCount": 651,
       "translatedCount": 566,
       "percentage": 87
     },
     "zh_Hans": {
-      "tokenCount": 650,
+      "tokenCount": 651,
       "translatedCount": 550,
-      "percentage": 85
+      "percentage": 84
     },
     "zh_Hant": {
-      "tokenCount": 650,
+      "tokenCount": 651,
       "translatedCount": 550,
-      "percentage": 85
+      "percentage": 84
     }
   }
 }

packages/admin-ui/src/lib/core/src/common/generated-types.ts

@@ -4708,7 +4708,7 @@ export type RefundFragment = (
   & Pick<Refund, 'id' | 'state' | 'items' | 'shipping' | 'adjustment' | 'transactionId' | 'paymentId'>
 );
 
-export type ShippingAddressFragment = (
+export type OrderAddressFragment = (
   { __typename?: 'OrderAddress' }
   & Pick<OrderAddress, 'fullName' | 'company' | 'streetLine1' | 'streetLine2' | 'city' | 'province' | 'postalCode' | 'country' | 'phoneNumber'>
 );
@@ -4769,7 +4769,10 @@ export type OrderDetailFragment = (
     & Pick<ShippingMethod, 'id' | 'code' | 'description'>
   )>, shippingAddress?: Maybe<(
     { __typename?: 'OrderAddress' }
-    & ShippingAddressFragment
+    & OrderAddressFragment
+  )>, billingAddress?: Maybe<(
+    { __typename?: 'OrderAddress' }
+    & OrderAddressFragment
   )>, payments?: Maybe<Array<(
     { __typename?: 'Payment' }
     & Pick<Payment, 'id' | 'createdAt' | 'transactionId' | 'amount' | 'method' | 'state' | 'metadata'>
@@ -7123,8 +7126,8 @@ export namespace Refund {
   export type Fragment = RefundFragment;
 }
 
-export namespace ShippingAddress {
-  export type Fragment = ShippingAddressFragment;
+export namespace OrderAddress {
+  export type Fragment = OrderAddressFragment;
 }
 
 export namespace Order {
@@ -7152,7 +7155,8 @@ export namespace OrderDetail {
   export type Adjustments = AdjustmentFragment;
   export type Promotions = (NonNullable<OrderDetailFragment['promotions'][0]>);
   export type ShippingMethod = (NonNullable<OrderDetailFragment['shippingMethod']>);
-  export type ShippingAddress = ShippingAddressFragment;
+  export type ShippingAddress = OrderAddressFragment;
+  export type BillingAddress = OrderAddressFragment;
   export type Payments = (NonNullable<(NonNullable<OrderDetailFragment['payments']>)[0]>);
   export type Refunds = (NonNullable<(NonNullable<(NonNullable<OrderDetailFragment['payments']>)[0]>)['refunds'][0]>);
   export type OrderItems = (NonNullable<(NonNullable<(NonNullable<(NonNullable<OrderDetailFragment['payments']>)[0]>)['refunds'][0]>)['orderItems'][0]>);

packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts

@@ -21,8 +21,8 @@ export const REFUND_FRAGMENT = gql`
     }
 `;
 
-export const SHIPPING_ADDRESS_FRAGMENT = gql`
-    fragment ShippingAddress on OrderAddress {
+export const ORDER_ADDRESS_FRAGMENT = gql`
+    fragment OrderAddress on OrderAddress {
         fullName
         company
         streetLine1
@@ -130,7 +130,10 @@ export const ORDER_DETAIL_FRAGMENT = gql`
             description
         }
         shippingAddress {
-            ...ShippingAddress
+            ...OrderAddress
+        }
+        billingAddress {
+            ...OrderAddress
         }
         payments {
             id
@@ -163,7 +166,7 @@ export const ORDER_DETAIL_FRAGMENT = gql`
         total
     }
     ${ADJUSTMENT_FRAGMENT}
-    ${SHIPPING_ADDRESS_FRAGMENT}
+    ${ORDER_ADDRESS_FRAGMENT}
     ${FULFILLMENT_FRAGMENT}
     ${ORDER_LINE_FRAGMENT}
 `;

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html

@@ -234,10 +234,14 @@
                 <div class="card-block">
                     <div class="card-text">
                         <vdr-customer-label [customer]="order.customer"></vdr-customer-label>
-                        <h6 *ngIf="getShippingAddressLines(order.shippingAddress).length">
+                        <h6 *ngIf="getOrderAddressLines(order.shippingAddress).length">
                             {{ 'order.shipping-address' | translate }}
                         </h6>
                         <vdr-formatted-address [address]="order.shippingAddress"></vdr-formatted-address>
+                        <h6 *ngIf="getOrderAddressLines(order.billingAddress).length">
+                            {{ 'order.billing-address' | translate }}
+                        </h6>
+                        <vdr-formatted-address [address]="order.billingAddress"></vdr-formatted-address>
                     </div>
                 </div>
             </div>

packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts

@@ -74,7 +74,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                             createdAt: SortOrder.DESC,
                         },
                     })
-                    .mapStream(data => data.order?.history.items);
+                    .mapStream((data) => data.order?.history.items);
             }),
         );
     }
@@ -88,7 +88,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
     }
 
     getLinePromotions(line: OrderDetail.Lines) {
-        return line.adjustments.filter(a => a.type === AdjustmentType.PROMOTION);
+        return line.adjustments.filter((a) => a.type === AdjustmentType.PROMOTION);
     }
 
     getPromotionLink(promotion: OrderDetail.Adjustments): any[] {
@@ -101,19 +101,19 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
         promotionAdjustment: OrderDetail.Adjustments,
     ): string | undefined {
         const id = promotionAdjustment.adjustmentSource.split(':')[1];
-        const promotion = order.promotions.find(p => p.id === id);
+        const promotion = order.promotions.find((p) => p.id === id);
         if (promotion) {
             return promotion.couponCode || undefined;
         }
     }
 
-    getShippingAddressLines(shippingAddress?: { [key: string]: string }): string[] {
-        if (!shippingAddress) {
+    getOrderAddressLines(orderAddress?: { [key: string]: string }): string[] {
+        if (!orderAddress) {
             return [];
         }
-        return Object.values(shippingAddress)
-            .filter(val => val !== 'OrderAddress')
-            .filter(line => !!line);
+        return Object.values(orderAddress)
+            .filter((val) => val !== 'OrderAddress')
+            .filter((line) => !!line);
     }
 
     settlePayment(payment: OrderDetail.Payments) {
@@ -134,7 +134,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
         this.entity$
             .pipe(
                 take(1),
-                switchMap(order => {
+                switchMap((order) => {
                     return this.modalService.fromComponent(FulfillOrderDialogComponent, {
                         size: 'xl',
                         locals: {
@@ -142,16 +142,16 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                         },
                     });
                 }),
-                switchMap(input => {
+                switchMap((input) => {
                     if (input) {
                         return this.dataService.order.createFullfillment(input);
                     } else {
                         return of(undefined);
                     }
                 }),
-                switchMap(result => this.refetchOrder(result)),
+                switchMap((result) => this.refetchOrder(result)),
             )
-            .subscribe(result => {
+            .subscribe((result) => {
                 if (result) {
                     this.notificationService.success(_('order.create-fulfillment-success'));
                 }
@@ -175,7 +175,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 },
             })
             .pipe(
-                switchMap(transactionId => {
+                switchMap((transactionId) => {
                     if (transactionId) {
                         return this.dataService.order.settleRefund(
                             {
@@ -190,7 +190,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 }),
                 // switchMap(result => this.refetchOrder(result)),
             )
-            .subscribe(result => {
+            .subscribe((result) => {
                 if (result) {
                     this.notificationService.success(_('order.settle-refund-success'));
                 }
@@ -205,8 +205,8 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 note,
                 isPublic,
             })
-            .pipe(switchMap(result => this.refetchOrder(result)))
-            .subscribe(result => {
+            .pipe(switchMap((result) => this.refetchOrder(result)))
+            .subscribe((result) => {
                 this.notificationService.success(_('common.notify-create-success'), {
                     entity: 'Note',
                 });
@@ -224,7 +224,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 },
             })
             .pipe(
-                switchMap(result => {
+                switchMap((result) => {
                     if (result) {
                         return this.dataService.order.updateOrderNote({
                             noteId: entry.id,
@@ -236,7 +236,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                     }
                 }),
             )
-            .subscribe(result => {
+            .subscribe((result) => {
                 this.fetchHistory.next();
                 this.notificationService.success(_('common.notify-update-success'), {
                     entity: 'Note',
@@ -254,7 +254,7 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                     { type: 'danger', label: _('common.delete'), returnValue: true },
                 ],
             })
-            .pipe(switchMap(res => (res ? this.dataService.order.deleteOrderNote(entry.id) : EMPTY)))
+            .pipe(switchMap((res) => (res ? this.dataService.order.deleteOrderNote(entry.id) : EMPTY)))
             .subscribe(() => {
                 this.fetchHistory.next();
                 this.notificationService.success(_('common.notify-delete-success'), {
@@ -272,16 +272,16 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 },
             })
             .pipe(
-                switchMap(input => {
+                switchMap((input) => {
                     if (input) {
                         return this.dataService.order.cancelOrder(input);
                     } else {
                         return of(undefined);
                     }
                 }),
-                switchMap(result => this.refetchOrder(result)),
+                switchMap((result) => this.refetchOrder(result)),
             )
-            .subscribe(result => {
+            .subscribe((result) => {
                 if (result) {
                     this.notificationService.success(_('order.cancelled-order-success'));
                 }
@@ -297,10 +297,10 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                 },
             })
             .pipe(
-                switchMap(input => {
+                switchMap((input) => {
                     if (input) {
                         return this.dataService.order.refundOrder(omit(input, ['cancel'])).pipe(
-                            switchMap(result => {
+                            switchMap((result) => {
                                 if (input.cancel.length) {
                                     return this.dataService.order.cancelOrder({
                                         orderId: this.id,
@@ -316,9 +316,9 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
                         return of(undefined);
                     }
                 }),
-                switchMap(result => this.refetchOrder(result)),
+                switchMap((result) => this.refetchOrder(result)),
             )
-            .subscribe(result => {
+            .subscribe((result) => {
                 if (result) {
                     this.notificationService.success(_('order.refund-order-success'));
                 }

packages/admin-ui/src/lib/static/i18n-messages/de.json

@@ -512,6 +512,7 @@
   "order": {
     "add-note": "Notiz hinzufügen",
     "amount": "Betrag",
+    "billing-address": "",
     "cancel": "Abbrechen",
     "cancel-order": "Bestellung stornieren",
     "cancel-reason-customer-request": "Kundenanfrage",

packages/admin-ui/src/lib/static/i18n-messages/en.json

@@ -512,6 +512,7 @@
   "order": {
     "add-note": "Add note",
     "amount": "Amount",
+    "billing-address": "Billing address",
     "cancel": "Cancel",
     "cancel-order": "Cancel Order",
     "cancel-reason-customer-request": "Customer request",
@@ -679,4 +680,4 @@
     "job-result": "Job result",
     "job-state": "Job state"
   }
-}
+}

packages/admin-ui/src/lib/static/i18n-messages/es.json

@@ -512,6 +512,7 @@
   "order": {
     "add-note": "",
     "amount": "Precio",
+    "billing-address": "",
     "cancel": "",
     "cancel-order": "",
     "cancel-reason-customer-request": "",

packages/admin-ui/src/lib/static/i18n-messages/pl.json

@@ -512,6 +512,7 @@
   "order": {
     "add-note": "Dodaj notatke",
     "amount": "Ilość",
+    "billing-address": "",
     "cancel": "Anuluj",
     "cancel-order": "Anuluj zamówienie",
     "cancel-reason-customer-request": "Prośba klienta",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hans.json

@@ -512,6 +512,7 @@
   "order": {
     "add-note": "添加备注",
     "amount": "金额",
+    "billing-address": "",
     "cancel": "取消",
     "cancel-order": "取消订单",
     "cancel-reason-customer-request": "客户要求",

packages/admin-ui/src/lib/static/i18n-messages/zh_Hant.json

@@ -512,6 +512,7 @@
   "order": {
     "add-note": "新增備注",
     "amount": "金額",
+    "billing-address": "",
     "cancel": "取消",
     "cancel-order": "取消訂單",
     "cancel-reason-customer-request": "客户要求",

packages/common/src/generated-shop-types.ts

@@ -1340,6 +1340,7 @@ export type Mutation = {
     setOrderShippingAddress?: Maybe<Order>;
     /** Sets the billing address for this order */
     setOrderBillingAddress?: Maybe<Order>;
+    /** Sets the shipping method by id, which can be obtained with the `eligibleShippingMethods` query */
     setOrderShippingMethod?: Maybe<Order>;
     addPaymentToOrder?: Maybe<Order>;
     setCustomerForOrder?: Maybe<Order>;

packages/core/e2e/graphql/generated-e2e-shop-types.ts

@@ -1340,6 +1340,7 @@ export type Mutation = {
     setOrderShippingAddress?: Maybe<Order>;
     /** Sets the billing address for this order */
     setOrderBillingAddress?: Maybe<Order>;
+    /** Sets the shipping method by id, which can be obtained with the `eligibleShippingMethods` query */
     setOrderShippingMethod?: Maybe<Order>;
     addPaymentToOrder?: Maybe<Order>;
     setCustomerForOrder?: Maybe<Order>;