tpa-conf WIP

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

@@ -8,13 +8,19 @@
             <div class="fade-on-route-transition position-relative">
                 <siteHeader cmsWidgetName="SiteHeaderWidget" />
                 <div class="container-fluid pb-2 confirmation">
-                    <p>Placeholder for tpa-confirmation page</p>
+                    <vehicleBanner
+                        class="mb-4"
+                        cmsWidgetName="VehicleBannerWidget"
+                        :displayGenericVehicleImage="false" />
+                    <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />
+                    <textBlock
+                        :customText="tpaConfirmationBody" />
                     <siteFooter
-                    ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @backClicked="navigateBack" />
+                        ref="siteFooter"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @ForwardClicked="forwardButtonAction"
+                        @backClicked="navigateBack" />
                 </div>
             </div>
         </div>
@@ -23,19 +29,26 @@
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
+import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
 // Supporting files
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import settleAllPromises from '@/helpers/layout-helper';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import { useMainStore } from '@/store';
+import widgetFields from '@/constants/cms-widget-fields';
 
 export default {
     name: 'tpa-confirmation',
     components: {
         siteHeader,
         siteFooter,
+        vehicleBanner,
+        siteSubHeader,
+        textBlock,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
@@ -60,6 +73,16 @@ export default {
         return { mainStore };
     },
     data() {
+        return {
+            widget: {
+                tpaConfirmation: 'TPAConfirmationContent'
+            }
+        };
+    },
+    computed: {
+        tpaConfirmationBody() {
+            return this.getCmsContent(this.widget.tpaConfirmation, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+        }
     },
     methods:
         {