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
104
105
106
107
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<ish-error-message [error]="error$ | async" />
 
<!-- display the user's own review -->
@if (ownProductReview$ | async; as ownReview) {
<div data-testing-id="own-product-review">
  <h3>{{ 'product.reviews.your_review.heading' | translate }}</h3>
  @if (ownReview.status === 'NEW') {
  <p>{{ 'product.review.status.new.text' | translate }}</p>
  } @if (ownReview.status === 'REJECTED') {
  <p>{{ 'product.review.status.rejected.text' | translate }}</p>
  }
  <ng-container *ngTemplateOutlet="reviewItem; context: { review: ownReview }" />
</div>
} @else {
<div *ishHasNotRole="'APP_B2B_OCI_USER'" class="section">
  <h3>{{ 'product.reviews.rate.heading' | translate }}</h3>
  {{ 'product.reviews.review_this_item.text' | translate }}
  @if (isUserLoggedIn$ | async) {
  <button
    type="button"
    class="btn btn-link btn-link-action"
    (click)="reviewCreateDialog.show()"
    data-testing-id="open-review-dialog"
  >
    {{ 'product.reviews.review_this_item.link' | translate }}
  </button>
  } @else {
  <a routerLink="/login" [queryParams]="{ messageKey: 'review' }" data-testing-id="login-link">{{
    'product.reviews.review_this_item.link' | translate
  }}</a>
  }
</div>
}
<!-- display the rate product link if the user has not rated this product yet -->
 
<!-- display the list of reviews -->
<div class="section pb-4" data-testing-id="product-review-list">
  <h3>{{ 'product.reviews.recent_reviews.heading' | translate }}</h3>
  @if (recentProductReviews$ | async; as recentProductReviews) { @if (recentProductReviews?.length) {
  <div>
    @for (review of recentProductReviews; track review.id) {
    <ng-container *ngTemplateOutlet="reviewItem; context: { review: review }" />
    }
  </div>
  } @else {
  {{ 'product.reviews.no_reviews_yet.text' | translate }}
  } } @else {
  {{ 'product.reviews.no_reviews_yet.text' | translate }}
  }
</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">
      @if (review.authorFirstName) {
      <div>{{ review.authorFirstName }} {{ review.authorLastName?.charAt(0) }}.</div>
      } @else {
      <div>{{ 'product.reviews.anonymous_user.text' | translate }}</div>
      }
      {{ review.creationDate | ishDate : 'medium' }}
    </div>
    <div class="col-md-9">
      <div class="review-item-header-title">
        @for (fill of getStars(review.rating); track $index) {
        <ish-product-rating-star [filled]="fill" />
        }
        <span class="ps-1">{{ review.title }}</span>
      </div>
      <div class="review-item-text">{{ review.content }}</div>
 
      @if (review.own) {
      <button
        type="button"
        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 />
 
@if ((loading$ | async) === true) {
<div>
  <ish-loading />
</div>
}