styling revisions

src/layouts/tpa-confirmation/tpa-confirmation.vue

@@ -15,35 +15,32 @@
                         class="mb-4"
                         cmsWidgetName="VehicleBannerWidget"
                         :displayGenericVehicleImage="false" />
-                    <div class="header-container">
+                    <div class="tpa-header text-center pb-2 fs-5">
                         <img :src="tpaConfirmationImage" />
                         <span v-html="tpaConfirmationHeaderText"></span>
                     </div>
-                    <div class="subheader-container">
+                    <div class="tpa-subheader text-center mb-3 fw-bold">
                         <span v-html="tpaConfirmationSubheaderText"></span>
                     </div>
                     <textBlock
-                        id="tpaConfirmationBodyOne"
                         ref="tpaConfirmationBodyOne"
+                        class="tpa-body-one mt-0"
                         :customText="tpaConfirmationBodyOne" />
                     <textBlock
-                        id="tpaConfirmationBodyTwo"
                         ref="tpaConfirmationBodyTwo"
                         :customText="tpaConfirmationBodyTwo"
-                        class="small mb-4" />
+                        class="small mt-0 mb-4" />
                     <textBlock
-                        id="contactCarrierText"
                         ref="contactCarrierText"
                         :customText="contactCarrierText"
-                        class="small"
+                        class="contact-carrier-text small"
                         @click="setBailoutInfo()" />
                     <div
-                        id="confirmationOrderDetailsSection"
                         ref="confirmationOrderDetailsSection">
                         <textBlock
-                            id="tpaConfirmationOrderDetailsTitle"
                             ref="tpaConfirmationOrderDetailsTitle"
                             :customText="orderDetailsTitle"
+                            class="order-details-title fw-bold lh-base mt-5 mb-4"
                             :marginTopSizeOverride="4" />
                         <textBlock
                             id="tpaConfirmationOrderDetailsBody"
@@ -75,12 +72,7 @@ import textBlock from '@/digital-components/text-block/text-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 
 // Supporting files
-import { doesCopyContainRouterLink,
-    fetchCmsContentForPage,
-    splitCopyOnCMSPlaceHolder,
-    getRouterLinkRouteFromCopy,
-    getRouterLinkDisplayTextFromCopy,
-    processIfStatements } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
@@ -174,9 +166,10 @@ export default {
         carrierName() {
             return this.mainStore.issConfig.clientName;
         },
-        // TODO: Replace with actual carrier URL
         carrierUrl() {
-            return '//www.libertymutual.com';
+            const url = this.mainStore.issConfig.successReturnURL;
+            console.log(url);
+            return url;
         }
     },
     mounted() {
@@ -211,41 +204,28 @@ export default {
                 this.mainStore.setBailout(this.$router.currentRoute, bailoutMessage.RequestCallback);
             },
             toDisplayPhoneNumber,
-            toTitleCase,
             formatAmountInDollars,
-            splitCopyOnCMSPlaceHolder,
-            doesCopyContainRouterLink,
-            getRouterLinkRouteFromCopy,
-            getRouterLinkDisplayTextFromCopy,
             processIfStatements
         }
 };
 </script>
 <style lang="scss" scoped>
-.header-container {
-    text-align: center;
-    padding-bottom: 0.75rem;
-    font-size: 1.25rem;
+.tpa-header {
     color: $black;
 
     span {
-        margin-left: 0.5rem;
+        margin-left: map-get($spacers, 2);
     }
 }
 
-.subheader-container {
-    text-align: center;
-    padding-bottom: 1rem;
-    font-weight: 500;
+.tpa-subheader {
     color: $black;
 }
 
-#tpaConfirmationBodyOne {
-    margin-top: 0;
-
+.tpa-body-one {
     :deep(p) {
-        line-height: 1.5rem;
-        font-size: 0.875rem;
+        line-height: map-get($spacers, 5);
+        font-size: $h6-font-size;
 
         strong {
             color: $black;
@@ -253,24 +233,14 @@ export default {
     }
 }
 
-#tpaConfirmationBodyTwo {
-    line-height: 1.5rem;
-    margin-top: 0;
-}
-
-#tpaConfirmationOrderDetailsTitle {
-   font-weight: 500;
-   line-height: 1.5rem;
-   color: $black;
-   margin-bottom: 1rem;
-   margin-top: 2rem;
-}
-
-#contactCarrierText {
-    line-height: 1.5rem;
-
+.contact-carrier-text {
     :deep(a) {
-        font-weight: 500;
+        font-weight: $font-weight-bold;
     }
 }
+
+.order-details-title {
+   color: $black;
+}
+
 </style>