service-packages defects

src/layouts/service-packages/service-package-question/service-package-question.vue

@@ -31,8 +31,6 @@ const packageNames = {
     TIER_THREE: 'TierThree'
 };
 
-const store = useMainStore();
-
 export default {
     name: 'service-package-question',
     components: {
@@ -48,6 +46,10 @@ export default {
             default: () => []
         }
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     emits: ['vapsItemsSelected'],
     data() {
         return {
@@ -97,7 +99,7 @@ export default {
             return modifiedAnswers;
         },
         isRecalibrationOnOrder() {
-            return this.lineItemsContainsPartType(partTypeStrings.RECALIBRATION);
+            return this.mainStore.hasRecalibrationPart;
         },
         frontWipersApplicableForTierTwo() {
             const frontWipersAreAvailable = this.lineItemsContainsPartType(partTypeStrings.FRONT_WIPER);
@@ -262,7 +264,7 @@ export default {
         },
         glassToReplaceContainsGlassLocation(glassLocation) {
             const glassLocationMatches =
-                store.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
+                this.mainStore.order.damage.glassToReplace?.filter((glassToReplace) => glassToReplace.glassLocation === glassLocation) ?? [];
             return !!glassLocationMatches.length;
         }
     }
@@ -278,6 +280,7 @@ export default {
 
 @include media-breakpoint-up(md) {
     :deep(.package-main) {
+        justify-content: center;
         padding: 0 1.5rem 0 1.5rem;
         .package-wrapper:nth-child(2) {
             margin-left: 0.5rem;

src/layouts/service-packages/service-packages.vue

@@ -10,11 +10,15 @@
             </div>
             <div class="iss-heritage-container-width">
                 <div class="service-packages-container">
-                    <siteSubHeader
-                        class="subheader mt-5"
-                        justification="center"
-                        cmsWidgetName="SiteSubHeaderWidget"
-                        issContainingPage="service-packages" />
+                    <h5
+                        ref="siteSubHeader"
+                        class="sub-header"
+                        v-html="servicePackagesSubHeader"></h5>
+                    <div
+                        ref="secondaryText"
+                        class="mb-4 text-center"  
+                        v-html="secondaryText">
+                    </div>
                     <servicePackageQuestion
                         ref="servicePackage"
                         cmsWidgetName="ServicePackage"
@@ -55,10 +59,6 @@
             <contentGroupModal
                 ref="RearWiperModal"
                 cmsWidgetName="RearWiperModal" />
-            <contentGroupModal
-                ref="RecalModal"
-                cssModalHeadlineClass="text-start"
-                cmsWidgetName="RecalModal" />
         </div>
     </Form>
 </template>
@@ -89,7 +89,6 @@ export default {
     components: {
         siteHeader,
         siteFooter,
-        siteSubHeader,
         Form,
         servicePackageQuestion,
         loadingModal,
@@ -182,6 +181,20 @@ export default {
     computed: {
         PriceDisclaimerText() {
             return this.getCmsContent('PriceDisclaimerWidget', 'Text');
+        },
+        vehicleMake() {
+            return store.order.vehicle.make.toUpperCase();
+        },
+        vehicleModel() {
+            return store.order.vehicle.model.toUpperCase();
+        },
+        servicePackagesSubHeader() {
+            return this.getCmsContent('SiteSubHeaderWidget', 'SubHeaderText')
+                .replace('{custom:vehicleMake}', this.vehicleMake)
+                .replace('{custom:vehicleModel}', this.vehicleModel);
+        },
+        secondaryText() {
+            return this.getCmsContent('SiteSubHeaderWidget', 'SecondaryText');
         }
     },
     methods: {
@@ -244,7 +257,7 @@ export default {
         padding-left: .9375rem;
         padding-right: .9375rem;
         display: block;
-        margin: 0 auto;
+        margin: 1.5rem auto;
         :deep(.subheader-primary) {
             display: block;
         }
@@ -274,4 +287,10 @@ export default {
 .back-link {
     margin-left: 1rem;
 }
+
+.sub-header {
+    text-align: center;
+    color: $black;
+    line-height: 2rem;
+}
 </style>