feat(admin-ui): Display order tax summary, update to latest Order API

Relates to #573
vendure-ecommerce · Dec 4, 2020 · 9b8e7d4 · 9b8e7d4
1 parent efe640c
commit 9b8e7d4
Show file tree

Hide file tree

Showing 13 changed files with 128 additions and 61 deletions.
diff --git a/packages/admin-ui/i18n-coverage.json b/packages/admin-ui/i18n-coverage.json
@@ -1,46 +1,46 @@
 {
-  "generatedOn": "2020-11-24T15:53:35.931Z",
-  "lastCommit": "799f30643a3e221e453246534d844bf448b046e5",
+  "generatedOn": "2020-12-04T13:17:32.104Z",
+  "lastCommit": "efe640c5011072eba4471e431dc2dc503973802b",
   "translationStatus": {
     "cs": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 688,
-      "percentage": 97
+      "percentage": 96
     },
     "de": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 597,
       "percentage": 84
     },
     "en": {
-      "tokenCount": 708,
-      "translatedCount": 703,
+      "tokenCount": 713,
+      "translatedCount": 708,
       "percentage": 99
     },
     "es": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 455,
       "percentage": 64
     },
     "pl": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 552,
-      "percentage": 78
+      "percentage": 77
     },
     "pt_BR": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 643,
-      "percentage": 91
+      "percentage": 90
     },
     "zh_Hans": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 536,
-      "percentage": 76
+      "percentage": 75
     },
     "zh_Hant": {
-      "tokenCount": 708,
+      "tokenCount": 713,
       "translatedCount": 536,
-      "percentage": 76
+      "percentage": 75
     }
   }
 }
diff --git a/packages/admin-ui/src/lib/core/src/common/generated-types.ts b/packages/admin-ui/src/lib/core/src/common/generated-types.ts
@@ -5259,14 +5259,14 @@ export type FulfillmentFragment = (
 
 export type OrderLineFragment = (
   { __typename?: 'OrderLine' }
-  & Pick<OrderLine, 'id' | 'unitPrice' | 'unitPriceWithTax' | 'quantity' | 'linePrice' | 'lineTax' | 'linePriceWithTax'>
+  & Pick<OrderLine, 'id' | 'unitPrice' | 'unitPriceWithTax' | 'quantity' | 'linePrice' | 'lineTax' | 'linePriceWithTax' | 'discountedLinePrice' | 'discountedLinePriceWithTax'>
   & { featuredAsset?: Maybe<(
     { __typename?: 'Asset' }
     & Pick<Asset, 'preview'>
   )>, productVariant: (
     { __typename?: 'ProductVariant' }
     & Pick<ProductVariant, 'id' | 'name' | 'sku' | 'trackInventory' | 'stockOnHand'>
-  ), adjustments: Array<(
+  ), discounts: Array<(
     { __typename?: 'Adjustment' }
     & AdjustmentFragment
   )>, items: Array<(
@@ -5288,7 +5288,7 @@ export type OrderDetailFragment = (
   )>, lines: Array<(
     { __typename?: 'OrderLine' }
     & OrderLineFragment
-  )>, adjustments: Array<(
+  )>, discounts: Array<(
     { __typename?: 'Adjustment' }
     & AdjustmentFragment
   )>, promotions: Array<(
@@ -5297,6 +5297,9 @@ export type OrderDetailFragment = (
   )>, shippingMethod?: Maybe<(
     { __typename?: 'ShippingMethod' }
     & Pick<ShippingMethod, 'id' | 'code' | 'name' | 'fulfillmentHandlerCode' | 'description'>
+  )>, taxSummary: Array<(
+    { __typename?: 'OrderTaxSummary' }
+    & Pick<OrderTaxSummary, 'taxBase' | 'taxRate' | 'taxTotal'>
   )>, shippingAddress?: Maybe<(
     { __typename?: 'OrderAddress' }
     & OrderAddressFragment
@@ -7838,7 +7841,7 @@ export namespace OrderLine {
   export type Fragment = OrderLineFragment;
   export type FeaturedAsset = (NonNullable<OrderLineFragment['featuredAsset']>);
   export type ProductVariant = (NonNullable<OrderLineFragment['productVariant']>);
-  export type Adjustments = NonNullable<(NonNullable<OrderLineFragment['adjustments']>)[number]>;
+  export type Discounts = NonNullable<(NonNullable<OrderLineFragment['discounts']>)[number]>;
   export type Items = NonNullable<(NonNullable<OrderLineFragment['items']>)[number]>;
   export type Fulfillment = (NonNullable<NonNullable<(NonNullable<OrderLineFragment['items']>)[number]>['fulfillment']>);
 }
@@ -7847,9 +7850,10 @@ export namespace OrderDetail {
   export type Fragment = OrderDetailFragment;
   export type Customer = (NonNullable<OrderDetailFragment['customer']>);
   export type Lines = NonNullable<(NonNullable<OrderDetailFragment['lines']>)[number]>;
-  export type Adjustments = NonNullable<(NonNullable<OrderDetailFragment['adjustments']>)[number]>;
+  export type Discounts = NonNullable<(NonNullable<OrderDetailFragment['discounts']>)[number]>;
   export type Promotions = NonNullable<(NonNullable<OrderDetailFragment['promotions']>)[number]>;
   export type ShippingMethod = (NonNullable<OrderDetailFragment['shippingMethod']>);
+  export type TaxSummary = NonNullable<(NonNullable<OrderDetailFragment['taxSummary']>)[number]>;
   export type ShippingAddress = (NonNullable<OrderDetailFragment['shippingAddress']>);
   export type BillingAddress = (NonNullable<OrderDetailFragment['billingAddress']>);
   export type Payments = NonNullable<(NonNullable<OrderDetailFragment['payments']>)[number]>;

diff --git a/packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts b/packages/admin-ui/src/lib/core/src/data/definitions/order-definitions.ts
@@ -84,7 +84,7 @@ export const ORDER_LINE_FRAGMENT = gql`
             trackInventory
             stockOnHand
         }
-        adjustments {
+        discounts {
             ...Adjustment
         }
         unitPrice
@@ -104,6 +104,8 @@ export const ORDER_LINE_FRAGMENT = gql`
         linePrice
         lineTax
         linePriceWithTax
+        discountedLinePrice
+        discountedLinePriceWithTax
     }
 `;
 
@@ -124,7 +126,7 @@ export const ORDER_DETAIL_FRAGMENT = gql`
         lines {
             ...OrderLine
         }
-        adjustments {
+        discounts {
             ...Adjustment
         }
         promotions {
@@ -145,6 +147,11 @@ export const ORDER_DETAIL_FRAGMENT = gql`
             fulfillmentHandlerCode
             description
         }
+        taxSummary {
+            taxBase
+            taxRate
+            taxTotal
+        }
         shippingAddress {
             ...OrderAddress
         }
@@ -179,7 +186,6 @@ export const ORDER_DETAIL_FRAGMENT = gql`
         fulfillments {
             ...Fulfillment
         }
-        total
     }
     ${ADJUSTMENT_FRAGMENT}
     ${ORDER_ADDRESS_FRAGMENT}

diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.html
@@ -16,11 +16,7 @@
 
     <vdr-ab-right>
         <vdr-action-bar-items locationId="order-detail"></vdr-action-bar-items>
-        <button
-            class="btn btn-primary"
-            (click)="fulfillOrder()"
-            [disabled]="!canAddFulfillment(order)"
-        >
+        <button class="btn btn-primary" (click)="fulfillOrder()" [disabled]="!canAddFulfillment(order)">
             {{ 'order.fulfill-order' | translate }}
         </button>
         <vdr-dropdown>
@@ -36,9 +32,7 @@
                     (click)="cancelOrRefund(order)"
                 >
                     <clr-icon shape="error-standard" class="is-error"></clr-icon>
-                    <ng-container
-                        *ngIf="orderHasSettledPayments(order); else cancelOnly"
-                    >
+                    <ng-container *ngIf="orderHasSettledPayments(order); else cancelOnly">
                         {{ 'order.refund-and-cancel-order' | translate }}
                     </ng-container>
                     <ng-template #cancelOnly>
@@ -49,7 +43,10 @@
                     <div class="dropdown-divider"></div>
                     <button type="button" class="btn" vdrDropdownItem (click)="transitionToState(nextState)">
                         <clr-icon shape="step-forward-2"></clr-icon>
-                        {{ 'order.transition-to-state' | translate: { state: (nextState | stateI18nToken | translate) } }}
+                        {{
+                            'order.transition-to-state'
+                                | translate: { state: (nextState | stateI18nToken | translate) }
+                        }}
                     </button>
                 </ng-container>
             </vdr-dropdown-menu>
@@ -96,6 +93,7 @@
                         <th>{{ 'order.total' | translate }}</th>
                     </tr>
                 </thead>
+                <tbody>
                 <tr
                     *ngFor="let line of order.lines"
                     class="order-line"
@@ -152,55 +150,55 @@
                             {{ line.linePrice / 100 | currency: order.currencyCode }}
                         </div>
 
-                        <ng-container *ngIf="getLinePromotions(line) as promotions">
-                            <vdr-dropdown *ngIf="promotions.length">
+                        <ng-container *ngIf="getLineDiscounts(line) as discounts">
+                            <vdr-dropdown *ngIf="discounts.length">
                                 <div class="promotions-label" vdrDropdownTrigger>
                                     {{ 'order.promotions-applied' | translate }}
                                 </div>
                                 <vdr-dropdown-menu>
                                     <div
                                         class="line-promotion"
-                                        *ngFor="let promotion of getLinePromotions(line)"
+                                        *ngFor="let discount of discounts"
                                     >
                                         <a
                                             class="promotion-name"
-                                            [routerLink]="getPromotionLink(promotion)"
-                                            >{{ promotion.description }}</a
+                                            [routerLink]="getPromotionLink(discount)"
+                                            >{{ discount.description }}</a
                                         >
                                         <div class="promotion-amount">
-                                            {{ promotion.amount / 100 | currency: order.currencyCode }}
+                                            {{ discount.amount / 100 | currency: order.currencyCode }}
                                         </div>
                                     </div>
                                 </vdr-dropdown-menu>
                             </vdr-dropdown>
                         </ng-container>
                     </td>
                 </tr>
-                <tr class="sub-total">
-                    <td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
-                    <td></td>
-                    <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
-                    <ng-container *ngIf="showElided"><td></td></ng-container>
-                    <td class="clr-align-middle">
-                        {{ order.subTotal / 100 | currency: order.currencyCode }}
-                        <div class="net-price" [title]="'order.net-price' | translate">
-                            {{ order.subTotalBeforeTax / 100 | currency: order.currencyCode }}
-                        </div>
-                    </td>
-                </tr>
-                <tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
+                <tr class="order-ajustment" *ngFor="let discount of order.discounts">
                     <td
                         [attr.colspan]="5 + visibleOrderLineCustomFields.length"
                         class="left clr-align-middle"
                     >
-                        <a [routerLink]="getPromotionLink(adjustment)">{{ adjustment.description }}</a>
-                        <vdr-chip *ngIf="getCouponCodeForAdjustment(order, adjustment) as couponCode">{{
+                        <a [routerLink]="getPromotionLink(discount)">{{ discount.description }}</a>
+                        <vdr-chip *ngIf="getCouponCodeForAdjustment(order, discount) as couponCode">{{
                             couponCode
                         }}</vdr-chip>
                     </td>
                     <ng-container *ngIf="showElided"><td></td></ng-container>
                     <td class="clr-align-middle">
-                        {{ adjustment.amount / 100 | currency: order.currencyCode }}
+                        {{ discount.amount / 100 | currency: order.currencyCode }}
+                    </td>
+                </tr>
+                <tr class="sub-total">
+                    <td class="left clr-align-middle">{{ 'order.sub-total' | translate }}</td>
+                    <td></td>
+                    <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
+                    <ng-container *ngIf="showElided"><td></td></ng-container>
+                    <td class="clr-align-middle">
+                        {{ order.subTotalWithTax / 100 | currency: order.currencyCode }}
+                        <div class="net-price" [title]="'order.net-price' | translate">
+                            {{ order.subTotal / 100 | currency: order.currencyCode }}
+                        </div>
                     </td>
                 </tr>
                 <tr class="shipping">
@@ -221,12 +219,31 @@
                     <td [attr.colspan]="3 + visibleOrderLineCustomFields.length"></td>
                     <ng-container *ngIf="showElided"><td></td></ng-container>
                     <td class="clr-align-middle">
-                        {{ order.total / 100 | currency: order.currencyCode }}
+                        {{ order.totalWithTax / 100 | currency: order.currencyCode }}
                         <div class="net-price" [title]="'order.net-price' | translate">
-                            {{ order.totalBeforeTax / 100 | currency: order.currencyCode }}
+                            {{ order.total / 100 | currency: order.currencyCode }}
                         </div>
                     </td>
                 </tr>
+                </tbody>
+            </table>
+
+            <h4>{{ 'order.tax-summary' | translate }}</h4>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>{{ 'order.tax-rate' | translate }}</th>
+                    <th>{{ 'order.tax-base' | translate }}</th>
+                    <th>{{ 'order.tax-total' | translate }}</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr *ngFor="let row of order.taxSummary">
+                    <td>{{ row.taxRate / 100 | percent }}</td>
+                    <td>{{ row.taxBase / 100 | currency: order.currencyCode }}</td>
+                    <td>{{ row.taxTotal / 100 | currency: order.currencyCode }}</td>
+                </tr>
+                </tbody>
             </table>
 
             <vdr-order-history

diff --git a/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts b/packages/admin-ui/src/lib/order/src/components/order-detail/order-detail.component.ts
@@ -109,11 +109,11 @@ export class OrderDetailComponent
         this.orderLineCustomFieldsVisible = !this.orderLineCustomFieldsVisible;
     }
 
-    getLinePromotions(line: OrderDetail.Lines) {
-        return line.adjustments.filter(a => a.type === AdjustmentType.PROMOTION);
+    getLineDiscounts(line: OrderDetail.Lines) {
+        return line.discounts.filter(a => a.type === AdjustmentType.PROMOTION);
     }
 
-    getPromotionLink(promotion: OrderDetail.Adjustments): any[] {
+    getPromotionLink(promotion: OrderDetail.Discounts): any[] {
         const id = promotion.adjustmentSource.split(':')[1];
         return ['/marketing', 'promotions', id];
     }
@@ -160,7 +160,7 @@ export class OrderDetailComponent
 
     getCouponCodeForAdjustment(
         order: OrderDetail.Fragment,
-        promotionAdjustment: OrderDetail.Adjustments,
+        promotionAdjustment: OrderDetail.Discounts,
     ): string | undefined {
         const id = promotionAdjustment.adjustmentSource.split(':')[1];
         const promotion = order.promotions.find(p => p.id === id);

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/cs.json b/packages/admin-ui/src/lib/static/i18n-messages/cs.json
@@ -641,6 +641,10 @@
     "state": "Stav",
     "sub-total": "Mezisoučet",
     "successfully-updated-fulfillment": "Zpracování aktualizováno",
+    "tax-base": "",
+    "tax-rate": "",
+    "tax-summary": "",
+    "tax-total": "",
     "total": "Celkem",
     "tracking-code": "Kód sledování zásilky",
     "transaction-id": "ID transakce",
@@ -674,6 +678,7 @@
     "email-address": "E-mailová adresa",
     "filter-by-member-name": "Filtrovat dle země",
     "first-name": "Jméno",
+    "fulfillment-handler": "",
     "global-out-of-stock-threshold": "Globální prahová hodnota pro vyprodání zásob",
     "global-out-of-stock-threshold-tooltip": "Nastaví hodnotu skladu, při které je tato varianta považována za vyprodanou. Použití záporné hodnoty umožňuje objednávat \"na objednávku\". Lze přepsat u jednotlivých variant produktu.",
     "last-name": "Příjmení",

diff --git a/packages/admin-ui/src/lib/static/i18n-messages/de.json b/packages/admin-ui/src/lib/static/i18n-messages/de.json
@@ -641,6 +641,10 @@
     "state": "Status",
     "sub-total": "Zwischensumme",
     "successfully-updated-fulfillment": "",
+    "tax-base": "",
+    "tax-rate": "",
+    "tax-summary": "",
+    "tax-total": "",
     "total": "Gesamtsumme",
     "tracking-code": "Sendungsverfolgungscode",
     "transaction-id": "Transaktions-ID",
@@ -674,6 +678,7 @@
     "email-address": "E-Mail-Adresse",
     "filter-by-member-name": "Nach Land filtern",
     "first-name": "Vorname",
+    "fulfillment-handler": "",
     "global-out-of-stock-threshold": "",
     "global-out-of-stock-threshold-tooltip": "",
     "last-name": "Nachname",