Merge branch 'develop' into rlsmerge/develop-to-heavy.truck

package-lock.json

@@ -8,6 +8,7 @@
       "name": "Safelite",
       "version": "0.1.0",
       "dependencies": {
+        "@iframe-resizer/child": "^5.3.3",
         "axios": "^0.23.0",
         "bootstrap": "^5.3.3",
         "core-js": "^3.38.1",
@@ -2162,6 +2163,16 @@
       "dev": true,
       "license": "BSD-3-Clause"
     },
+    "node_modules/@iframe-resizer/child": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@iframe-resizer/child/-/child-5.3.3.tgz",
+      "integrity": "sha512-A+avzzQ6R5AaK0RQ/v0sxrN/S7zeS0U7TE/Jcc2Wln0gpVHpkEMHLOYVBAS2ho8ZA6yhbyZeNoDCh3RMtCp14w==",
+      "license": "GPL-3.0",
+      "funding": {
+        "type": "individual",
+        "url": "https://iframe-resizer.com/pricing/"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@iframe-resizer/child": "^5.3.3",
     "axios": "^0.23.0",
     "bootstrap": "^5.3.3",
     "core-js": "^3.38.1",

src/experiment-components/donation-block.vue

@@ -12,7 +12,8 @@
                 </div>
                 <div>
                     <p class="small subheadline mb-2" v-html="DonationSubHeadline"></p>
-                    <p class="caption mb-0" v-html="DonationBodyText"></p>
+                    <span class="caption mb-0" v-html="DonationBodyText"></span>
+                    &nbsp;
                     <textLink
                         linkType="newWindowLink"
                         text="Learn more"
@@ -61,11 +62,11 @@
                 <div class="col-12">
                     <div
                         v-if="showDonationSuccess"
-                        class="d-flex justify-content-center align-items-center btn-success w-100 mb-2"
+                        class="d-flex justify-content-center align-items-center btn-success w-100"
                         v-html="DonationThanksAlertWidget"></div>
                 </div>
             </div>
-            <div class="row px-4">
+            <div class="row px-4 mt-2">
                 <div class="col">
                     <alert
                         v-if="showDonationError"
@@ -75,7 +76,7 @@
             </div>
             <div class="row">
                 <div class="col-12">
-                    <p class="my-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
+                    <p class="mt-0 mb-4 mx-0 text-center caption" v-html="DonationFooterText"></p>
                 </div>
             </div>
         </form>
@@ -142,7 +143,7 @@ export default {
 
 <style lang="scss" scoped>
 .donation-block {
-    padding: 1rem 0;
+    padding: 1rem 0 0 0;
     background-color: $gray-100;
     border-radius: 0;
 

src/fmg-components/address-questions/address-questions.vue

@@ -124,10 +124,6 @@ export default {
             type: Boolean,
             default: false,
         },
-        isAddressFieldFocused: {
-            type: Boolean,
-            default: true,
-        },
     },
     data() {
         return {
@@ -229,9 +225,6 @@ export default {
             ).then(() => {
                 // When loaded, trigger the setup
                 this.initializeAutocomplete();
-                if (this.isAddressFieldFocused) {
-                    this.addressField1.focus();
-                }
             });
         },
         initializeAutocomplete() {

src/fmg-components/cart/cart.vue

@@ -200,6 +200,7 @@ export default {
         isItac: Boolean,
         isNoComp: Boolean,
         isExpandedOnLoad: Boolean,
+        isMSRFeeApplicable: Boolean,
     },
     data() {
         return {
@@ -846,9 +847,6 @@ export default {
         isCashItacNoComp() {
             return !this.isInsurance || this.isITAC || this.isNoComp;
         },
-        getIsMSRFeeApplicableFromStore() {
-            return this.$store.getters.order.isMSRFeeApplicable;
-        },
         mobileFeeCartItemName() {
             return this.getCmsContent("MobileServiceTextWidget", "Text");
         },
@@ -865,7 +863,7 @@ export default {
                 (mobileFeeLineItem?.sellingPrice ?? 0);
 
             if (mobileTotal > 0) {
-                if (this.getIsMSRFeeApplicableFromStore) {
+                if (this.isMSRFeeApplicable) {
                     showMobileFeeCartItem = this.isCashItacNoComp;
                 } else {
                     showMobileFeeCartItem = true;

src/layouts/address-lookup/address-lookup.vue

@@ -19,8 +19,7 @@
                         ref="customerQuestions"
                         v-model="customerQuestions"
                         :validationRules="EmailOrSmsValidationRules"
-                        :isEmailOptional="IsEmailOptional"
-                        :isAddressFieldFocused="IsAddressFieldFocused" />
+                        :isEmailOptional="IsEmailOptional" />
                     <alert
                         ref="alertVinNotFound"
                         v-if="displayVinNotFoundAlert"
@@ -465,9 +464,6 @@ export default {
                 .replaceAll("{custom:vinYmmFound}", vinYmmFound)
                 .replaceAll("{custom:vinYmmExpected}", vinYmmExpected);
         },
-        IsAddressFieldFocused() {
-            return false;
-        },
     },
     watch: {
         customerQuestions: {

src/layouts/address-lookup/customer-questions/customer-questions.vue

@@ -1,9 +1,6 @@
 <template>
     <div class="customer-questions">
-        <addressQuestions
-            ref="addressQuestions"
-            v-model="customerModel.addressQuestions"
-            :isAddressFieldFocused="isAddressFieldFocused" />
+        <addressQuestions ref="addressQuestions" v-model="customerModel.addressQuestions" />
         <div class="row mb-4">
             <div class="col">
                 <textboxQuestion
@@ -90,11 +87,6 @@ export default {
         },
         validationRules: String,
         isEmailOptional: Boolean,
-        isAddressFieldFocused: {
-            required: false,
-            type: Boolean,
-            default: true,
-        },
     },
     computed: {
         customerModel: {

src/layouts/confirmation/confirmation.vue

@@ -62,7 +62,8 @@
                                 :shouldHideRecalibration="shouldHideRecalibration"
                                 :isExpandedOnLoad="false"
                                 :isItac="isItac"
-                                :isNoComp="isNoComp" />
+                                :isNoComp="isNoComp"
+                                :isMSRFeeApplicable="isMSRFeeApplicable" />
 
                             <div class="mt-3" v-if="DisplayFosterLove">
                                 <donationBlock
@@ -423,6 +424,9 @@ export default {
         damageInfo() {
             return this.submittedOrder?.damage;
         },
+        isMSRFeeApplicable() {
+            return this.submittedOrder?.isMSRFeeApplicable;
+        },
         isInsurance() {
             return this.submittedOrder?.payment?.isInsurance;
         },

src/layouts/payment-method/payment-method.vue

@@ -36,7 +36,8 @@
                         :shouldHideRecalibration="shouldHideRecalibration"
                         :isItac="isItac"
                         :isNoComp="isNoComp"
-                        :isExpandedOnLoad="false" />
+                        :isExpandedOnLoad="false"
+                        :isMSRFeeApplicable="isMSRFeeApplicable" />
 
                     <hr />
 
@@ -683,6 +684,9 @@ export default {
         damageInfo() {
             return this.$store.getters.damage;
         },
+        isMSRFeeApplicable() {
+            return this.$store.getters.order.isMSRFeeApplicable;
+        },
         isInsurance() {
             return this.hasSubmittedOrder()
                 ? this.getSubmittedOrder()?.payment.isInsurance

src/layouts/payment-pia-return/payment-pia-return.vue

@@ -15,6 +15,10 @@ import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form } from "vee-validate";
 import { paymentMethods } from "@/constants/payment-method-constants";
 import { routerParams } from "@/router/router-constants/router-params";
+// iframeResizer IS loaded into the page and necessary for the package to
+//   to auto scale the iFrame this page is loaded in
+// Do not remove despite showing as "unused" CASH-309
+import iframeResizer from "@iframe-resizer/child";
 
 export default {
     name: "payment-pia-return",