feat(admin-ui): Add visibility to Order notes

Closes #180

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

@@ -1171,6 +1171,7 @@ export type HistoryEntry = Node & {
   id: Scalars['ID'],
   createdAt: Scalars['DateTime'],
   updatedAt: Scalars['DateTime'],
+  isPublic: Scalars['Boolean'],
   type: HistoryEntryType,
   administrator?: Maybe<Administrator>,
   data: Scalars['JSON'],
@@ -1179,6 +1180,7 @@ export type HistoryEntry = Node & {
 export type HistoryEntryFilterParameter = {
   createdAt?: Maybe<DateOperators>,
   updatedAt?: Maybe<DateOperators>,
+  isPublic?: Maybe<BooleanOperators>,
   type?: Maybe<StringOperators>,
 };
 

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

@@ -241,6 +241,7 @@ export const GET_ORDER_HISTORY = gql`
                     id
                     type
                     createdAt
+                    isPublic
                     administrator {
                         id
                         firstName

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

@@ -178,11 +178,13 @@ export class OrderDetailComponent extends BaseDetailComponent<OrderDetail.Fragme
             });
     }
 
-    addNote(note: string) {
+    addNote(event: { note: string; isPublic: boolean }) {
+        const { note, isPublic } = event;
         this.dataService.order
             .addNoteToOrder({
                 id: this.id,
                 note,
+                isPublic,
             })
             .pipe(switchMap(result => this.refetchOrder(result)))
             .subscribe(result => {

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

@@ -6,11 +6,25 @@
                 <clr-icon shape="note" size="24" class="compose-note"></clr-icon>
             </div>
         </div>
-        <div class="entry-body note-entry">
-            <textarea [(ngModel)]="note" name="note" class="note"></textarea>
-            <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">
-                {{ 'order.add-note' | translate }}
-            </button>
+        <div class="entry-body">
+            <div class="note-entry">
+                <textarea [(ngModel)]="note" name="note" class="note"></textarea>
+                <button class="btn btn-secondary" [disabled]="!note" (click)="addNoteToOrder()">
+                    {{ 'order.add-note' | translate }}
+                </button>
+            </div>
+            <div class="visibility-select">
+                <clr-checkbox-wrapper>
+                    <input type="checkbox" clrCheckbox [(ngModel)]="noteIsPrivate" />
+                    <label>{{ 'order.note-is-private' | translate }}</label>
+                </clr-checkbox-wrapper>
+                <span *ngIf="noteIsPrivate" class="private">
+                    {{ 'order.note-only-visible-to-administrators' | translate }}
+                </span>
+                <span *ngIf="!noteIsPrivate" class="public">
+                    {{ 'order.note-visible-to-customer' | translate }}
+                </span>
+            </div>
         </div>
     </div>
     <div
@@ -64,8 +78,8 @@
                 </div>
                 <ng-template [ngIf]="entry.data.to !== 'Cancelled' && entry.data.to !== 'Fulfilled'">
                     {{
-                        'order.history-order-transition'
-                            | translate: { from: entry.data.from, to: entry.data.to }
+                    'order.history-order-transition'
+                        | translate: { from: entry.data.from, to: entry.data.to }
                     }}
                 </ng-template>
             </ng-container>
@@ -87,16 +101,16 @@
                 </div>
                 <ng-template #regularPaymentTransition>
                     {{
-                        'order.history-payment-transition'
-                            | translate
-                                : { from: entry.data.from, to: entry.data.to, id: entry.data.paymentId }
+                    'order.history-payment-transition'
+                        | translate
+                        : { from: entry.data.from, to: entry.data.to, id: entry.data.paymentId }
                     }}
                 </ng-template>
             </ng-container>
             <ng-container *ngSwitchCase="type.ORDER_REFUND_TRANSITION">
                 {{
-                    'order.history-refund-transition'
-                        | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }
+                'order.history-refund-transition'
+                    | translate: { from: entry.data.from, to: entry.data.to, id: entry.data.refundId }
                 }}
             </ng-container>
             <ng-container *ngSwitchCase="type.ORDER_CANCELLATION">
@@ -126,7 +140,11 @@
             </ng-container>
             <ng-container *ngSwitchCase="type.ORDER_NOTE">
                 <div class="featured-entry">
-                    <div class="note-text">{{ entry.data.note }}</div>
+                    <div class="note-text">
+                        <span *ngIf="entry.isPublic" class="note-visibility public">{{ 'common.public' | translate }}</span>
+                        <span *ngIf="!entry.isPublic" class="note-visibility private">{{ 'common.private' | translate }}</span>
+                        {{ entry.data.note }}
+                    </div>
                 </div>
             </ng-container>
             <ng-container *ngSwitchCase="type.ORDER_COUPON_APPLIED">
@@ -134,13 +152,13 @@
                 <vdr-chip>
                     <a [routerLink]="['/marketing', 'promotions', entry.data.promotionId]">{{
                         entry.data.couponCode
-                    }}</a>
+                        }}</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
+                ><span class="cancelled-coupon-code">{{ entry.data.couponCode }}</span></vdr-chip
                 >
             </ng-container>
         </div>

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

@@ -132,11 +132,26 @@
 
 .note-entry {
     display: flex;
+    align-items: center;
+    .note {
+        flex: 1;
+    }
 
     button {
         margin: 0;
     }
 }
+.visibility-select {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    .public {
+        color: $color-warning-500;
+    }
+    .private {
+        color: $color-success-500;
+    }
+}
 textarea.note {
     flex: 1;
     height: 36px;
@@ -146,3 +161,12 @@ textarea.note {
 .cancelled-coupon-code {
     text-decoration: line-through;
 }
+.note-visibility {
+    text-transform: lowercase;
+    &.public {
+        color: $color-warning-500;
+    }
+    &.private {
+        color: $color-success-500;
+    }
+}

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

@@ -16,8 +16,9 @@ import {
 export class OrderHistoryComponent {
     @Input() order: OrderDetailFragment;
     @Input() history: GetOrderHistory.Items[];
-    @Output() addNote = new EventEmitter<string>();
+    @Output() addNote = new EventEmitter<{ note: string; isPublic: boolean }>();
     note = '';
+    noteIsPrivate = true;
     readonly type = HistoryEntryType;
 
     getClassForEntry(entry: GetOrderHistory.Items): 'success' | 'error' | 'warning' | undefined {
@@ -102,7 +103,8 @@ export class OrderHistoryComponent {
     }
 
     addNoteToOrder() {
-        this.addNote.emit(this.note);
+        this.addNote.emit({ note: this.note, isPublic: !this.noteIsPrivate });
         this.note = '';
+        this.noteIsPrivate = true;
     }
 }

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

@@ -143,6 +143,8 @@
     "password": "Password",
     "price": "Price",
     "price-with-tax": "Price with tax",
+    "private": "Private",
+    "public": "Public",
     "remember-me": "Remember me",
     "remove": "Remove",
     "results-count": "{ count } {count, plural, one {result} other {results}}",
@@ -446,6 +448,9 @@
     "line-fulfillment-none": "No items fulfilled",
     "line-fulfillment-partial": "{ count } of { total } items fulfilled",
     "net-price": "Net price",
+    "note-is-private": "Note is private",
+    "note-only-visible-to-administrators": "Visible to admins only",
+    "note-visible-to-customer": "Visible to admins and customer",
     "order-history": "Order history",
     "payment": "Payment",
     "payment-amount": "Payment amount",