@hmcts/media-viewer 4.2.1 → 4.2.4-exui-3994-f

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set.component.spec.ts

@@ -0,0 +1,375 @@
+import {Component, Input, Output, EventEmitter, SimpleChanges, SimpleChange} from '@angular/core';
+import {ComponentFixture, inject, TestBed} from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { StoreModule, Store } from '@ngrx/store';
+
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+import { annotationSet } from '../../../assets/annotation-set';
+import { Annotation } from '../annotation-set/annotation-view/annotation.model';
+import { CommentService } from './comment/comment.service';
+import { CommentSetComponent } from './comment-set.component';
+import { CommentSetRenderService } from './comment-set-render.service';
+import { TagsModel } from '../models/tags.model';
+import { reducers } from '../../store/reducers/reducers';
+import * as fromActions from '../../store/actions/annotation.actions';
+
+@Component({
+    selector: 'mv-anno-comment',
+    template: '',
+    standalone: false
+})
+export class MockCommentComponent {
+  @Input() rotate = 0;
+  @Input() zoom = 1;
+  @Input() index: number;
+  @Input() page: number;
+  @Input() comment: Comment;
+  @Input() annotation: Annotation;
+
+  @Output() commentClick = new EventEmitter<any>();
+  @Output() renderComments = new EventEmitter<Comment>();
+  @Output() delete = new EventEmitter<Comment>();
+  @Output() updated = new EventEmitter<{comment: Comment, tags: TagsModel[]}>();
+  @Output() changes = new EventEmitter<boolean>();
+}
+
+describe('CommentSetComponent', () => {
+  let component: CommentSetComponent;
+  let fixture: ComponentFixture<CommentSetComponent>;
+  let mockComment;
+  let annotation: Annotation, annotation2: Annotation, annotation3: Annotation;
+  let comment, mockRectangles;
+  let toolbarEvent: ToolbarEventService;
+
+  const toolbarEventsMock = {
+    icp: {
+      participantsListVisible: new BehaviorSubject(false),
+    },
+    toggleCommentsPanel: () => {},
+    toggleParticipantsList: () => {},
+    commentsPanelVisible: new BehaviorSubject(false),
+    rotateSubject: new BehaviorSubject(false),
+  };
+
+  beforeEach(() => {
+    annotation = {
+      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      createdByDetails: {
+        forename: 'em-showcase',
+        surname: 'testuser',
+        email: 'emshowcase@hmcts.net'
+      },
+      lastModifiedByDetails: {
+        forename: 'em-showcase',
+        surname: 'testuser',
+        email: 'emshowcase@hmcts.net'
+      },
+      createdDate: '2019-05-28T08:48:19.681Z',
+      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      lastModifiedDate: '2019-05-28T08:48:33.206Z',
+      id: '123',
+      page: 1,
+      color: 'FFFF00',
+      annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
+      comments: [],
+      rectangles: [],
+      type: 'highlight',
+      tags: []
+    };
+
+    annotation2 = {
+      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      createdByDetails: {
+        forename: 'em-showcase',
+        surname: 'testuser',
+        email: 'emshowcase@hmcts.net'
+      },
+      lastModifiedByDetails: {
+        forename: 'em-showcase',
+        surname: 'testuser',
+        email: 'emshowcase@hmcts.net'
+      },
+      createdDate: '2019-05-28T08:48:19.681Z',
+      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      lastModifiedDate: '2019-05-28T08:48:33.206Z',
+      id: '123',
+      page: 1,
+      color: 'FFFF00',
+      annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
+      comments: [],
+      rectangles: [],
+      type: 'highlight',
+      tags: []
+    };
+
+    annotation3 = {
+      createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      createdByDetails: {
+        forename: 'em-showcase',
+        surname: 'testuser',
+        email: 'emshowcase@hmcts.net'
+      },
+      lastModifiedByDetails: {
+        forename: 'em-showcase',
+        surname: 'testuser',
+        email: 'emshowcase@hmcts.net'
+      },
+      createdDate: '2019-05-28T08:48:19.681Z',
+      lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+      lastModifiedDate: '2019-05-28T08:48:33.206Z',
+      id: '123',
+      page: 2,
+      color: 'FFFF00',
+      annotationSetId: '8f7aa07c-2343-44e3-b3db-bf689066d00e',
+      comments: [],
+      rectangles: [],
+      type: 'highlight',
+      tags: []
+    };
+
+    comment = {
+      comment: {
+        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        createdByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        lastModifiedByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        createdDate: '2019-05-28T08:48:33.206Z',
+        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        lastModifiedDate: '2019-05-28T08:48:33.206Z',
+        id: '16d5c513-15f9-4c39-8102-88bdb85d8831',
+        content: 'This comment should be last',
+        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
+      },
+      tags: []
+    };
+    mockRectangles = [
+      {
+        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        createdByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        lastModifiedByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        createdDate: '2019-05-28T08:48:19.696Z',
+        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        lastModifiedDate: '2019-05-28T08:48:33.206Z',
+        id: '1',
+        x: 360.134016,
+        y: 200,
+        width: 16.879571,
+        height: 10.02507,
+        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
+      },
+      {
+        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        createdByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        lastModifiedByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        createdDate: '2019-05-28T08:48:19.696Z',
+        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        lastModifiedDate: '2019-05-28T08:48:33.206Z',
+        id: '2',
+        x: 360.134016,
+        y: 100,
+        width: 16.879571,
+        height: 10.02507,
+        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
+      },
+      {
+        createdBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        createdByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        lastModifiedByDetails: {
+          forename: 'Linus',
+          surname: 'Norton',
+          email: 'linus.norton@hmcts.net'
+        },
+        createdDate: '2019-05-28T08:48:19.696Z',
+        lastModifiedBy: 'ea6d959c-b6c9-48af-89c2-6f7bd796524d',
+        lastModifiedDate: '2019-05-28T08:48:33.206Z',
+        id: '3',
+        x: 360.134016,
+        y: 400,
+        width: 16.879571,
+        height: 10.02507,
+        annotationId: '4f3f9361-6d17-4689-81dd-5cb2e317b329'
+      }
+    ];
+  });
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        CommentSetComponent,
+        MockCommentComponent,
+      ],
+      imports: [
+        StoreModule.forRoot({}),
+        StoreModule.forFeature('media-viewer', reducers)
+      ],
+      providers: [
+        { provide: ToolbarEventService, useValue: toolbarEventsMock },
+        CommentService,
+        CommentSetRenderService,
+      ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    mockComment = JSON.parse(JSON.stringify(comment));
+    fixture = TestBed.createComponent(CommentSetComponent);
+    component = fixture.componentInstance;
+    component.annotationSet = JSON.parse(JSON.stringify(annotationSet));
+    component.rotate = 0;
+    component.height = 100;
+    component.zoom = 1;
+    fixture.detectChanges();
+    toolbarEvent = TestBed.inject(ToolbarEventService);
+  });
+
+  it('should delete the comment for the annotation', () => {
+    spyOn(component, 'onAnnotationUpdate');
+
+    component.onCommentDelete(mockComment.comment);
+
+    expect(component.onAnnotationUpdate).toHaveBeenCalled();
+    expect(component.annotationSet).not.toContain(mockComment);
+  });
+
+  it('should update the comment for the annotation', () => {
+    const annoId = component.annotationSet.annotations[0].comments[0].annotationId;
+    spyOn(component, 'onAnnotationUpdate');
+    const mockPayload = { comment: { content: 'Updating the comment 1', annotationId: annoId }} as any;
+
+    component.onCommentUpdate(mockPayload);
+
+    expect(component.onAnnotationUpdate).toHaveBeenCalled();
+    expect(component.annotationSet.annotations[0].comments[0]).toEqual(mockComment.comment);
+  });
+
+  it('should call the comment service to update comments state value',
+    inject([CommentService], (commentService: CommentService) => {
+      spyOn(commentService, 'onCommentChange');
+      commentService.setCommentSet({commentComponents: []});
+      component.allCommentsSaved();
+      expect(commentService.onCommentChange).toHaveBeenCalled();
+    })
+  );
+
+  describe('ngOnChanges', () => {
+    const mockAnnoationSet = {
+      documentId: '123',
+      annotations: [annotation3],
+      id: null,
+      createdBy: null,
+      createdByDetails: null,
+      createdDate: null,
+      lastModifiedBy: null,
+      lastModifiedByDetails: null,
+      lastModifiedDate: null
+    };
+
+    it('should call setCommentSet when annotationSet changed',
+      inject([CommentService], (commentService: CommentService) => {
+        spyOn(commentService, 'setCommentSet').and.callThrough();
+        const mockChanges: SimpleChanges = {
+          annotationSet: {
+            previousValue: undefined,
+            currentValue: mockAnnoationSet,
+            firstChange: false,
+            isFirstChange: () => false
+          }
+        };
+        component.ngOnChanges(mockChanges);
+
+        expect(commentService.setCommentSet).toHaveBeenCalled();
+      })
+    );
+
+    it('should not call setCommentSet when annotationSet not changed',
+      inject([CommentService], (commentService: CommentService) => {
+        spyOn(commentService, 'setCommentSet').and.callThrough();
+        const mockChanges: SimpleChanges = {};
+        component.ngOnChanges(mockChanges);
+
+        expect(commentService.setCommentSet).not.toHaveBeenCalled();
+      })
+    );
+  });
+
+  it('should dispatch SelectedAnnotation when onSelect called',
+    inject([Store], (store: Store<{}>) => {
+      spyOn(store, 'dispatch').and.callThrough();
+      const mockSelectedAnnotation = {
+        annotationId: '123',
+        editable: true,
+        selected: true
+      };
+      const action = new fromActions.SelectedAnnotation(mockSelectedAnnotation);
+      component.onSelect(mockSelectedAnnotation);
+
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    })
+  );
+
+  it('should dispatch SaveAnnotation when onAnnotationUpdate called',
+    inject([Store], (store: Store<{}>) => {
+      spyOn(store, 'dispatch').and.callThrough();
+      const action = new fromActions.SaveAnnotation(annotation3);
+      component.onAnnotationUpdate(annotation3);
+
+      expect(store.dispatch).toHaveBeenCalledWith(action);
+    })
+  );
+
+  describe('onContainerClick', () => {
+    it('should call clearSelection when onContainerClick called',
+      inject([Store], (store: Store<{}>) => {
+        spyOn(store, 'dispatch').and.callThrough();
+        const action = new fromActions.SelectedAnnotation({ annotationId: '', editable: false, selected: false});
+
+        component.onContainerClick({ path: [component.panel.nativeElement] });
+
+        expect(store.dispatch).toHaveBeenCalledWith(action);
+      })
+    );
+
+    it('should not call clearSelection when param is not the container', () => {
+      spyOn(component, 'clearSelection').and.callThrough();
+      component.onContainerClick({});
+
+      expect(component.clearSelection).not.toHaveBeenCalled();
+    });
+
+    it('should scroll comments panel to current scrolling position of the viewer when became visible', () => {
+      const scrollToSpy = spyOn(component.container.nativeElement, 'scrollTo').and.callThrough();
+
+      component.ngOnChanges({ contentScrollTop: new SimpleChange(0, 100, true) });
+
+      expect(scrollToSpy).toHaveBeenCalled();
+    });
+  });
+});

package/projects/media-viewer/src/lib/annotations/comment-set/comment-set.component.ts

@@ -0,0 +1,146 @@
+import {
+  Component,
+  ElementRef,
+  Input, OnChanges,
+  OnDestroy,
+  OnInit,
+  QueryList, SimpleChanges,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import { Observable, Subscription } from 'rxjs';
+import { select, Store } from '@ngrx/store';
+
+import { AnnotationSet } from '../annotation-set/annotation-set.model';
+import { Annotation } from '../annotation-set/annotation-view/annotation.model';
+import { Comment } from './comment/comment.model';
+import { CommentComponent } from './comment/comment.component';
+import { CommentService } from './comment/comment.service';
+import { CommentSetRenderService } from './comment-set-render.service';
+import * as fromStore from '../../store/reducers/reducers';
+import * as fromActions from '../../store/actions/annotation.actions';
+import * as fromSelectors from '../../store/selectors/annotation.selectors';
+import { TagsModel } from '../models/tags.model';
+import { SelectionAnnotation } from '../models/event-select.model';
+import { ToolbarEventService } from '../../toolbar/toolbar-event.service';
+
+@Component({
+    selector: 'mv-comment-set',
+    templateUrl: './comment-set.component.html',
+    standalone: false
+})
+export class CommentSetComponent implements OnInit, OnDestroy, OnChanges {
+
+  @Input() annotationSet: AnnotationSet;
+  @Input() zoom: number;
+  @Input() rotate: number;
+  @Input() height: number;
+  @Input() pageHeights = [];
+  @Input() contentScrollTop: number;
+
+  comments: Comment[];
+  tags: TagsModel[];
+  private subscriptions: Subscription[] = [];
+  public comments$: Observable<Annotation[]>;
+  public annoEntities$: Observable<{ [id: string]: Annotation }>;
+
+  @ViewChild('container', {static: false}) container: ElementRef<HTMLDivElement>;
+  @ViewChild('panel', {static: false}) panel: ElementRef<HTMLDivElement>;
+  @ViewChildren('commentComponent') commentComponents: QueryList<CommentComponent>;
+
+  showCommentsPanel: boolean;
+
+  constructor(private store: Store<fromStore.AnnotationSetState>,
+              private readonly commentService: CommentService,
+              private readonly renderService: CommentSetRenderService,
+              private readonly toolbarEvents: ToolbarEventService) {
+    this.clearSelection();
+  }
+
+  ngOnInit() {
+    this.comments$ = this.store.pipe(select(fromSelectors.getCommentsArray));
+    this.annoEntities$ = this.store.pipe(select(fromSelectors.getAnnotationEntities));
+    this.subscriptions.push(
+      this.toolbarEvents.commentsPanelVisible.subscribe(toggle => {
+        this.redrawComments();
+        this.showCommentsPanel = toggle;
+      })
+    );
+    this.subscriptions.push(this.toolbarEvents.rotateSubject.subscribe(rotate => this.rotateDocument()));
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.annotationSet) {
+      this.commentService.setCommentSet(this);
+    }
+    if (changes.contentScrollTop) {
+      if (this.container) {
+        this.container.nativeElement.scrollTo(0, this.contentScrollTop);
+      }
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.subscriptions.length > 0) {
+      this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    }
+  }
+
+  public onSelect(annotationId: SelectionAnnotation) {
+    this.store.dispatch(new fromActions.SelectedAnnotation(annotationId));
+  }
+
+  public onCommentDelete(comment: Comment) {
+    const annotation = this.annotationSet.annotations.find(anno => anno.id === comment.annotationId);
+    const comments = [];
+    const annot = {
+      ...annotation,
+      comments
+    };
+    this.onAnnotationUpdate(annot);
+    this.redrawComments();
+  }
+
+  redrawComments() {
+    setTimeout(() => {
+      const componentList: CommentComponent[] = this.commentComponents.map(comment => comment);
+        this.renderService.redrawComponents(componentList, this.pageHeights, this.rotate, this.zoom);
+    }, 0);
+  }
+
+  private rotateDocument() {
+    if (this.panel) {
+      this.panel.nativeElement.style.height = '0';
+    }
+  }
+
+  public onCommentUpdate(payload: {comment: Comment, tags: TagsModel[]} ) {
+    const annotation = this.annotationSet.annotations.find(anno => anno.id === payload.comment.annotationId);
+    const comments = [payload.comment];
+    const tags = payload.tags;
+    const annot = {
+      ...annotation,
+      comments,
+      tags
+    };
+    this.onAnnotationUpdate(annot);
+  }
+
+  public onAnnotationUpdate(annotation: Annotation) {
+    this.store.dispatch(new fromActions.SaveAnnotation(annotation));
+  }
+
+  onContainerClick(e) {
+    if (e.path && e.path[0] === this.panel.nativeElement) {
+      this.clearSelection();
+    }
+  }
+
+  clearSelection() {
+    this.store.dispatch(new fromActions.SelectedAnnotation({ annotationId: '', editable: false, selected: false}));
+  }
+
+  allCommentsSaved() {
+    this.commentService.allCommentsSaved();
+  }
+}

package/projects/media-viewer/src/lib/annotations/comments-summary/comments-summary.component.html

@@ -0,0 +1,165 @@
+<div id="modal-background" class="modal" (click)="onClose()">
+  <div
+    #outerContainer
+    id="modal"
+    class="modal-content govuk-width-container clearfix"
+    (click)="$event.stopPropagation()"
+    cdkTrapFocus
+    tabindex="0"
+  >
+    <div id="comment-container" class="comment-container" #commentContainer>
+      <h2 class="govuk-heading-m">{{ title }}</h2>
+      <ng-container *ngIf="comments$ | async as comments">
+        <ng-container *ngIf="comments.length">
+          <button
+            type="submit"
+            class="govuk-button govuk-!-margin-right-1"
+            (click)="onFiltersToggle()"
+          >
+            {{
+              !showFilters
+                ? ("Show Filters" | rpxTranslate)
+                : ("Hide Filters" | rpxTranslate)
+            }}
+          </button>
+          <button
+            type="submit"
+            class="govuk-button govuk-button--secondary"
+            (click)="onClearFilters()"
+            *ngIf="hasFilter"
+          >
+            {{ "Clear Filters" | rpxTranslate }}
+          </button>
+          <ng-container *ngIf="showFilters">
+            <form [formGroup]="filtersFg" (ngSubmit)="onFilter()">
+              <div class="dates">
+                <div class="dates__from">
+                  <mv-gov-uk-date
+                    [config]="{ id: 'dateRangeFrom', legend: 'From' }"
+                    [formGroup]="filtersFg.controls['dateRangeFrom']"
+                    [errorMessage]="{
+                      isInvalid: !fromFilterValid,
+                      messages: ['From date is required']
+                    }"
+                  ></mv-gov-uk-date>
+                </div>
+                <div class="dates__to">
+                  <mv-gov-uk-date
+                    [config]="{ id: 'dateRangeTo', legend: 'To' }"
+                    [formGroup]="filtersFg.controls['dateRangeTo']"
+                    [errorMessage]="{
+                      isInvalid: !toFilterValid,
+                      messages: ['To date is required']
+                    }"
+                  ></mv-gov-uk-date>
+                </div>
+                <div class="dates__tags">
+                  <mv-gov-uk-fieldset
+                    [config]="{
+                      legend: 'Tags',
+                      classes: 'govuk-label--m',
+                      id: 'filters'
+                    }"
+                    [isHeading]="false"
+                  >
+                    <div
+                      class="govuk-checkboxes--scroll"
+                      [formGroup]="filtersFg.controls['tagFilters']"
+                    >
+                      <div class="govuk-checkboxes govuk-checkboxes--small">
+                        <div
+                          class="govuk-checkboxes__item"
+                          *ngFor="let item of allTags$ | async"
+                        >
+                          <input
+                            [formControlName]="item.key"
+                            class="govuk-checkboxes__input"
+                            [value]="false"
+                            type="checkbox"
+                          />
+                          <label class="govuk-label govuk-checkboxes__label">
+                            {{ item.key | unsnake }} ({{ item.length }})
+                          </label>
+                        </div>
+                      </div>
+                    </div>
+                  </mv-gov-uk-fieldset>
+                </div>
+                <div class="dates__cta">
+                  <button type="submit" class="govuk-button">
+                    {{ "Filter comments" | rpxTranslate }}
+                  </button>
+                </div>
+              </div>
+            </form>
+          </ng-container>
+          <ng-container *ngIf="comments[0]">
+            <ngx-datatable
+              [rows]="comments"
+              rowHeight="auto"
+              headerHeight="auto"
+              [columnMode]="'flex'"
+              [sorts]="[{ prop: 'date', dir: 'desc' }]"
+            >
+              <ngx-datatable-column
+                name="{{ 'User' | rpxTranslate }}"
+                [flexGrow]="1"
+                [sortable]="false"
+              ></ngx-datatable-column>
+              <ngx-datatable-column
+                name="{{ 'Page' | rpxTranslate }}"
+                [flexGrow]="1"
+              >
+                <ng-template ngx-datatable-cell-template let-value="value">
+                  <a
+                    [routerLink]="[]"
+                    class="comment-summary_pages"
+                    (click)="navigateToPage(value)"
+                    >{{ value }}</a
+                  >
+                </ng-template>
+              </ngx-datatable-column>
+              <ngx-datatable-column
+                name="{{ 'Date' | rpxTranslate }}"
+                [flexGrow]="1"
+              ></ngx-datatable-column>
+              <ngx-datatable-column
+                name="{{ 'Comment' | rpxTranslate }}"
+                [flexGrow]="3"
+                [sortable]="false"
+              ></ngx-datatable-column>
+              <ngx-datatable-column
+                name="{{ 'Tags' | rpxTranslate }}"
+                [flexGrow]="1"
+                [sortable]="false"
+              >
+                <ng-template ngx-datatable-cell-template let-value="value">
+                  <span class="hmcts-badge" *ngFor="let tag of value">{{
+                    tag.label
+                  }}</span>
+                </ng-template>
+              </ngx-datatable-column>
+            </ngx-datatable>
+          </ng-container>
+        </ng-container>
+        <ng-container *ngIf="!comments[0]">
+          <h3 class="govuk-heading-s">
+            {{
+              "No comments available. Select text to add a highlight or comment."
+                | rpxTranslate
+            }}
+          </h3>
+        </ng-container>
+      </ng-container>
+    </div>
+
+    <div class="button-container">
+      <button (click)="onPrint()" class="govuk-button govuk-button--secondary">
+        {{ "Print" | rpxTranslate }}
+      </button>
+      <button id="modal-close-button" (click)="onClose()" class="govuk-button">
+        {{ "Close" | rpxTranslate }}
+      </button>
+    </div>
+  </div>
+</div>