feat(admin-ui): Display payments in OrderDetailComponent

admin-ui/src/app/data/definitions/order-definitions.ts

@@ -46,6 +46,7 @@ export const ORDER_WITH_LINES_FRAGMENT = gql`
         updatedAt
         code
         state
+        active
         customer {
             id
             firstName
@@ -84,6 +85,13 @@ export const ORDER_WITH_LINES_FRAGMENT = gql`
         shippingAddress {
             ...ShippingAddress
         }
+        payments {
+            id
+            amount
+            method
+            state
+            metadata
+        }
         total
     }
     ${ADJUSTMENT_FRAGMENT}

admin-ui/src/app/order/components/order-detail/order-detail.component.html

@@ -51,6 +51,42 @@
                 </tbody>
             </table>
         </div>
+        <div class="clr-col-md-4" *ngIf="order.payments && order.payments.length">
+            <table class="table table-vertical">
+                <tbody>
+                <ng-container *ngFor="let payment of order.payments">
+                    <tr>
+                        <th>{{ 'order.payment-method' | translate }}</th>
+                        <td>
+                            {{ payment.method }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>{{ 'order.amount' | translate }}</th>
+                        <td>
+                            {{ payment.amount }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>{{ 'order.transaction-id' | translate }}</th>
+                        <td>
+                            {{ payment.transactionId }}
+                        </td>
+                    </tr>
+                    <tr>
+                        <th>{{ 'order.payment-metadata' | translate }}</th>
+                        <td>
+                            <ul>
+                                <li *ngFor="let entry of getPaymentMetadata(payment)">
+                                    <strong>{{ entry[0] }}</strong>: {{ entry[1] }}
+                                </li>
+                            </ul>
+                        </td>
+                    </tr>
+                </ng-container>
+                </tbody>
+            </table>
+        </div>
     </div>
 
 

admin-ui/src/app/order/components/order-detail/order-detail.component.ts

@@ -32,6 +32,10 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderWithLines.Fra
         return Object.values(shippingAddress).filter(val => val !== 'ShippingAddress');
     }
 
+    getPaymentMetadata(payment: OrderWithLines.Payments) {
+        return Object.entries(payment.metadata);
+    }
+
     protected setFormValues(entity: Order.Fragment): void {
         // empty
     }

admin-ui/src/i18n-messages/en.json

@@ -152,9 +152,12 @@
     "tax-rates": "Tax Rates"
   },
   "order": {
+    "amount": "Amount",
     "create-new-order": "Create new order",
     "customer": "Customer",
     "order-code": "Order code",
+    "payment-metadata": "Payment metadata",
+    "payment-method": "Payment method",
     "product-name": "Product name",
     "product-sku": "SKU",
     "quantity": "Quantity",
@@ -163,6 +166,7 @@
     "state": "State",
     "sub-total": "Sub total",
     "total": "Total",
+    "transaction-id": "Transaction ID",
     "unit-price": "Unit price"
   },
   "settings": {

shared/generated-types.ts

@@ -5792,6 +5792,7 @@ export namespace OrderWithLines {
         shipping: number;
         shippingMethod?: string | null;
         shippingAddress?: ShippingAddress | null;
+        payments?: Payments[] | null;
         total: number;
     };
 
@@ -5838,6 +5839,15 @@ export namespace OrderWithLines {
     export type Adjustments = Adjustment.Fragment;
 
     export type ShippingAddress = ShippingAddress.Fragment;
+
+    export type Payments = {
+        __typename?: 'Payment';
+        id: string;
+        amount: number;
+        method: string;
+        state: string;
+        metadata?: Json | null;
+    };
 }
 
 export namespace Asset {