Merging from develop

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

src/mixins/base-mixin.js

@@ -89,7 +89,7 @@ export default {
                 );
             });
 
-            let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice);
+            let totalPrice = this.getTotalPriceOfAllLineItemsAndChildParts(lineItemsToPrice, false);
             return totalPrice;
         },
         filterOutFees(lineItems) {
@@ -101,20 +101,30 @@ export default {
             });
             return filteredLineItems;
         },
-        getTotalPriceOfAllLineItemsAndChildParts(lineItems) {
+        getTotalPriceOfAllLineItemsAndChildParts(lineItems, includeTax) {
             let totalPrice = 0;
             lineItems.forEach((lineItem) => {
-                totalPrice += this.getTotalLineItemPrice(lineItem);
+                totalPrice += this.getTotalLineItemPrice(lineItem, includeTax);
                 if (lineItem.childParts) {
                     totalPrice += this.getTotalPriceOfAllLineItemsAndChildParts(
-                        lineItem.childParts
+                        lineItem.childParts,
+                        includeTax
                     );
                 }
             });
             return totalPrice;
         },
-        getTotalLineItemPrice(lineItem) {
+        getTotalLineItemPrice(lineItem, includeTax) {
-            return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
+            if (includeTax) {
+                return (
+                    lineItem.kitPrice +
+                    lineItem.laborAmount +
+                    lineItem.sellingPrice +
+                    lineItem.salesTax
+                );
+            } else {
+                return lineItem.kitPrice + lineItem.laborAmount + lineItem.sellingPrice;
+            }
         },
         getDisplayAmountDue(lineItems) {
             return this.getAmountDue(lineItems).toLocaleString("en-US", {
@@ -125,15 +135,19 @@ export default {
         getAmountDue(lineItems) {
             var amountDue = 0;
             if (lineItems.glassParts) {
-                amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.glassParts);
+                amountDue = this.getTotalPriceOfAllLineItemsAndChildParts(
+                    lineItems.glassParts,
+                    true
+                );
             }
             if (lineItems.supportingItems) {
                 amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(
-                    lineItems.supportingItems
+                    lineItems.supportingItems,
+                    true
                 );
             }
             if (lineItems.vaps) {
-                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps);
+                amountDue += this.getTotalPriceOfAllLineItemsAndChildParts(lineItems.vaps, true);
             }
             return amountDue;
         },