Merge pull request #1482 from Safelite/CSR-1390-dynamic-iframe-height

CSR-1390 dynamic resize of iFrame

package-lock.json

@@ -14,6 +14,7 @@
         "canvas-confetti": "^1.4.0",
         "core-js": "^3.6.5",
         "http-status-codes": "^2.1.4",
+        "iframe-resizer": "^4.3.7",
         "jest-junit": "^13.0.0",
         "maska": "^1.5.0",
         "vee-validate": "^4.5.7",
@@ -11813,6 +11814,18 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "node_modules/iframe-resizer": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
+      "integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q==",
+      "engines": {
+        "node": ">=0.8.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/davidjbradshaw/iframe-resizer/blob/master/FUNDING.md"
+      }
+    },
     "node_modules/ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
@@ -33845,6 +33858,11 @@
       "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE=",
       "dev": true
     },
+    "iframe-resizer": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/iframe-resizer/-/iframe-resizer-4.3.7.tgz",
+      "integrity": "sha512-a3EGVScU9NtUpj6lWvGhVw3EfOw5AopRs5xGsQU385kWdgQt++OsD6PCnTV+8YkgBu/g28rLIh0EztFg9UQr1Q=="
+    },
     "ignore": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",

package.json

@@ -17,6 +17,7 @@
     "canvas-confetti": "^1.4.0",
     "core-js": "^3.6.5",
     "http-status-codes": "^2.1.4",
+    "iframe-resizer": "^4.3.7",
     "jest-junit": "^13.0.0",
     "maska": "^1.5.0",
     "vee-validate": "^4.5.7",

public/css/hop-styling.css

@@ -75,14 +75,11 @@ body .creditCardSpecific div {
   padding: 8px 0;
 }
 body .creditCardSpecific div .headerlinecontainer {
-  padding: 0;
+  display: none;
 }
 body .creditCardSpecific div label {
   font-weight: 500;
 }
-body .creditCardSpecific div:first-child {
-  display: none;
-}
 body .creditCardSpecific #infoRow2 {
   margin-bottom: 0;
 }

public/scss/hop-styling.scss

@@ -88,14 +88,11 @@ body {
         div {
             padding: 8px 0;
             .headerlinecontainer {
-                padding: 0;
+                display: none;
             }
             label {
                 font-weight: 500;
             }
-            &:first-child {
-                display: none;
-            }
         }
         #infoRow2 {
             margin-bottom: 0;

src/layouts/payment/payment.vue

@@ -12,6 +12,7 @@
                 <div class="col-md-6 col-xl-4 p-0">
                     <div id="card-container">
                         <iframe
+                            v-resize
                             ref="paymentFrame"
                             class="hop-iframe payment-iframe"
                             name="card-frame"
@@ -202,7 +203,7 @@ import { paymentMethods } from "@/constants/payment-method-constants";
 import { AppointmentTypeStrings } from "@/constants/schedule-constants";
 import baseMixin from "@/mixins/base-mixin.js";
 
-// Validation
+import iframeResize from "../../../node_modules/iframe-resizer/js/iframeResizer.js";
 
 export default {
     name: "payment",
@@ -235,6 +236,18 @@ export default {
             paypalPayment: this.isPaypal(),
         };
     },
+    directives: {
+        resize: {
+            mounted: function (el) {
+                el.addEventListener("load", () => {
+                    iframeResize({ checkOrigin: false }, el);
+                });
+            },
+            unmounted: function (el) {
+                el.iFrameResizer.removeListeners();
+            },
+        },
+    },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
@@ -487,7 +500,7 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 1320px;
+    min-height: 1120px;
     width: 100%;
     border: 0 none;
 }