fix(storefront): BCTHEME-1633 Write a Review on product page shows bl…

…ank pop up on second click
bigcommerce · Jun 19, 2023 · 817e145 · 817e145
1 parent 0efd14f
commit 817e145
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - (sanitize product.description) in the theme results to ‘error length of description’ from Google indexing for lengthy product description [#2363](https://github.com/bigcommerce/cornerstone/pull/2363)
 - Added style configs to payment buttons  [#2361](https://github.com/bigcommerce/cornerstone/pull/2361)
 - Bump Stencil utils to 6.15.1 [#2365][https://github.com/bigcommerce/cornerstone/pull/2365]
+- Write a Review on product page shows blank pop up on second click. [#2368][https://github.com/bigcommerce/cornerstone/pull/2368]
 
 ## 6.11.0 (05-24-2023)
 - Reverted fix for sold-out badge appearance [#2354](https://github.com/bigcommerce/cornerstone/pull/2354)

diff --git a/assets/js/theme/gift-certificate.js b/assets/js/theme/gift-certificate.js
@@ -171,6 +171,26 @@ export default class GiftCertificate extends PageManager {
             }
         });
 
+        const createFrame = (container, html) => {
+            const frame = $('<iframe />').width('100%').attr('frameBorder', '0').appendTo(container)[0];
+
+            // Grab the frame's document object
+            const frameDoc = frame.contentWindow ? frame.contentWindow.document : frame.contentDocument;
+
+            frameDoc.open();
+            frameDoc.write(html);
+            frameDoc.close();
+
+            // Calculate max height for the iframe
+            const maxheight = Math.max(($(window).height() - 300), 300);
+
+            // Auto adjust the iframe's height once its document is ready
+            $(frameDoc).ready(() => {
+                const height = Math.min(frameDoc.body.scrollHeight + 20, maxheight);
+                $(frame).height(height);
+            });
+        };
+
         $('#gift-certificate-preview').click(event => {
             event.preventDefault();
 
@@ -190,7 +210,10 @@ export default class GiftCertificate extends PageManager {
                     return modal.updateContent(this.context.previewError);
                 }
 
-                modal.updateContent(content, { wrap: true });
+                modal.updateContent();
+
+                const container = $('#modal-content');
+                createFrame(container, content);
             });
         });
     }

diff --git a/assets/js/theme/global/modal.js b/assets/js/theme/global/modal.js
@@ -223,8 +223,6 @@ export class Modal {
 
     onModalClose() {
         $('body').removeClass(bodyActiveClass);
-
-        this.clearContent();
     }
 
     onModalClosed() {

diff --git a/templates/components/common/modal/modal.html b/templates/components/common/modal/modal.html
@@ -1,5 +1,5 @@
 <div id="modal" class="modal" data-reveal data-prevent-quick-search-close>
     {{> components/common/modal/modal-close-btn}}
-    <div class="modal-content"></div>
+    <div id="modal-content" class="modal-content"></div>
     <div class="loadingOverlay"></div>
 </div>