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
108
109
110
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
        class="btn btn-link btn-link-action"
        data-testing-id="open-review-dialog"
        type="button"
        (click)="reviewCreateDialog.show()"
      >
        {{ 'product.reviews.review_this_item.link' | translate }}
      </button>
    } @else {
      <a data-testing-id="login-link" routerLink="/login" [queryParams]="{ messageKey: 'review' }">{{
        '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
          class="btn btn-link btn-link-action"
          data-testing-id="delete-review"
          type="button"
          (click)="modalDialog.show(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>
}