From 5c8b4b11e51ba1edd3b54a7838a8083ffc342392 Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Fri, 28 May 2021 01:53:51 +0300
Subject: [PATCH] update for reviews in quick view working

---
 assets/js/theme/global/quick-view.js          |  4 +++
 assets/js/theme/product.js                    |  2 +-
 assets/js/theme/product/reviews.js            | 29 ++++++++++++-------
 templates/components/products/quick-view.html |  4 +++
 templates/components/products/reviews.html    |  2 +-
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/assets/js/theme/global/quick-view.js b/assets/js/theme/global/quick-view.js
index d4ab963755..d362c9ddfb 100644
--- a/assets/js/theme/global/quick-view.js
+++ b/assets/js/theme/global/quick-view.js
@@ -2,6 +2,7 @@ import 'foundation-sites/js/foundation/foundation';
 import 'foundation-sites/js/foundation/foundation.dropdown';
 import utils from '@bigcommerce/stencil-utils';
 import ProductDetails from '../common/product-details';
+import Review from '../product/reviews';
 import { defaultModal } from './modal';
 import 'slick-carousel';
 import { setCarouselState, onSlickCarouselChange, onUserCarouselChange } from '../common/carousel';
@@ -34,6 +35,9 @@ export default function (context) {
                 $carousel.slick();
             }
 
+            /* eslint-disable no-new */
+            new Review({ $context: modal.$content });
+
             return new ProductDetails(modal.$content.find('.quickView'), context);
         });
     });
diff --git a/assets/js/theme/product.js b/assets/js/theme/product.js
index b31eeeff93..a81d23e527 100644
--- a/assets/js/theme/product.js
+++ b/assets/js/theme/product.js
@@ -42,7 +42,7 @@ export default class Product extends PageManager {
 
         if ($reviewForm.length === 0) return;
 
-        const review = new Review($reviewForm);
+        const review = new Review({ $reviewForm });
 
         $('body').on('click', '[data-reveal-id="modal-review-form"]', () => {
             validator = review.registerValidation(this.context);
diff --git a/assets/js/theme/product/reviews.js b/assets/js/theme/product/reviews.js
index 0b6902dcc3..5d5ccf6926 100644
--- a/assets/js/theme/product/reviews.js
+++ b/assets/js/theme/product/reviews.js
@@ -1,20 +1,24 @@
 import nod from '../common/nod';
-import { CollapsibleEvents } from '../common/collapsible';
+import collapsibleFactory, { CollapsibleEvents } from '../common/collapsible';
 import forms from '../common/models/forms';
 import { safeString } from '../common/utils/safe-string';
 import { announceInputErrorMessage } from '../common/utils/form-utils';
 
 export default class {
-    constructor($reviewForm) {
-        this.validator = nod({
-            submit: $reviewForm.find('input[type="submit"]'),
-            tap: announceInputErrorMessage,
-        });
+    constructor({ $reviewForm, $context }) {
+        if ($reviewForm && $reviewForm.length) {
+            this.validator = nod({
+                submit: $reviewForm.find('input[type="submit"]'),
+                tap: announceInputErrorMessage,
+            });
+        }
 
-        this.$reviewsContent = $('#product-reviews');
+        this.$context = $context;
+        this.$reviewsContent = $('#product-reviews', this.$context);
         this.$reviewsContentList = $('#productReviews-content', this.$reviewsContent);
         this.$collapsible = $('[data-collapsible]', this.$reviewsContent);
 
+        collapsibleFactory('[data-collapsible]', { $context });
         this.initLinkBind();
         this.injectPaginationLink();
         this.setupReviews();
@@ -25,12 +29,16 @@ export default class {
      * The browser jumps to the review page and should expand the reviews section
      */
     initLinkBind() {
-        $('#productReview_link').on('click', () => this.expandReviews());
+        $('#productReview_link').on('click', e => this.expandReviews(e));
     }
 
     setupReviews() {
         // We're in paginating state, reviews should be visible
-        if (window.location.hash && window.location.hash.indexOf('#product-reviews') === 0) {
+        if (
+            window.location.hash
+            && window.location.hash.indexOf('#product-reviews') === 0
+            && this.$reviewsContent.parents('.quickView').length === 0
+        ) {
             this.expandReviews();
             return;
         }
@@ -40,7 +48,8 @@ export default class {
     }
 
     expandReviews() {
-        $('.productView-reviewTabLink').trigger('click');
+        $('.productView-reviewTabLink', this.$context).trigger('click');
+
         if (!this.$reviewsContentList.hasClass('is-open')) {
             this.$collapsible.trigger(CollapsibleEvents.click);
         }
diff --git a/templates/components/products/quick-view.html b/templates/components/products/quick-view.html
index cc2709e5d8..578179ea33 100644
--- a/templates/components/products/quick-view.html
+++ b/templates/components/products/quick-view.html
@@ -1,3 +1,7 @@
 <div class="modal-body quickView">
     {{> components/products/product-view schema=false}}
+
+    {{#all settings.show_product_reviews theme_settings.show_product_reviews (if theme_settings.show_product_details_tabs '!==' true)}}
+        {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
+    {{/all}}
 </div>
diff --git a/templates/components/products/reviews.html b/templates/components/products/reviews.html
index 8f8dee1a7c..18cb5cffb3 100644
--- a/templates/components/products/reviews.html
+++ b/templates/components/products/reviews.html
@@ -40,7 +40,7 @@ <h5 itemprop="name" class="productReview-title">{{{ sanitize title }}}</h5>
             </li>
             {{/each}}
         </ul>
-        {{> components/common/paginator pagination.reviews}}
+        {{> components/common/paginator pagination.reviews reload=true}}
     </div>
 </section>
 {{/if}}