feat(admin-ui): Display coupon code entries in order history

packages/admin-ui/src/app/common/generated-types.ts

@@ -1206,7 +1206,9 @@ export enum HistoryEntryType {
   ORDER_FULLFILLMENT = 'ORDER_FULLFILLMENT',
   ORDER_CANCELLATION = 'ORDER_CANCELLATION',
   ORDER_REFUND_TRANSITION = 'ORDER_REFUND_TRANSITION',
-  ORDER_NOTE = 'ORDER_NOTE'
+  ORDER_NOTE = 'ORDER_NOTE',
+  ORDER_COUPON_APPLIED = 'ORDER_COUPON_APPLIED',
+  ORDER_COUPON_REMOVED = 'ORDER_COUPON_REMOVED'
 }
 
 export type ImportInfo = {
@@ -3810,7 +3812,7 @@ export type OrderFragment = ({ __typename?: 'Order' } & Pick<Order, 'id' | 'crea
 
 export type FulfillmentFragment = ({ __typename?: 'Fulfillment' } & Pick<Fulfillment, 'id' | 'createdAt' | 'updatedAt' | 'method' | 'trackingCode'>);
 
-export type OrderDetailFragment = ({ __typename?: 'Order' } & Pick<Order, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'state' | 'active' | 'subTotal' | 'subTotalBeforeTax' | 'totalBeforeTax' | 'currencyCode' | 'shipping' | 'shippingWithTax' | 'total'> & { customer: Maybe<({ __typename?: 'Customer' } & Pick<Customer, 'id' | 'firstName' | 'lastName'>)>, lines: Array<({ __typename?: 'OrderLine' } & Pick<OrderLine, 'id' | 'unitPrice' | 'unitPriceWithTax' | 'quantity' | 'totalPrice'> & { featuredAsset: Maybe<({ __typename?: 'Asset' } & Pick<Asset, 'preview'>)>, productVariant: ({ __typename?: 'ProductVariant' } & Pick<ProductVariant, 'id' | 'name' | 'sku'>), adjustments: Array<({ __typename?: 'Adjustment' } & AdjustmentFragment)>, items: Array<({ __typename?: 'OrderItem' } & Pick<OrderItem, 'id' | 'unitPrice' | 'unitPriceIncludesTax' | 'unitPriceWithTax' | 'taxRate' | 'refundId' | 'cancelled'> & { fulfillment: Maybe<({ __typename?: 'Fulfillment' } & FulfillmentFragment)> })> })>, adjustments: Array<({ __typename?: 'Adjustment' } & AdjustmentFragment)>, shippingMethod: Maybe<({ __typename?: 'ShippingMethod' } & Pick<ShippingMethod, 'id' | 'code' | 'description'>)>, shippingAddress: Maybe<({ __typename?: 'OrderAddress' } & ShippingAddressFragment)>, payments: Maybe<Array<({ __typename?: 'Payment' } & Pick<Payment, 'id' | 'createdAt' | 'transactionId' | 'amount' | 'method' | 'state' | 'metadata'> & { refunds: Array<({ __typename?: 'Refund' } & Pick<Refund, 'id' | 'createdAt' | 'state' | 'items' | 'adjustment' | 'total' | 'paymentId' | 'reason' | 'transactionId' | 'method' | 'metadata'> & { orderItems: Array<({ __typename?: 'OrderItem' } & Pick<OrderItem, 'id'>)> })> })>>, fulfillments: Maybe<Array<({ __typename?: 'Fulfillment' } & FulfillmentFragment)>> });
+export type OrderDetailFragment = ({ __typename?: 'Order' } & Pick<Order, 'id' | 'createdAt' | 'updatedAt' | 'code' | 'state' | 'active' | 'subTotal' | 'subTotalBeforeTax' | 'totalBeforeTax' | 'currencyCode' | 'shipping' | 'shippingWithTax' | 'total'> & { customer: Maybe<({ __typename?: 'Customer' } & Pick<Customer, 'id' | 'firstName' | 'lastName'>)>, lines: Array<({ __typename?: 'OrderLine' } & Pick<OrderLine, 'id' | 'unitPrice' | 'unitPriceWithTax' | 'quantity' | 'totalPrice'> & { featuredAsset: Maybe<({ __typename?: 'Asset' } & Pick<Asset, 'preview'>)>, productVariant: ({ __typename?: 'ProductVariant' } & Pick<ProductVariant, 'id' | 'name' | 'sku'>), adjustments: Array<({ __typename?: 'Adjustment' } & AdjustmentFragment)>, items: Array<({ __typename?: 'OrderItem' } & Pick<OrderItem, 'id' | 'unitPrice' | 'unitPriceIncludesTax' | 'unitPriceWithTax' | 'taxRate' | 'refundId' | 'cancelled'> & { fulfillment: Maybe<({ __typename?: 'Fulfillment' } & FulfillmentFragment)> })> })>, adjustments: Array<({ __typename?: 'Adjustment' } & AdjustmentFragment)>, promotions: Array<({ __typename?: 'Promotion' } & Pick<Promotion, 'id' | 'couponCode'>)>, shippingMethod: Maybe<({ __typename?: 'ShippingMethod' } & Pick<ShippingMethod, 'id' | 'code' | 'description'>)>, shippingAddress: Maybe<({ __typename?: 'OrderAddress' } & ShippingAddressFragment)>, payments: Maybe<Array<({ __typename?: 'Payment' } & Pick<Payment, 'id' | 'createdAt' | 'transactionId' | 'amount' | 'method' | 'state' | 'metadata'> & { refunds: Array<({ __typename?: 'Refund' } & Pick<Refund, 'id' | 'createdAt' | 'state' | 'items' | 'adjustment' | 'total' | 'paymentId' | 'reason' | 'transactionId' | 'method' | 'metadata'> & { orderItems: Array<({ __typename?: 'OrderItem' } & Pick<OrderItem, 'id'>)> })> })>>, fulfillments: Maybe<Array<({ __typename?: 'Fulfillment' } & FulfillmentFragment)>> });
 
 export type GetOrderListQueryVariables = {
   options?: Maybe<OrderListOptions>
@@ -4729,6 +4731,7 @@ export namespace OrderDetail {
   export type Items = (NonNullable<(NonNullable<OrderDetailFragment['lines'][0]>)['items'][0]>);
   export type Fulfillment = FulfillmentFragment;
   export type _Adjustments = AdjustmentFragment;
+  export type Promotions = (NonNullable<OrderDetailFragment['promotions'][0]>);
   export type ShippingMethod = (NonNullable<OrderDetailFragment['shippingMethod']>);
   export type ShippingAddress = ShippingAddressFragment;
   export type Payments = (NonNullable<(NonNullable<OrderDetailFragment['payments']>)[0]>);

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

@@ -108,6 +108,10 @@ export const ORDER_DETAIL_FRAGMENT = gql`
         adjustments {
             ...Adjustment
         }
+        promotions {
+            id
+            couponCode
+        }
         subTotal
         subTotalBeforeTax
         totalBeforeTax

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

@@ -99,7 +99,7 @@
                     <td></td>
                     <td></td>
                     <td></td>
-                    <td>
+                    <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>
@@ -107,14 +107,15 @@
                 <tr class="order-ajustment" *ngFor="let adjustment of order.adjustments">
                     <td colspan="5" class="left clr-align-middle">
                         <a [routerLink]="getPromotionLink(adjustment)">{{ adjustment.description }}</a>
+                        <vdr-chip *ngIf="getCouponCodeForAdjustment(order, adjustment) as couponCode">{{ couponCode }}</vdr-chip>
                     </td>
-                    <td>{{ adjustment.amount / 100 | currency: order.currencyCode }}</td>
+                    <td class="clr-align-middle">{{ adjustment.amount / 100 | currency: order.currencyCode }}</td>
                 </tr>
                 <tr class="shipping">
                     <td class="left clr-align-middle">{{ 'order.shipping' | translate }}</td>
                     <td class="clr-align-middle">{{ order.shippingMethod?.description }}</td>
                     <td colspan="3"></td>
-                    <td>
+                    <td class="clr-align-middle">
                         {{ order.shippingWithTax / 100 | currency: order.currencyCode }}
                         <div class="net-price" [title]="'order.net-price' | translate">{{ order.shipping / 100 | currency: order.currencyCode }}</div>
                     </td>
@@ -125,7 +126,7 @@
                     <td></td>
                     <td></td>
                     <td></td>
-                    <td>
+                    <td class="clr-align-middle">
                         {{ order.total / 100 | currency: order.currencyCode }}
                         <div class="net-price" [title]="'order.net-price' | translate">{{ order.totalBeforeTax / 100 | currency: order.currencyCode }}</div>
                     </td>

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

@@ -78,6 +78,17 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
         return ['/marketing', 'promotions', id];
     }
 
+    getCouponCodeForAdjustment(
+        order: OrderDetail.Fragment,
+        promotionAdjustment: OrderDetail.Adjustments,
+    ): string | undefined {
+        const id = promotionAdjustment.adjustmentSource.split(':')[1];
+        const promotion = order.promotions.find(p => p.id === id);
+        if (promotion) {
+            return promotion.couponCode || undefined;
+        }
+    }
+
     getShippingAddressLines(shippingAddress?: { [key: string]: string }): string[] {
         if (!shippingAddress) {
             return [];

packages/admin-ui/src/app/order/components/order-history/order-history.component.html

@@ -129,6 +129,20 @@
                     <div class="note-text">{{ entry.data.note }}</div>
                 </div>
             </ng-container>
+            <ng-container *ngSwitchCase="type.ORDER_COUPON_APPLIED">
+                {{ 'order.history-coupon-code-applied' | translate }}:
+                <vdr-chip>
+                    <a [routerLink]="['/marketing', 'promotions', entry.data.promotionId]">{{
+                        entry.data.couponCode
+                    }}</a>
+                </vdr-chip>
+            </ng-container>
+            <ng-container *ngSwitchCase="type.ORDER_COUPON_REMOVED">
+                {{ 'order.history-coupon-code-removed' | translate }}:
+                <vdr-chip
+                    ><span class="cancelled-coupon-code">{{ entry.data.couponCode }}</span></vdr-chip
+                >
+            </ng-container>
         </div>
     </div>
 </div>

packages/admin-ui/src/app/order/components/order-history/order-history.component.scss

@@ -143,3 +143,6 @@ textarea.note {
     border-radius: 3px;
     margin-right: 6px;
 }
+.cancelled-coupon-code {
+    text-decoration: line-through;
+}

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

@@ -431,6 +431,8 @@
     "fulfill-order": "Fulfill order",
     "fulfillment": "Fulfillment",
     "fulfillment-method": "Fulfillment method",
+    "history-coupon-code-applied": "Coupon code applied",
+    "history-coupon-code-removed": "Coupon code removed",
     "history-fulfillment-created": "Fulfillment created",
     "history-items-cancelled": "{count} {count, plural, one {item} other {items}} cancelled",
     "history-order-cancelled": "Order cancelled",