Partial modification of tpa-submit

src/layouts/tpa-search/tpa-search.vue

@@ -380,6 +380,7 @@ export default {
             }
         }
 };
+
 </script>
 
 <style lang="scss" scoped>

src/layouts/tpa-submit/review-block/review-block.vue

@@ -0,0 +1,69 @@
+<template>
+    <div class="py-3">
+        <div class="d-flex">
+            <textBlock
+                :cmsWidgetName="headerCmsWidgetName"
+                :customText="customHeaderText"
+                typeStyle="body small bold dark"
+                marginTopSizeOverride="0" />
+            <textLink
+                linkType="textSmall"
+                text="Edit"
+                class="ml-auto"
+                useLoadingModal
+                href="javascript:void(0)"
+                @click-event="linkClicked">
+                <template
+                    v-if="editScreenReaderTextCmsWidgetName"
+                    #after-text>
+                    <span class="sr-only"> {{ screenReaderOnlyText }} </span>
+                </template>
+            </textLink>
+        </div>
+        <!-- how about a p instead of div with html -->
+        <div
+            v-for="line in content"
+            :key="line"
+            class="small review-block-content"
+            data-test="contentLine"
+            v-html="line"></div>
+    </div>
+
+    <div>
+        <!-- TODO title -->
+        <!-- TODO edit button -->
+        <!-- TODO lines -->
+    </div>
+</template>
+
+<script>
+import textBlock from "@/digital-components/text-block/text-block";
+import textLink from "@/ux-components/text-link/text-link";
+
+export default {
+    name: 'review-block',
+    components: [
+        textBlock,
+        textLink
+    ],
+    props: {
+        headerCmsWidgetName: String,
+        customHeaderText: String,
+        // Specifically an array of strings.
+        content: Array,
+        editScreenReaderTextCmsWidgetName: String,
+        lines: Array
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+    },
+    methods: {
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/layouts/tpa-submit/tpa-submit.spec.js

@@ -0,0 +1,3 @@
+// TODO
+// Write test cases
+// implement tests

src/layouts/tpa-submit/tpa-submit.vue

@@ -1,5 +1,64 @@
 <template>
     <Form
+        ref="theForm"
+        v-slot="{ meta }"
+        @submit="onSubmit"
+        @invalidSubmit="onInvalidSubmit">
+        <div class="page-container-grouped-styles">
+            <div class="fade-on-route-transition position-relative">
+                <siteHeader
+                    ref="siteHeader"
+                    :cmsWidgetName="widget.siteHeader" />
+                <div class="container-fluid px-6">
+                    <vehicleBanner
+                        :cmsWidgetName="widget.vehicleBanner"
+                        :displayGenericVehicleImage="false" />
+                    <textBlock
+                        :customText="subHeaderTitle"
+                        typeStyle="h5"
+                        justifyText="center"
+                        class="dark-header mt-4" />
+                    <textBlock
+                        :customText="subHeaderBody"
+                        typeStyle="body"
+                        justifyText="left"
+                        margin="mt-0 mb-2" />
+                    <buttonMain
+                        ref="buttonMain"
+                        isPrimary
+                        :buttonText="forwardButtonText"
+                        loaderColor="white"
+                        class="mb-2 w-100"
+                        @clickEvent="forwardButtonAction" />
+                    <hr />
+
+                    <textBlock
+                        customText="Service Summary"
+                        typeStyle="label bold"
+                        justifyText="justify-text-left"
+                        margin="mt-0"
+                        class="dark-header" />
+
+                    <!-- TODO Service Summary title -->
+                        <!-- TODO Vehicle piece -->
+                        <!-- TODO Damage piece -->
+                        <!-- TODO Preferred Shop piece -->
+                        <!-- TODO Contact details piece -->
+                    <!-- TODO Order details title -->
+                    <!-- TODO Order details body -->
+                    <!-- TODO Green Deductible Rectangle -->
+                    <siteFooter
+                        ref="siteFooter"
+                        class="mt-5"
+                        cmsWidgetName="SiteFooterWidget"
+                        :isForwardActionDisabled="!meta.valid"
+                        @backClicked="navigateBack"
+                        @forwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+    <!-- <Form
         ref="theForm"
         v-slot="{ meta }"
         @submit="onSubmit"
@@ -18,11 +77,14 @@
                 </div>
             </div>
         </div>
-    </Form>
+    </Form> -->
 </template>
 <script>
 // Components
 import siteHeader from '@/iss-components/site-header/site-header.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
+import textBlock from '@/digital-components/text-block/text-block.vue';
+import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 
 // Supporting files
@@ -30,64 +92,89 @@ 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.js';
 
 export default {
     name: 'tpa-submit',
     components: {
         siteHeader,
+        vehicleBanner,
+        textBlock,
+        buttonMain,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
-        // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: 'cmsContent',
                 promise: cmsContentPromise
-            }];
-
-        // use resultMap to populate layout content.
+            }
+        ];
         const resultMap = await settleAllPromises(promiseResultMap);
 
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
         });
     },
-    setup() {
-        const mainStore = useMainStore();
-        return { mainStore };
-    },
     data() {
-
+        return {
+            widget: {
+                siteHeader: 'SiteHeaderWidget',
+                siteSubHeader: 'SiteSubHeaderWidget',
+                vehicleBanner: 'VehicleBannerWidget',
+                footer: 'SiteFooterWidget'
+            },
+            widgetFields
+        };
+    },
+    computed: {
+        subHeaderTitle() {
+            return this.getCmsContent(this.widget.siteSubHeader, 'SubHeaderText');
+        },
+        subHeaderBody() {
+            const initial = this.getCmsContent(this.widget.siteSubHeader, 'SecondaryText');
+            const x = initial.replace('{custom:glassShop}', 'Random Shop Name');
+            return x;
+            // return this.getCmsContent(this.widget.siteSubHeader, 'SecondaryText');
+        },
+        forwardButtonText() {
+            return this.getCmsContent(this.widget.footer, 'ForwardButtonText');
+        }
+        // getSubheaderTextFromCms(cmsWidgetName) {
+        //     const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
+        //     console.log(JSON.stringify(subHeader));
+        //     return this.processIfStatements(subHeader, 'custom', this.getCustomValueFromString);
+        // }
     },
     methods:
         {
             backButtonAction() {
                 this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
             },
-
             forwardButtonAction() {
-                return this.navigateForward();
-            },
-
-            navigateForward() {
                 this.$router.navigate(
                     this.navigationScenarios.CLICKED_FORWARD,
                     this.$route
                 );
+            },
+            getCustomValueFromString(str) {
+                console.log(`string val: ${str}`);
+                switch (str) {
+                    case 'glassShop':
+                        return 'Fake Glass Shop';
+                    default:
+                        return null;
+                }
             }
         }
 };
 </script>
 <style lang="scss" scoped>
 .submit {
-
   margin-bottom:0.75rem;
 }