From 0d48b076699a664f5d82ba34bd366e82d84fe761 Mon Sep 17 00:00:00 2001
From: tblivet <thibault.blivet@prestashop.com>
Date: Fri, 15 Dec 2023 19:00:40 +0100
Subject: [PATCH] fix: productcomments

Make productcomments work again, and small display improvements has been added
---
 .../templates/hook/average-grade-stars.tpl    |  15 +++
 .../templates/hook/empty-product-comment.tpl  |   2 +-
 .../templates/hook/post-comment-modal.tpl     |  14 +--
 .../hook/product-additional-info.tpl          |  31 ++++++
 .../templates/hook/product-comments-list.tpl  |  53 +++++----
 src/scss/core/modules/_index.scss             |   1 +
 src/scss/core/modules/_productcomments.scss   | 103 ++++++++++++++++++
 .../catalog/_partials/miniatures/product.tpl  |   4 +-
 8 files changed, 190 insertions(+), 33 deletions(-)
 create mode 100644 modules/productcomments/views/templates/hook/average-grade-stars.tpl
 create mode 100644 modules/productcomments/views/templates/hook/product-additional-info.tpl
 create mode 100644 src/scss/core/modules/_productcomments.scss

diff --git a/modules/productcomments/views/templates/hook/average-grade-stars.tpl b/modules/productcomments/views/templates/hook/average-grade-stars.tpl
new file mode 100644
index 000000000..fc99bebdb
--- /dev/null
+++ b/modules/productcomments/views/templates/hook/average-grade-stars.tpl
@@ -0,0 +1,15 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+{if $nb_comments != 0}
+  <div class="comments-note">
+    <div class="grade-stars" data-grade="{$grade}"></div>
+    {if isset($showNbComments) && $showNbComments}
+      <div class="comments-number">({$nb_comments})</div>
+    {elseif isset($showGradeAverage) && $showGradeAverage}
+      <div class="average-grade">({$grade|number_format:1})</div>
+    {/if}
+  </div>
+{/if}
diff --git a/modules/productcomments/views/templates/hook/empty-product-comment.tpl b/modules/productcomments/views/templates/hook/empty-product-comment.tpl
index 314582606..dd6f3ffa3 100644
--- a/modules/productcomments/views/templates/hook/empty-product-comment.tpl
+++ b/modules/productcomments/views/templates/hook/empty-product-comment.tpl
@@ -3,7 +3,7 @@
  * file that was distributed with this source code.
  *}
 
-<div id="empty-product-comment" class="product-comment-list-item">
+<div id="empty-product-comment" class="product-comment-list-item py-3">
   {if $post_allowed}
     <button class="btn btn-primary btn-with-icon post-product-comment">
       <i class="material-icons" aria-hidden="true">&#xE3C9;</i>
diff --git a/modules/productcomments/views/templates/hook/post-comment-modal.tpl b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
index 485bf7ea7..9c2065253 100644
--- a/modules/productcomments/views/templates/hook/post-comment-modal.tpl
+++ b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
@@ -17,7 +17,7 @@
       <div class="modal-body">
         <form id="post-product-comment-form" action="{$post_comment_url nofilter}" method="POST">
           <div class="row">
-            <div class="col-sm-2">
+            <div class="col-5 col-sm-2 mb-4">
               {if isset($product) && $product}
                 {block name='product_flags'}
                   <ul class="product-flags">
@@ -50,7 +50,7 @@
                         {/if}
 
                         <img
-                          class="js-qv-product-cover rounded"
+                          class="js-qv-product-cover rounded img-fluid"
                           srcset="
                             {$product.cover.bySize.default_xs.url},
                             {$product.cover.bySize.default_m.url} 2x"
@@ -82,7 +82,7 @@
                         {/if}
 
                         <img
-                          class="rounded"
+                          class="rounded img-fluid"
                           srcset="
                             {$urls.no_picture_image.bySize.default_xs.url},
                             {$urls.no_picture_image.bySize.default_m.url} 2x"
@@ -96,17 +96,17 @@
                 {/block}
               {/if}
             </div>
-            <div class="col-sm-4">
-              <p class="h3">{$product.name}</p>
+            <div class="col-7 col-sm-5">
+              <p class="h5">{$product.name}</p>
               {block name='product_description_short'}
                 <div itemprop="description">{$product.description_short nofilter}</div>
               {/block}
             </div>
-            <div class="col-sm-6">
+            <div class="col-sm-5">
               {if $criterions|@count > 0}
                 <ul id="criterions_list">
                   {foreach from=$criterions item='criterion'}
-                    <li>
+                    <li class="mb-2">
                       <div class="criterion-rating">
                         <label>{$criterion.name|escape:'html':'UTF-8'}:</label>
                         <div
diff --git a/modules/productcomments/views/templates/hook/product-additional-info.tpl b/modules/productcomments/views/templates/hook/product-additional-info.tpl
new file mode 100644
index 000000000..ea47e1bef
--- /dev/null
+++ b/modules/productcomments/views/templates/hook/product-additional-info.tpl
@@ -0,0 +1,31 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+{if $nb_comments != 0 || $post_allowed}
+  <div class="product-comments-additional-info">
+    {if $nb_comments == 0}
+      {if $post_allowed}
+        <button class="btn btn-primary btn-with-icon post-product-comment">
+          <i class="material-icons edit" data-icon="edit"></i>
+          {l s='Write your review' d='Modules.Productcomments.Shop'}
+        </button>
+      {/if}
+    {else}
+      {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true}
+      <div class="additional-links">
+        <a class="link-comment" href="#product-comments-list-header">
+          <i class="material-icons chat" data-icon="chat"></i>
+          {l s='Read user reviews' d='Modules.Productcomments.Shop'} ({$nb_comments})
+        </a>
+        {if $post_allowed}
+          <a class="link-comment post-product-comment" href="#product-comments-list-header">
+            <i class="material-icons edit" data-icon="edit"></i>
+            {l s='Write your review' d='Modules.Productcomments.Shop'}
+          </a>
+        {/if}
+      </div>
+    {/if}
+  </div>
+{/if}
diff --git a/modules/productcomments/views/templates/hook/product-comments-list.tpl b/modules/productcomments/views/templates/hook/product-comments-list.tpl
index 730061c89..9fcc350d4 100644
--- a/modules/productcomments/views/templates/hook/product-comments-list.tpl
+++ b/modules/productcomments/views/templates/hook/product-comments-list.tpl
@@ -2,42 +2,49 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+
 <script type="text/javascript">
   var productCommentUpdatePostErrorMessage = '{l|escape:'javascript' s='Sorry, your review appreciation cannot be sent.' d='Modules.Productcomments.Shop'}';
   var productCommentAbuseReportErrorMessage = '{l|escape:'javascript' s='Sorry, your abuse report cannot be sent.' d='Modules.Productcomments.Shop'}';
 </script>
 
-<div class="row">
-  <div class="col-md-12 col-sm-12" id="product-comments-list-header">
-    <div class="comments-nb">
-      <i class="material-icons" data-icon="chat" aria-hidden="true"></i>
-      {l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
-    </div>
-    {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade}
+<div id="product-comments-list-header">
+  <div class="comments-nb">
+    {l s='Comments' d='Modules.Productcomments.Shop'} ({$nb_comments})
   </div>
+  {include file='module:productcomments/views/templates/hook/average-grade-stars.tpl' grade=$average_grade showGradeAverage=true showNbComments=false}
 </div>
 
 {include file='module:productcomments/views/templates/hook/product-comment-item-prototype.tpl' assign="comment_prototype"}
 {include file='module:productcomments/views/templates/hook/empty-product-comment.tpl'}
-<div class="row">
-  <div class="col-md-12 col-sm-12"
-       id="product-comments-list"
-       data-list-comments-url="{$list_comments_url nofilter}"
-       data-update-comment-usefulness-url="{$update_comment_usefulness_url nofilter}"
-       data-report-comment-url="{$report_comment_url nofilter}"
-       data-comment-item-prototype="{$comment_prototype|escape:'html'}">
-  </div>
+
+<div id="product-comments-list" data-list-comments-url="{$list_comments_url nofilter}"
+  data-update-comment-usefulness-url="{$update_comment_usefulness_url nofilter}"
+  data-report-comment-url="{$report_comment_url nofilter}"
+  data-comment-item-prototype="{$comment_prototype|escape:'html'}" data-current-page="1"
+  data-total-pages="{$list_total_pages}">
 </div>
-<div class="row">
-  <div class="col-md-12 col-sm-12" id="product-comments-list-footer">
-    <div id="product-comments-list-pagination"></div>
-    {if $post_allowed && $nb_comments != 0}
-      <button class="btn btn-primary btn-with-icon post-product-comment">
-        <i class="material-icons" data-icon="edit" aria-hidden="true"></i>
-        {l s='Write your review' d='Modules.Productcomments.Shop'}
-      </button>
+
+<div id="product-comments-list-footer">
+  <div id="product-comments-list-pagination">
+    {if $list_total_pages > 0}
+      <ul>
+        {assign var = "prevCount" value = 0}
+        <li id="pcl_page_{$prevCount}"><span class="prev"><i class="material-icons">chevron_left</i></span></li>
+        {for $pageCount = 1 to $list_total_pages}
+          <li id="pcl_page_{$pageCount}"><span>{$pageCount}</span></li>
+        {/for}
+        {assign var = "nextCount" value = $list_total_pages + 1}
+        <li id="pcl_page_{$nextCount}"><span class="next"><i class="material-icons">chevron_right</i></span></li>
+      </ul>
     {/if}
   </div>
+  {if $post_allowed && $nb_comments != 0}
+    <button class="btn btn-primary btn-with-icon post-product-comment">
+      <i class="material-icons edit" data-icon="edit"></i>
+      {l s='Write your review' d='Modules.Productcomments.Shop'}
+    </button>
+  {/if}
 </div>
 
 {* Appreciation post error modal *}
diff --git a/src/scss/core/modules/_index.scss b/src/scss/core/modules/_index.scss
index d689067e4..ed9fa3603 100644
--- a/src/scss/core/modules/_index.scss
+++ b/src/scss/core/modules/_index.scss
@@ -4,3 +4,4 @@
 @import "shoppingcart";
 @import "customersignin";
 @import "nouislider";
+@import "productcomments";
diff --git a/src/scss/core/modules/_productcomments.scss b/src/scss/core/modules/_productcomments.scss
new file mode 100644
index 000000000..8ba9adc53
--- /dev/null
+++ b/src/scss/core/modules/_productcomments.scss
@@ -0,0 +1,103 @@
+// Global styles
+.product-quickview-review,
+.product-list-reviews,
+.comments-note {
+  .grade-stars {
+    display: flex;
+    align-items: stretch;
+    height: 28px;
+
+    &.small-stars{
+      height: 20px;
+    }
+
+    .star-content {
+      margin: 0;
+    }
+  }
+
+  .comments-nb,
+  .comments-number,
+  .average-grade {
+    align-self: center;
+    margin-left: 0.25rem;
+  }
+}
+
+// Average grade
+.comments-note {
+  display: flex;
+  align-items: center;
+}
+
+// Specific product miniature styles
+.product-miniature {
+  &:not(.reviews-loaded) {
+    .product-list-reviews {
+      min-height: 2.5rem;
+    }
+  }
+
+  .product-list-reviews {
+    position: initial;
+    inset: auto;
+    justify-content: start;
+    padding: 0.5rem 0 1rem;
+
+    .comments-nb {
+      margin: 0;
+    }
+  }
+}
+
+// Specific product quickview styles
+.product-quickview-review {
+  position: initial;
+  inset: auto;
+  align-items: center;
+  justify-content: start;
+  padding: 0.5rem 0 1.5rem;
+}
+
+// Specific product page styles
+.page-product {
+  #product-comments-list-header {
+    padding: 1rem 0;
+
+    .comments-nb {
+      padding: 0;
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+  }
+
+  // Add comment modal
+  #post-product-comment-modal {
+
+    .h3 {
+      font-size: inherit;
+    }
+
+    .product-cover {
+      width: auto;
+      height: auto;
+
+      img {
+        width: auto;
+        height: auto;
+      }
+    }
+  }
+
+  // Comments list
+  #product-comments-list {
+    .product-comment-list-item {
+      margin: 0 0 1.5rem;
+      border-bottom: 1px solid var(--bs-gray-200);
+
+      .comment-infos {
+        padding-right: 1.5rem;
+      }
+    }
+  }
+}
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index b2b2b07c1..80be446ac 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -5,13 +5,13 @@
 {$componentName = 'product-miniature'}
 
 {block name='product_miniature_item'}
-  <article class="{$componentName} js-{$componentName}{if !empty($productClasses)} {$productClasses}{/if}" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
+  <article class="{$componentName} js-{$componentName} thumbnail-container {if !empty($productClasses)} {$productClasses}{/if}" data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
     <div class="card">
       <a href="{$product.url}" class="{$componentName}__link">
         {include file='catalog/_partials/product-flags.tpl'}
 
         {block name='product_miniature_image'}
-          <div class="{$componentName}__image-container thumbnail-container">
+          <div class="{$componentName}__image-container">
             {if $product.cover}
               <picture>
                 {if isset($product.cover.bySize.default_md.sources.avif)}