Merge pull request #2176 from Safelite/CSR-2435-adjust-banner-width

CSR-2435 make alert span full width.

src/layouts/payment-method/payment-method.spec.js

@@ -45,7 +45,6 @@ describe("payment-method.vue", () => {
 });
 
 function setupMocks() {
-
     store.getters = {
         damage: {},
         lineItems: {

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

@@ -631,7 +631,7 @@ export default {
                     city: this.$store.getters.order.serviceLocation?.city,
                     state: this.$store.getters.order.serviceLocation?.state,
                     zipCode: this.$store.getters.order.serviceLocation?.zipCode,
-                }
+                };
             } else {
                 return this.$store.getters.order.serviceLocation?.provider?.address;
             }
@@ -662,11 +662,10 @@ export default {
                 : this.ServiceLocationFullAddress.zipCode;
         },
         AppointmentWordingText() {
-            return this.getCmsContent("ApptDetailsSnapshotWidget", "BodyText")
-                ?.replaceAll(
-                    "{custom:ADDRESS}",
-                    this.ServiceLocationFullAddressText
-                );
+            return this.getCmsContent("ApptDetailsSnapshotWidget", "BodyText")?.replaceAll(
+                "{custom:ADDRESS}",
+                this.ServiceLocationFullAddressText
+            );
         },
         isRecalibrationOnOrder() {
             const order = baseMixin.methods.hasSubmittedOrder()
@@ -857,7 +856,7 @@ export default {
 .appt-details-snapshot {
     :deep(p) {
         margin: 0.75rem 0 1rem 0;
-        font-size: .875rem;
+        font-size: 0.875rem;
         padding: 0;
         text-transform: capitalize;
         span {

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

@@ -11,7 +11,7 @@
                 <span class="label">Appointment details</span>
             </a>
         </div>
-        
+
         <div v-html="apptWordingText"></div>
 
         <div class="review-table px-4">

src/layouts/payment/payment.vue

@@ -606,7 +606,9 @@ export default {
                 if (item.name !== null && item.category != "promos") {
                     const total = (item.salesTax + item.subTotal).toFixed(2);
                     if (total > 0) {
-                        lineItems.push(`${item.name}|${(item.salesTax + item.subTotal).toFixed(2)}|1`);
+                        lineItems.push(
+                            `${item.name}|${(item.salesTax + item.subTotal).toFixed(2)}|1`
+                        );
                     }
                 }
             });

src/layouts/quote/afterpay-modal-banner/afterpay-modal-banner.vue

@@ -2,7 +2,7 @@
     <div class="alert fade show my-2 py-2 border-0 alert-info" role="alert">
         <component :is="'script'" src="https://js.afterpay.com/afterpay-1.x.js" async></component>
 
-        <div class="mx-4 my-0 fw-bold alert-heading">
+        <div class="mx-4 my-0 fw-bold alert-heading text-center">
             <span v-for="token in afterpayCopyTokens" :key="token">
                 <span v-if="isAfterpayPriceToken(token)">{{ afterpayPrice }}</span>
                 <span v-else-if="isInlineImageToken(token)">
@@ -13,8 +13,7 @@
                     {{ token }}
                 </span>
             </span>
-        </div>
-        <div class="mx-4 my-0 fw-bold alert-heading">
+            &nbsp;
             <a
                 id="afterpay-learnmore"
                 href="#"
@@ -73,7 +72,7 @@ export default {
             return splitCopyOnCMSPlaceHolder(this.getCmsContent(this.cmsWidgetName, "HeaderText"));
         },
         modalCopy() {
-            return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
+            return this.getCmsContent(this.cmsWidgetName, "BodyText");
         },
         afterpayPrice() {
             let allLineItems = getArrayOfAllLineItemsAndChildParts(this.lineItems);
@@ -127,5 +126,8 @@ export default {
     & .alert-heading {
         font-size: 0.875rem;
     }
+    #afterpay-learnmore {
+        white-space: nowrap;
+    }
 }
 </style>

src/layouts/quote/quote.vue

@@ -38,7 +38,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+                <div class="col-md-12 col-xl-8 p-md-0">
                     <!-- If Cash AND vehicle does not require recal OR if Cash AND State requires showing recal, then show Afterpay banner -->
                     <afterpayModalBanner
                         v-if="showAfterpayBanner"
@@ -61,7 +61,10 @@
                         :taxPromos="false"
                         :useDefaultCashParentAccount="true"
                         modalWidgetName="PromoModalWidget" />
-
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
                     <contentGroupModal ref="RearWiperModal" cmsWidgetName="RearWiperModal" />