All files / src/app/extensions/rating/shared/product-reviews product-reviews.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ish-error-message [error]="error$ | async" />
 
<!-- display the user's own review -->
<div *ngIf="ownProductReview$ | async as ownReview; else rateProduct" data-testing-id="own-product-review">
  <h3>{{ 'product.reviews.your_review.heading' | translate }}</h3>
  <p *ngIf="ownReview.status === 'NEW'">{{ 'product.review.status.new.text' | translate }}</p>
  <p *ngIf="ownReview.status === 'REJECTED'">{{ 'product.review.status.rejected.text' | translate }}</p>
  <ng-container *ngTemplateOutlet="reviewItem; context: { review: ownReview }" />
</div>
<!-- display the rate product link if the user has not rated this product yet -->
<ng-template #rateProduct>
  <div *ishHasNotRole="'APP_B2B_OCI_USER'" class="section">
    <h3>{{ 'product.reviews.rate.heading' | translate }}</h3>
 
    {{ 'product.reviews.review_this_item.text' | translate }}
 
    <button
      type="button"
      *ngIf="isUserLoggedIn$ | async; else loginLink"
      class="btn btn-link btn-link-action"
      (click)="reviewCreateDialog.show()"
      data-testing-id="open-review-dialog"
    >
      {{ 'product.reviews.review_this_item.link' | translate }}
    </button>
    <ng-template #loginLink>
      <a routerLink="/login" [queryParams]="{ messageKey: 'review' }" data-testing-id="login-link">{{
        'product.reviews.review_this_item.link' | translate
      }}</a></ng-template
    >
  </div>
</ng-template>
 
<!-- display the list of reviews -->
<div class="section pb-4" data-testing-id="product-review-list">
  <h3>{{ 'product.reviews.recent_reviews.heading' | translate }}</h3>
  <ng-container *ngIf="recentProductReviews$ | async as recentProductReviews; else noReviews">
    <div *ngIf="recentProductReviews?.length; else noReviews">
      <ng-container *ngFor="let review of recentProductReviews">
        <ng-container *ngTemplateOutlet="reviewItem; context: { review: review }" />
      </ng-container>
    </div>
  </ng-container>
</div>
 
<!-- template for one review item -->
<ng-template #reviewItem let-review="review">
  <div class="row review-item">
    <div class="col-md-3 review-item-created">
      <div *ngIf="review.authorFirstName; else anonymousUser">
        {{ review.authorFirstName }} {{ review.authorLastName?.charAt(0) }}.
      </div>
      <ng-template #anonymousUser>
        <div>{{ 'product.reviews.anonymous_user.text' | translate }}</div>
      </ng-template>
      {{ review.creationDate | ishDate : 'medium' }}
    </div>
    <div class="col-md-9">
      <div class="review-item-header-title">
        <ng-container *ngFor="let fill of getStars(review.rating)">
          <ish-product-rating-star [filled]="fill" />
        </ng-container>
        <span class="ps-1">{{ review.title }}</span>
      </div>
      <div class="review-item-text">{{ review.content }}</div>
 
      <button
        type="button"
        *ngIf="review.own"
        class="btn btn-link btn-link-action"
        (click)="modalDialog.show(review)"
        data-testing-id="delete-review"
      >
        {{ 'product.reviews.delete.review.link' | translate }}
      </button>
    </div>
  </div>
</ng-template>
 
<!-- delete dialog -->
<ish-modal-dialog
  #modalDialog
  [options]="{
    titleText: 'product.reviews.delete.dialog.title' | translate,
    confirmText: 'product.reviews.delete.button.label' | translate,
    rejectText: 'account.cancel.button.label' | translate
  }"
  (confirmed)="deleteReview($event)"
>
  <p>{{ 'product.reviews.delete.dialog.text' | translate }}</p>
</ish-modal-dialog>
 
<!-- create dialog -->
<ish-product-review-create-dialog #reviewCreateDialog />
 
<ng-template #noReviews>
  {{ 'product.reviews.no_reviews_yet.text' | translate }}
</ng-template>
 
<div *ngIf="(loading$ | async) === true">
  <ish-loading />
</div>