fix(storefront): BCTHEME-1633 Write a Review on product page shows blank pop up on second click

CHANGELOG.md

@@ -10,6 +10,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]
 - Added ACH payment method section to My Account -> Payment Methods page [#2362](https://github.com/bigcommerce/cornerstone/pull/2362)
 - Remove data_tag_enabled check from everywhere [#2369][https://github.com/bigcommerce/cornerstone/pull/2369]
 

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

@@ -223,8 +223,6 @@ export class Modal {
 
     onModalClose() {
         $('body').removeClass(bodyActiveClass);
-
-        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>