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

…ank pop up on second click

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)

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);
             });
         });
     }

assets/js/theme/global/modal.js

@@ -39,6 +39,8 @@ function getViewportHeight(multipler = 1) {
 }
 
 function wrapModalBody(content) {
+    // console.log('###content: ', content);
+    // const $modalBody = $(`<iframe src=${content}>`);
     const $modalBody = $('<div>');
 
     $modalBody
@@ -224,7 +226,7 @@ export class Modal {
     onModalClose() {
         $('body').removeClass(bodyActiveClass);
 
-        this.clearContent();
+        // this.clearContent();
     }
 
     onModalClosed() {

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>