feat(admin-ui): Display Order discounts with & without tax

Relates to #749

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

@@ -1601,7 +1601,7 @@ export type Order = Node & {
    * @deprecated Use `discounts` instead
    */
   adjustments: Array<Adjustment>;
-  discounts: Array<Adjustment>;
+  discounts: Array<Discount>;
   /** An array of all coupon codes applied to the Order */
   couponCodes: Array<Scalars['String']>;
   /** Promotions applied to the order. Only gets populated after the payment process has completed. */
@@ -3949,7 +3949,16 @@ export type ShippingLine = {
   priceWithTax: Scalars['Int'];
   discountedPrice: Scalars['Int'];
   discountedPriceWithTax: Scalars['Int'];
-  discounts: Array<Adjustment>;
+  discounts: Array<Discount>;
+};
+
+export type Discount = {
+  __typename?: 'Discount';
+  adjustmentSource: Scalars['String'];
+  type: AdjustmentType;
+  description: Scalars['String'];
+  amount: Scalars['Int'];
+  amountWithTax: Scalars['Int'];
 };
 
 export type OrderItem = Node & {
@@ -4050,7 +4059,7 @@ export type OrderLine = Node & {
   lineTax: Scalars['Int'];
   /** @deprecated Use `discounts` instead */
   adjustments: Array<Adjustment>;
-  discounts: Array<Adjustment>;
+  discounts: Array<Discount>;
   taxLines: Array<TaxLine>;
   order: Order;
   customFields?: Maybe<Scalars['JSON']>;
@@ -5684,9 +5693,9 @@ export type GetFacetWithValuesQuery = { facet?: Maybe<(
     & FacetWithValuesFragment
   )> };
 
-export type AdjustmentFragment = (
-  { __typename?: 'Adjustment' }
-  & Pick<Adjustment, 'adjustmentSource' | 'amount' | 'description' | 'type'>
+export type DiscountFragment = (
+  { __typename?: 'Discount' }
+  & Pick<Discount, 'adjustmentSource' | 'amount' | 'amountWithTax' | 'description' | 'type'>
 );
 
 export type RefundFragment = (
@@ -5733,8 +5742,8 @@ export type OrderLineFragment = (
     { __typename?: 'ProductVariant' }
     & Pick<ProductVariant, 'id' | 'name' | 'sku' | 'trackInventory' | 'stockOnHand'>
   ), discounts: Array<(
-    { __typename?: 'Adjustment' }
-    & AdjustmentFragment
+    { __typename?: 'Discount' }
+    & DiscountFragment
   )>, items: Array<(
     { __typename?: 'OrderItem' }
     & Pick<OrderItem, 'id' | 'unitPrice' | 'unitPriceWithTax' | 'taxRate' | 'refundId' | 'cancelled'>
@@ -5758,8 +5767,8 @@ export type OrderDetailFragment = (
     { __typename?: 'Surcharge' }
     & Pick<Surcharge, 'id' | 'sku' | 'description' | 'price' | 'priceWithTax' | 'taxRate'>
   )>, discounts: Array<(
-    { __typename?: 'Adjustment' }
-    & AdjustmentFragment
+    { __typename?: 'Discount' }
+    & DiscountFragment
   )>, promotions: Array<(
     { __typename?: 'Promotion' }
     & Pick<Promotion, 'id' | 'couponCode'>
@@ -8682,8 +8691,8 @@ export namespace GetFacetWithValues {
   export type Facet = (NonNullable<GetFacetWithValuesQuery['facet']>);
 }
 
-export namespace Adjustment {
-  export type Fragment = AdjustmentFragment;
+export namespace Discount {
+  export type Fragment = DiscountFragment;
 }
 
 export namespace Refund {

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

@@ -2,10 +2,11 @@ import { gql } from 'apollo-angular';
 
 import { ERROR_RESULT_FRAGMENT } from './shared-definitions';
 
-export const ADJUSTMENT_FRAGMENT = gql`
-    fragment Adjustment on Adjustment {
+export const DISCOUNT_FRAGMENT = gql`
+    fragment Discount on Discount {
         adjustmentSource
         amount
+        amountWithTax
         description
         type
     }
@@ -91,7 +92,7 @@ export const ORDER_LINE_FRAGMENT = gql`
             stockOnHand
         }
         discounts {
-            ...Adjustment
+            ...Discount
         }
         unitPrice
         unitPriceWithTax
@@ -143,7 +144,7 @@ export const ORDER_DETAIL_FRAGMENT = gql`
             taxRate
         }
         discounts {
-            ...Adjustment
+            ...Discount
         }
         promotions {
             id
@@ -229,7 +230,7 @@ export const ORDER_DETAIL_FRAGMENT = gql`
             }
         }
     }
-    ${ADJUSTMENT_FRAGMENT}
+    ${DISCOUNT_FRAGMENT}
     ${ORDER_ADDRESS_FRAGMENT}
     ${FULFILLMENT_FRAGMENT}
     ${ORDER_LINE_FRAGMENT}

packages/admin-ui/src/lib/order/src/components/order-table/order-table-mixin.scss

@@ -34,13 +34,4 @@
         cursor: pointer;
         text-transform: lowercase;
     }
-
-    .line-promotion {
-        display: flex;
-        justify-content: space-between;
-        padding: 6px 12px;
-        .promotion-amount {
-            margin-left: 12px;
-        }
-    }
 }

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

@@ -90,9 +90,12 @@
                             <div class="line-promotion" *ngFor="let discount of discounts">
                                 <a class="promotion-name" [routerLink]="getPromotionLink(discount)">{{
                                     discount.description
-                                }}</a>
+                                    }}</a>
                                 <div class="promotion-amount">
-                                    {{ discount.amount | localeCurrency: order.currencyCode }}
+                                    {{ discount.amountWithTax | localeCurrency: order.currencyCode }}
+                                    <div class="net-price" [title]="'order.net-price' | translate">
+                                        {{ discount.amount | localeCurrency: order.currencyCode }}
+                                    </div>
                                 </div>
                             </div>
                         </vdr-dropdown-menu>
@@ -122,7 +125,10 @@
             </td>
             <ng-container *ngIf="showElided"><td></td></ng-container>
             <td class="clr-align-middle">
-                {{ discount.amount | localeCurrency: order.currencyCode }}
+                {{ discount.amountWithTax | localeCurrency: order.currencyCode }}
+                <div class="net-price" [title]="'order.net-price' | translate">
+                    {{ discount.amount | localeCurrency: order.currencyCode }}
+                </div>
             </td>
         </tr>
         <tr class="sub-total">

packages/admin-ui/src/lib/order/src/components/order-table/order-table.component.scss

@@ -12,3 +12,16 @@
     cursor: pointer;
     color: var(--color-primary-600);
 }
+
+::ng-deep .line-promotion {
+     display: flex;
+     justify-content: space-between;
+     padding: 6px 12px;
+     .promotion-amount {
+         margin-left: 12px;
+     }
+    .net-price {
+        font-size: 11px;
+        color: var(--color-text-300);
+    }
+}