From 6ab9c412dc3d58382d6e0b14025064fba2198ac2 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 29 Nov 2023 10:40:32 -0500
Subject: [PATCH 01/18] Partial modification of tpa-submit

---
 src/layouts/tpa-search/tpa-search.vue         |   1 +
 .../review-block/review-block.spec.js         |   0
 .../tpa-submit/review-block/review-block.vue  |  69 ++++++++++
 src/layouts/tpa-submit/tpa-submit.spec.js     |   3 +
 src/layouts/tpa-submit/tpa-submit.vue         | 125 +++++++++++++++---
 5 files changed, 179 insertions(+), 19 deletions(-)
 create mode 100644 src/layouts/tpa-submit/review-block/review-block.spec.js
 create mode 100644 src/layouts/tpa-submit/review-block/review-block.vue
 create mode 100644 src/layouts/tpa-submit/tpa-submit.spec.js

diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 6c3941e0..dd6e4b2e 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -380,6 +380,7 @@ export default {
             }
         }
 };
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layouts/tpa-submit/review-block/review-block.spec.js b/src/layouts/tpa-submit/review-block/review-block.spec.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/layouts/tpa-submit/review-block/review-block.vue b/src/layouts/tpa-submit/review-block/review-block.vue
new file mode 100644
index 00000000..f22ce199
--- /dev/null
+++ b/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>
diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js
new file mode 100644
index 00000000..c730f97f
--- /dev/null
+++ b/src/layouts/tpa-submit/tpa-submit.spec.js
@@ -0,0 +1,3 @@
+// TODO
+// Write test cases
+// implement tests
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 2ddcf5b8..9e289407 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/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;
 }
 

From ef49dadbb2279555ce273228e2dd9e8b8a5029b1 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 18:49:24 -0500
Subject: [PATCH 02/18] Adding tpa submit page

---
 .../tpa-recal-toggle/tpa-recal-toggle.vue     |   1 +
 .../deductible-box/deductible-box.spec.js     |   0
 .../deductible-box/deductible-box.vue         |  33 ++
 .../tpa-submit/review-block/review-block.vue  |  66 ++--
 src/layouts/tpa-submit/tpa-submit.vue         | 284 ++++++++++++------
 .../router-constants/navigation-scenarios.js  |   6 +
 src/router/router-constants/routing-table.js  |  16 +
 src/store/index.js                            |   4 +-
 src/styles/common-typography-styles.scss      |  18 +-
 src/styles/ux-variables.scss                  |  20 +-
 10 files changed, 307 insertions(+), 141 deletions(-)
 create mode 100644 src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
 create mode 100644 src/layouts/tpa-submit/deductible-box/deductible-box.vue

diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
index a16de0f6..dfde755a 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
@@ -4,6 +4,7 @@
         class="tpa-toggle"
         :class="[isDetailVisible ? 'active' : '']"
         @click="handleClickToggle"></div>
+        <button>Edit Me!</button>
         <textLink
           id="moreDetails"
           linkType="text"
diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.vue b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
new file mode 100644
index 00000000..2546a200
--- /dev/null
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
+        <p class="deductible-box__text">
+            Deductible
+        </p>
+        <p class="deductible-box__text">
+            {{ value }}
+        </p>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'deductible-box',
+    props: {
+        value: String
+    }
+};
+
+</script>
+
+<style lang="scss" scoped>
+.deductible-box {
+    background-color: $green;
+}
+
+.deductible-box__text {
+    color: white;
+    font-weight: 500;
+    margin: 0;
+}
+</style>
diff --git a/src/layouts/tpa-submit/review-block/review-block.vue b/src/layouts/tpa-submit/review-block/review-block.vue
index f22ce199..1bc7133c 100644
--- a/src/layouts/tpa-submit/review-block/review-block.vue
+++ b/src/layouts/tpa-submit/review-block/review-block.vue
@@ -1,18 +1,16 @@
 <template>
-    <div class="py-3">
-        <div class="d-flex">
-            <textBlock
-                :cmsWidgetName="headerCmsWidgetName"
-                :customText="customHeaderText"
-                typeStyle="body small bold dark"
-                marginTopSizeOverride="0" />
+    <div class="review-block">
+        <div class="d-flex justify-content-between">
+            <p class="review-block__header small-strong pb-1">
+                {{ customHeaderText }}
+            </p>
             <textLink
                 linkType="textSmall"
-                text="Edit"
-                class="ml-auto"
+                :text="editLinkText"
                 useLoadingModal
                 href="javascript:void(0)"
-                @click-event="linkClicked">
+                class="link"
+                @clickEvent="editClicked">
                 <template
                     v-if="editScreenReaderTextCmsWidgetName"
                     #after-text>
@@ -20,50 +18,54 @@
                 </template>
             </textLink>
         </div>
-        <!-- how about a p instead of div with html -->
-        <div
-            v-for="line in content"
+        <p
+            v-for="line in lines"
             :key="line"
-            class="small review-block-content"
-            data-test="contentLine"
-            v-html="line"></div>
-    </div>
-
-    <div>
-        <!-- TODO title -->
-        <!-- TODO edit button -->
-        <!-- TODO lines -->
+            class="small review-block__body--line">
+            {{ line }}
+        </p>
     </div>
 </template>
 
 <script>
-import textBlock from "@/digital-components/text-block/text-block";
-import textLink from "@/ux-components/text-link/text-link";
+import textLink from '@/ux-components/text-link/text-link.vue';
 
 export default {
     name: 'review-block',
-    components: [
-        textBlock,
-        textLink
-    ],
+    components: { textLink },
     props: {
         headerCmsWidgetName: String,
         customHeaderText: String,
-        // Specifically an array of strings.
-        content: Array,
         editScreenReaderTextCmsWidgetName: String,
         lines: Array
     },
+    emits: ['click-edit'],
     data() {
         return {
+            editLinkText: 'Edit'
         };
     },
-    computed: {
-    },
     methods: {
+        editClicked() {
+            this.$emit('click-edit');
+        }
     }
 };
 </script>
 
 <style lang="scss" scoped>
+.review-block {
+    :deep(p) {
+        margin: 0;
+    }
+    .review-block__header {
+        color: $black;
+    }
+    .review-block__body--line {
+        color: $gray-600;
+    }
+    .link {
+        text-underline-offset: 1px;
+    }
+}
 </style>
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 9e289407..09f0a70f 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -1,7 +1,8 @@
 <template>
     <Form
-        ref="theForm"
+        ref="tpaSubmitFormRef"
         v-slot="{ meta }"
+        class="tpa-submit"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
         <div class="page-container-grouped-styles">
@@ -9,75 +10,79 @@
                 <siteHeader
                     ref="siteHeader"
                     :cmsWidgetName="widget.siteHeader" />
-                <div class="container-fluid px-6">
+                <div class="px-5">
                     <vehicleBanner
+                        ref="vehicleBanner"
                         :cmsWidgetName="widget.vehicleBanner"
-                        :displayGenericVehicleImage="false" />
+                        :displayGenericVehicleImage="false"
+                        class="mt-5" /> <!-- TODO fix styling -->
                     <textBlock
                         :customText="subHeaderTitle"
-                        typeStyle="h5"
                         justifyText="center"
-                        class="dark-header mt-4" />
+                        :marginTopSizeOverride="4"
+                        class="text-color--black fs-5 tpa-submit__title--line-height" />
                     <textBlock
-                        :customText="subHeaderBody"
-                        typeStyle="body"
-                        justifyText="left"
-                        margin="mt-0 mb-2" />
+                        id="tpaSubmitSubHeaderBodyOne"
+                        :customText="subHeaderBodyOne"
+                        class="small text-color--darker-gray" />
+                    <textBlock
+                        id="tpaSubmitSubHeaderBodyTwo"
+                        :customText="subHeaderBodyTwo"
+                        class="mb-4 small text-color--darker-gray" />
                     <buttonMain
                         ref="buttonMain"
                         isPrimary
                         :buttonText="forwardButtonText"
                         loaderColor="white"
-                        class="mb-2 w-100"
+                        class="w-100 mb-4"
                         @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 -->
+                    <hr class="mb-0" />
+                    <div id="serviceSummarySection">
+                        <textBlock
+                            id="tpaSubmitServiceSummaryTitle"
+                            :customText="serviceSummaryText"
+                            :marginTopSizeOverride="4"
+                            class="fw-bold fs-1 lh-lg text-color--black" />
+                        <div class="px-4 my-3">
+                            <div
+                                v-for="(section, index) in sections"
+                                :key="section.title">
+                                <hr
+                                    v-if="index !== 0"
+                                    class="my-3" />
+                                <reviewBlock
+                                    :id="'review-block-' + index"
+                                    :customHeaderText="section.title"
+                                    :lines="section.lines"
+                                    @clickEdit="() => section.onClickEdit()" />
+                            </div>
+                        </div>
+                    </div>
+                    <hr class="mb-0" />
+                    <div id="submitOrderDetailsSection">
+                        <textBlock
+                            id="tpaSubmitOrderDetailsTitle"
+                            :customText="orderDetailsTitle"
+                            :marginTopSizeOverride="4"
+                            class="fw-bold text-color--black" />
+                        <textBlock
+                            id="tpaSubmitOrderDetailsBody"
+                            :customText="orderDetailsBody"
+                            :marginTopSizeOverride="4"
+                            class="mb-4 px-4 small text-color--darker-gray" />
+                        <deductibleBox :value="deductibleBoxValue" />
+                    </div>
                     <siteFooter
                         ref="siteFooter"
                         class="mt-5"
-                        cmsWidgetName="SiteFooterWidget"
+                        :cmsWidgetName="widget.footer"
                         :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBack"
+                        @backClicked="backButtonAction"
                         @forwardClicked="forwardButtonAction" />
                 </div>
             </div>
         </div>
     </Form>
-    <!-- <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 cmsWidgetName="SiteHeaderWidget" />
-                <div class="container-fluid pb-2 submit">
-                    <p>Placeholder for TPA-Submit</p>
-                    <siteFooter
-                    ref="siteFooter"
-                    cmsWidgetName="SiteFooterWidget"
-                    :isForwardActionDisabled="!meta.valid"
-                    @ForwardClicked="forwardButtonAction"
-                    @backClicked="backButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form> -->
 </template>
 <script>
 // Components
@@ -85,14 +90,46 @@ 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 reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
+import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.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 widgetFields from '@/constants/cms-widget-fields.js';
+import { useMainStore } from '@/store';
+
+const VERIFYING_COVERAGE = 'Verifying coverage';
+
+// TODO move functions to general location
+function getStringWithCustomValues(str, customValueMap) {
+    let newString = str;
+    Object.entries(customValueMap).forEach((key, value) => {
+        newString = newString.replaceAll(`{custom:${key}}`, value);
+    });
+    return newString;
+}
+
+function getDisplayPhoneNumber(phoneNumber) {
+    return phoneNumber;
+}
+
+function getTitleCase(str) {
+    return str;
+}
+
+// TODO more elaborate
+function getAddressString(addressLine1, addressLine2, city, state, zipCode) {
+    return `${this.getTitleCase(addressLine1)}, ${this.getTitleCase(addressLine2)}, `
+        + `${this.getTitleCase(city)}, ${state} ${zipCode}`;
+}
+
+// TODO make round two decimal places and work for both strings and numbers
+function getDisplayDollars(amount) {
+    return `$${amount}`;
+}
 
 export default {
     name: 'tpa-submit',
@@ -101,81 +138,150 @@ export default {
         vehicleBanner,
         textBlock,
         buttonMain,
+        reviewBlock,
+        deductibleBox,
         siteFooter,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
-        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-        const promiseResultMap = [
-            {
-                resultKey: 'cmsContent',
-                promise: cmsContentPromise
-            }
-        ];
-        const resultMap = await settleAllPromises(promiseResultMap);
-
+        const cmsContent = await fetchCmsContentForPage(to.query.issPage);
         next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
+            vm.setCmsContent(cmsContent);
+            vm.setSections();
         });
     },
     data() {
+        const { companyName } = useMainStore().order.serviceLocation.provider;
         return {
+            sections: [],
             widget: {
                 siteHeader: 'SiteHeaderWidget',
                 siteSubHeader: 'SiteSubHeaderWidget',
+                serviceSummary: 'ServiceSummaryContent',
                 vehicleBanner: 'VehicleBannerWidget',
+                subheader: {
+                    vehicle: 'VehicleSubTitle',
+                    damage: 'DamageSubTitle',
+                    shop: 'PreferredShopSubTitle',
+                    contactInfo: 'ContactDetailsSubTitle'
+                },
+                orderDetails: 'OrderDetailsContent',
                 footer: 'SiteFooterWidget'
             },
-            widgetFields
+            companyName,
+            customValueMap: {
+                glassShop: companyName
+            }
         };
     },
     computed: {
         subHeaderTitle() {
-            return this.getCmsContent(this.widget.siteSubHeader, 'SubHeaderText');
+            return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
         },
-        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');
+        subHeaderBodyOne() {
+            return this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+        },
+        subHeaderBodyTwo() {
+            const cmsContent = this.getCmsContent(this.widget.siteSubHeader, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2);
+            return this.getStringWithCustomValues(cmsContent, this.customValueMap);
+        },
+        serviceSummaryText() {
+            return this.getCmsContent(this.widget.serviceSummary, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
+        },
+        orderDetailsTitle() {
+            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
+        },
+        orderDetailsBody() {
+            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+        },
+        deductibleBoxValue() {
+            const { isVerified } = useMainStore().order.payment.insuranceCoverage;
+            const { currentDeductible } = useMainStore().order;
+            return isVerified ? this.getDisplayDollars(currentDeductible) : VERIFYING_COVERAGE;
         },
         forwardButtonText() {
-            return this.getCmsContent(this.widget.footer, 'ForwardButtonText');
+            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+        },
+        getVehicleLines() {
+            const { year, make, model } = useMainStore().order.vehicle;
+            return [`${year} ${make} ${model}`];
+        },
+        getDamageLines() {
+            return [useMainStore().order.policy.damageCause];
+        },
+        getPreferredShopLines() {
+            const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
+            const { streetAddress, city, state, zipCode } = address;
+            const displayAddress = this.getAddressString(streetAddress, '', city, state, zipCode);
+            const displayPhoneNumber = this.getDisplayPhoneNumber(phoneNumber);
+            return [this.companyName, displayAddress, displayPhoneNumber];
+        },
+        getContactInfoLines() {
+            const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().order.contactInfo;
+            return [
+                `${firstName} ${lastName}`,
+                emailAddress,
+                this.getDisplayPhoneNumber(phoneNumber)
+            ];
         }
-        // getSubheaderTextFromCms(cmsWidgetName) {
-        //     const subHeader = this.getCmsContent(cmsWidgetName, 'SubHeaderText');
-        //     console.log(JSON.stringify(subHeader));
-        //     return this.processIfStatements(subHeader, 'custom', this.getCustomValueFromString);
-        // }
     },
     methods:
         {
+            setSections() {
+                this.sections = [
+                    this.getSection(this.widget.subheader.vehicle, this.getVehicleLines, this.navigationScenarios.EDIT_VEHICLE),
+                    this.getSection(this.widget.subheader.damage, this.getDamageLines, this.navigationScenarios.EDIT_DAMAGE),
+                    this.getSection(this.widget.subheader.shop, this.getPreferredShopLines, this.navigationScenarios.EDIT_PREFERRED_SHOP),
+                    // eslint-disable-next-line max-len
+                    this.getSection(this.widget.subheader.contactInfo, this.getContactInfoLines, this.navigationScenarios.EDIT_CONTACT_DETAILS)
+                ];
+            },
+            getSection(widgetName, lines, scenario) {
+                return {
+                    title: this.getCmsContent(widgetName, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
+                    lines,
+                    onClickEdit: this.getNavigateByScenarioMethod(scenario)
+                };
+            },
             backButtonAction() {
-                this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+                this.navigate(this.navigationScenarios.CLICKED_BACK);
             },
             forwardButtonAction() {
-                this.$router.navigate(
-                    this.navigationScenarios.CLICKED_FORWARD,
-                    this.$route
-                );
+                this.navigate(this.navigationScenarios.CLICKED_FORWARD);
             },
-            getCustomValueFromString(str) {
-                console.log(`string val: ${str}`);
-                switch (str) {
-                    case 'glassShop':
-                        return 'Fake Glass Shop';
-                    default:
-                        return null;
-                }
-            }
+            getNavigateByScenarioMethod(scenario) {
+                return () => this.navigate(scenario);
+            },
+            navigate(scenario) {
+                this.$router.navigate(scenario, this.$route);
+            },
+            getStringWithCustomValues,
+            getDisplayPhoneNumber,
+            getTitleCase,
+            getAddressString,
+            getDisplayDollars
         }
 };
 </script>
 <style lang="scss" scoped>
-.submit {
-  margin-bottom:0.75rem;
+
+.tpa-submit__title--line-height {
+    line-height: map-get($spacers, 6);
+}
+
+.text-color--darker-gray {
+    color: $darker-gray
+}
+
+.text-color--black {
+    color: $black;
+}
+
+hr {
+    opacity: 1;
+    color: $gray-350
 }
 
 </style>
diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js
index 3a03cf51..937d42b9 100644
--- a/src/router/router-constants/navigation-scenarios.js
+++ b/src/router/router-constants/navigation-scenarios.js
@@ -68,6 +68,12 @@ const navigationScenarios = Object.freeze({
     CLICKED_FORWARD_WITH_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_SAFELITE_SHOP',
     CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP: 'CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP',
 
+    // TPA Submit
+    EDIT_VEHICLE: 'EDIT_VEHICLE',
+    EDIT_DAMAGE: 'EDIT_DAMAGE',
+    EDIT_PREFERRED_SHOP: 'EDIT_PREFERRED_SHOP',
+    EDIT_CONTACT_DETAILS: 'EDIT_CONTACT_DETAILS',
+
     // Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',
     CLICKED_FORWARD_WITH_TPA_ENABLED: 'CLICKED_FORWARD_WITH_TPA_ENABLED',
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 7f064f9b..69762bc8 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -637,6 +637,22 @@ const routingTable = () => [
     {
         issPageValue: issPageValues.TPA_SUBMIT,
         maps: [
+            {
+                scenario: navigationScenarios.EDIT_VEHICLE,
+                destinationIssPageValue: issPageValues.VEHICLE_SELECTION
+            },
+            {
+                scenario: navigationScenarios.EDIT_DAMAGE,
+                destinationIssPageValue: issPageValues.VEHICLE_DAMAGE
+            },
+            {
+                scenario: navigationScenarios.EDIT_PREFERRED_SHOP,
+                destinationIssPageValue: issPageValues.PROVIDER_PREFERENCE
+            },
+            {
+                scenario: navigationScenarios.EDIT_CONTACT_DETAILS,
+                destinationIssPageValue: issPageValues.CONTACT_DETAILS
+            },
             {
                 scenario: navigationScenarios.CLICKED_BACK,
                 destinationIssPageValue: issPageValues.TPA_SEARCH
diff --git a/src/store/index.js b/src/store/index.js
index c15e0bb9..7d4c8c25 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -115,7 +115,9 @@ const getDefaultState = () => ({
                     state: null,
                     zipCode: null,
                     zipCodeCtu: null
-                }
+                },
+                companyName: null, // TODO set
+                phoneNumber: null // TODO set
             }
         },
         lineItems: {
diff --git a/src/styles/common-typography-styles.scss b/src/styles/common-typography-styles.scss
index 162f4a16..30368d39 100644
--- a/src/styles/common-typography-styles.scss
+++ b/src/styles/common-typography-styles.scss
@@ -51,6 +51,12 @@ h6,
   font-weight: 400;
 }
 
+.small-strong {
+  font-size: .875rem;
+  line-height: 1.7;
+  font-weight: 500;
+}
+
 label,
 .label {
   font-size: 1rem;
@@ -63,16 +69,4 @@ caption,
   font-size: .75rem;
   line-height: 1.7;
   font-weight: 400;
-}
-
-
-// Font size
-.fs-5 {
-  line-height: 2;
-}
-
-.fs-6 {
-  font-size: 1rem !important;
-  line-height: 1.4;
-  font-weight: 500;
 }
\ No newline at end of file
diff --git a/src/styles/ux-variables.scss b/src/styles/ux-variables.scss
index a67e7c76..218bf477 100644
--- a/src/styles/ux-variables.scss
+++ b/src/styles/ux-variables.scss
@@ -52,6 +52,7 @@ $yellow-900: #331a00;
 $gray-100: #f5f5f5; // Used in theme
 $gray-200: #e3e4e4; // Used in theme
 $gray-300: #d2d4d4;
+$gray-350: #b3b4b5; // Used for hr
 $gray: #b0b3b3; // Default Gray
 $gray-500: #8e9292; // Used in theme
 $gray-550: #727676; // Used in theme
@@ -123,9 +124,18 @@ $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;
 $font-size-base: 1rem; // Assumes the browser default, typically `16px`
 
+//Headings
+$h1-font-size: $font-size-base * 3;
+$h2-font-size: $font-size-base * 2.625;
+$h3-font-size: $font-size-base * 2;
+$h4-font-size: $font-size-base * 1.625;
+$h5-font-size: $font-size-base * 1.25;
+$h6-font-size: $font-size-base * 0.875;
+
 //Custom Font size (extra small)
 $font-size-xsm: $font-size-base * 0.75;
 $font-sizes: (
+    5: $h5-font-size,
     7: $font-size-xsm,
 );
 
@@ -136,13 +146,6 @@ $font-weight-normal: 400;
 $font-weight-bold: 500;
 $font-weight-bolder: bolder;
 
-//Headings
-$h1-font-size: $font-size-base * 3;
-$h2-font-size: $font-size-base * 2.625;
-$h3-font-size: $font-size-base * 2;
-$h4-font-size: $font-size-base * 1.625;
-$h5-font-size: $font-size-base * 1.25;
-$h6-font-size: $font-size-base * 0.875;
 
 //Border Radius
 // Helper classes are rounded, rounded-1, rounded-2, rounded-3
@@ -173,6 +176,9 @@ $spacers: (
     8: $spacer * 3,
 );
 
+//Line Height
+
+
 //Grid breakpoints
 $grid-breakpoints: (
     xs: 0,

From 0bf200e01d840b739f20f15b31d210ff49538bf0 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 20:34:30 -0500
Subject: [PATCH 03/18] Forgot

---
 src/layouts/tpa-search/tpa-search.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index dd7e4d18..f71d8d7e 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -100,7 +100,7 @@
                                     <textLink
                                         id="preferredShopNotListedLink"
                                         linkType="navigation"
-                                        href="#!"
+                                        href="javascript:void(0)"
                                         :text="shopNotListedModalLink"
                                         @clickEvent="doNotSeeMyShopLinkClick" />
                                 </div>
@@ -140,6 +140,7 @@ import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import globalRules from '@/constants/global-rules.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { shallowRef } from 'vue';
+import { toTitleCase } from '@/helpers/text-helper.js';
 
 export default {
     name: 'tpa-search',

From 8492c6b050cf1ebd4f602a5942964f79606be355 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 21:23:45 -0500
Subject: [PATCH 04/18] Delete test line

---
 .../tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue        | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
index dfde755a..a16de0f6 100644
--- a/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
+++ b/src/layouts/provider-preference/tpa-recal-modal/tpa-recal-toggle/tpa-recal-toggle.vue
@@ -4,7 +4,6 @@
         class="tpa-toggle"
         :class="[isDetailVisible ? 'active' : '']"
         @click="handleClickToggle"></div>
-        <button>Edit Me!</button>
         <textLink
           id="moreDetails"
           linkType="text"

From 7ee0379637e11dde4b17fec8b29ff86e71d4cd75 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 21:26:34 -0500
Subject: [PATCH 05/18] Reverting change

---
 src/layouts/tpa-search/tpa-search.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 814f712b..1ccd1926 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -90,14 +90,14 @@
                                     alertClass="alert-warning"
                                     :isDismissible="false"
                                     :manualHeadline="noNetworkShopsAlertHeaderText" />
-                                <div class="text-center">
-                                    <textLink
-                                        id="preferredShopNotListedLink"
-                                        linkType="navigation"
-                                        href="javascript:void(0)"
-                                        :text="shopNotListedModalLink"
-                                        @clickEvent="doNotSeeMyShopLinkClick" />
-                                </div>
+                            </div>
+                            <div class="text-center">
+                                <textLink
+                                    id="preferredShopNotListedLink"
+                                    linkType="navigation"
+                                    href="javascript:void(0)"
+                                    :text="shopNotListedModalLink"
+                                    @clickEvent="doNotSeeMyShopLinkClick" />
                             </div>
                         </div>
                     </div>

From 17c40b058cc7fdf119be7088516fa414eb1a4448 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 23:14:19 -0500
Subject: [PATCH 06/18] Minor adjustment

---
 .../textbox-question/textbox-question.vue                   | 2 +-
 src/layouts/tpa-search/tpa-search.vue                       | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 86bcfeea..31d912a0 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -265,7 +265,7 @@ input[type='date']::-webkit-calendar-picker-indicator {
     }
     span {
         font-weight: 400;
-        font-size: 14px;
+        font-size: 0.875rem;
         color: #4d5151;
     }
     .form-test-error span {
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 1ccd1926..f7e9ecfe 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -13,7 +13,7 @@
                         <label
                             id="tpaSearchQuestionLabel"
                             for="tpaSearchQuestionField"
-                            class="text-center mt-5 mb-0 text-black w-100 search-question">
+                            class="text-center fs-5 mt-5 mb-0 text-black w-100">
                             {{ tpaSearchQuestionLabel }}
                         </label>
                         <label
@@ -378,10 +378,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.search-question {
-    font-size: $h5-font-size;
-}
-
 .darker-gray {
     color: map-get($colors, "darker-gray");
 }

From c2fc9048e390f43897119b0d80e32df81ce399ff Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 23:16:53 -0500
Subject: [PATCH 07/18] Removing comment

---
 src/layouts/tpa-search/tpa-search.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index f7e9ecfe..9ab2f3fe 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -59,8 +59,6 @@
                             disableAutoFill
                             :isDisabled="reloadingProviders"
                             :validationRules="rules.filter" />
-                        <!-- <dropdownQuestion
-                            inputId="filterByQuestionField" /> -->
                         <loader
                             v-if="reloadingProviders"
                             id="providersLoader"

From a23c9de43ce169cf959e38d7a5bbe3bf5bec062d Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 23:25:32 -0500
Subject: [PATCH 08/18] Fixing broken tests

---
 src/layouts/tpa-search/tpa-search.spec.js                   | 5 +++--
 .../tpa-submit/deductible-box/deductible-box.spec.js        | 3 +++
 src/layouts/tpa-submit/review-block/review-block.spec.js    | 3 +++
 src/layouts/tpa-submit/tpa-submit.spec.js                   | 6 +++---
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js
index 99754c6b..065560fe 100644
--- a/src/layouts/tpa-search/tpa-search.spec.js
+++ b/src/layouts/tpa-search/tpa-search.spec.js
@@ -104,7 +104,7 @@ describe('TPA search page', () => {
             expect(searchQuestionLabel.classes()).toContain('mb-0');
             expect(searchQuestionLabel.classes()).toContain('text-black');
             expect(searchQuestionLabel.classes()).toContain('w-100');
-            expect(searchQuestionLabel.classes()).toContain('search-question');
+            expect(searchQuestionLabel.classes()).toContain('fs-5');
         });
         test('search instructions', () => {
             // Arrange
@@ -273,7 +273,8 @@ describe('TPA search page', () => {
             // Assert
             expect(preferredShopNotListedLink.exists()).toBeTruthy();
             expect(preferredShopNotListedLink.props().linkType).toBe('navigation');
-            expect(preferredShopNotListedLink.props().href).toBe('#!');
+            // eslint-disable-next-line no-script-url
+            expect(preferredShopNotListedLink.props().href).toBe('javascript:void(0)');
         });
         test('site footer', () => {
             // Arrange
diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
index e69de29b..856893a4 100644
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
@@ -0,0 +1,3 @@
+describe('deductible-box', () => {
+    test('', () => {});
+});
diff --git a/src/layouts/tpa-submit/review-block/review-block.spec.js b/src/layouts/tpa-submit/review-block/review-block.spec.js
index e69de29b..8d605bc6 100644
--- a/src/layouts/tpa-submit/review-block/review-block.spec.js
+++ b/src/layouts/tpa-submit/review-block/review-block.spec.js
@@ -0,0 +1,3 @@
+describe('review-block', () => {
+    test('', () => {});
+});
diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js
index c730f97f..9ed7c5b2 100644
--- a/src/layouts/tpa-submit/tpa-submit.spec.js
+++ b/src/layouts/tpa-submit/tpa-submit.spec.js
@@ -1,3 +1,3 @@
-// TODO
-// Write test cases
-// implement tests
+describe('tpa-submit', () => {
+    test('', () => {});
+});

From 3dccb8dcae3425b1ec7d03e63ff3d5c2772bf291 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Mon, 4 Dec 2023 23:59:51 -0500
Subject: [PATCH 09/18] Write deductible box tests

---
 .../deductible-box/deductible-box.spec.js     | 69 ++++++++++++++++++-
 .../deductible-box/deductible-box.vue         | 12 +++-
 2 files changed, 77 insertions(+), 4 deletions(-)

diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
index 856893a4..7ed3b301 100644
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.spec.js
@@ -1,3 +1,70 @@
+import { shallowMount } from '@vue/test-utils';
+import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
+
 describe('deductible-box', () => {
-    test('', () => {});
+    let wrapper;
+    const defaultValue = '1820';
+
+    beforeEach(() => {
+        wrapper = shallowMount(deductibleBox, {
+            propsData: { value: defaultValue }
+        });
+    });
+
+    it('renders the correct deductible value', () => {
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(defaultValue);
+    });
+
+    it('renders the correct deductible label', () => {
+        const labelElement = wrapper.find('#deductibleLabel');
+        expect(labelElement.text()).toBe('Deductible');
+    });
+
+    it('has the correct id', () => {
+        expect(wrapper.attributes().id).toBe('deductibleBox');
+    });
+
+    it('has the correct classes', () => {
+        expect(wrapper.classes().length).toBe(6);
+        expect(wrapper.classes()).toContain('deductible-box');
+        expect(wrapper.classes()).toContain('d-flex');
+        expect(wrapper.classes()).toContain('justify-content-between');
+        expect(wrapper.classes()).toContain('align-items-center');
+        expect(wrapper.classes()).toContain('py-2');
+        expect(wrapper.classes()).toContain('px-5');
+    });
+    it.each([
+        ['', ''],
+        [null, ''],
+        [undefined, '']
+    ])('renders correctly with value "%p"', (value, expected) => {
+        wrapper = shallowMount(deductibleBox, {
+            propsData: { value }
+        });
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(expected);
+    });
+
+    it('renders correctly with a very long value', () => {
+        const longValue = '1'.repeat(1000);
+        wrapper = shallowMount(deductibleBox, {
+            propsData: {
+                value: longValue
+            }
+        });
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(longValue);
+    });
+
+    it('renders correctly with special characters', () => {
+        const specialValue = '!@#$%^&*()';
+        wrapper = shallowMount(deductibleBox, {
+            propsData: {
+                value: specialValue
+            }
+        });
+        const valueElement = wrapper.find('#deductibleValue');
+        expect(valueElement.text()).toBe(specialValue);
+    });
 });
diff --git a/src/layouts/tpa-submit/deductible-box/deductible-box.vue b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
index 2546a200..ed88a870 100644
--- a/src/layouts/tpa-submit/deductible-box/deductible-box.vue
+++ b/src/layouts/tpa-submit/deductible-box/deductible-box.vue
@@ -1,9 +1,15 @@
 <template>
-    <div class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
-        <p class="deductible-box__text">
+    <div
+        id="deductibleBox"
+        class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
+        <p
+            id="deductibleLabel"
+            class="deductible-box__text">
             Deductible
         </p>
-        <p class="deductible-box__text">
+        <p
+            id="deductibleValue"
+            class="deductible-box__text">
             {{ value }}
         </p>
     </div>

From 06b186397ce4710697a61b0bc507fd68d851bc43 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Tue, 2 Jan 2024 16:07:27 -0500
Subject: [PATCH 10/18] Partial work

---
 src/helpers/cms-content-helper.js             | 15 +++++
 src/helpers/cms-content-helper.spec.js        | 16 ++++++
 src/helpers/text-helper.js                    | 53 +++++++++++++++++
 src/helpers/text-helper.spec.js               | 31 +++++++++-
 .../review-block/review-block.spec.js         | 57 ++++++++++++++++++-
 .../tpa-submit/review-block/review-block.vue  |  1 -
 src/layouts/tpa-submit/tpa-submit.vue         | 36 +++---------
 7 files changed, 178 insertions(+), 31 deletions(-)
 create mode 100644 src/helpers/cms-content-helper.spec.js

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index 2ce5dc26..e207a52a 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -1,6 +1,21 @@
 import dynamicStrings from '@/constants/dynamic-strings';
 import { useMainStore } from '@/store';
 
+/**
+ * @function getStringWithCustomValues
+ * @summary Returns str with all custom values replaced in accordance with the provided customValueMap
+ * @param {string} str
+ * @param {Dictionary} customValueMap
+ * @returns {string}
+ */
+export function getStringWithCustomValues(str, customValueMap) {
+    let newString = str;
+    Object.entries(customValueMap).forEach((key, value) => {
+        newString = newString.replaceAll(`{custom:${key}}`, value);
+    });
+    return newString;
+}
+
 // This function will process the widget item and replace any global state variables with their values.
 // This is a recursive function, it will call itself until it runs out of items to iterate on given the object.
 /**
diff --git a/src/helpers/cms-content-helper.spec.js b/src/helpers/cms-content-helper.spec.js
new file mode 100644
index 00000000..71d7f535
--- /dev/null
+++ b/src/helpers/cms-content-helper.spec.js
@@ -0,0 +1,16 @@
+import { getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
+
+describe('getStringWithCustomValues', () => {
+    test.each([
+        ['Hello, {custom:name}!', { name: 'John' }, 'Hello, John!']// ,
+        // ['{custom:greeting}, {custom:name}!', { greeting: 'Hi', name: 'John' }, 'Hi, John!'],
+        // ['{custom:greeting}, {custom:name}!', { greeting: 'Hi' }, 'Hi, {custom:name}!'],
+        // ['Hello, {custom:name}!', {}, 'Hello, {custom:name}!'],
+        // ['Hello, world!', { name: 'John' }, 'Hello, world!'],
+        // ['', { name: 'John' }, ''],
+        // ['Hello, {custom:name}!', null, 'Hello, {custom:name}!'],
+        // [null, { name: 'John' }, null]
+    ])('getStringWithCustomValues(%s, %o) should return %s', (str, customValueMap, expected) => {
+        expect(getStringWithCustomValues(str, customValueMap)).toBe(expected);
+    });
+});
diff --git a/src/helpers/text-helper.js b/src/helpers/text-helper.js
index 41e19a66..d9f66779 100644
--- a/src/helpers/text-helper.js
+++ b/src/helpers/text-helper.js
@@ -44,3 +44,56 @@ export function toDisplayPhoneNumber(phoneNumber) {
     }
     return result;
 }
+
+/**
+ * @function formatAddress
+ * @summary given address fields, returns a string representation of said address
+ * @param {string} addressLine1
+ * @param {string} addressLine2
+ * @param {string} city
+ * @param {string} state
+ * @param {string} zipCode
+ * @returns {string}
+ */
+export function formatAddress(addressLine1, addressLine2, city, state, zipCode) {
+    let address = '';
+
+    if (addressLine1) {
+        address += addressLine1;
+    }
+
+    if (addressLine2) {
+        address += address ? `, ${addressLine2}` : addressLine2;
+    }
+
+    if (city) {
+        address += address ? `, ${city}` : city;
+    }
+    address = toTitleCase(address);
+
+    if (state) {
+        address += address ? `, ${state}` : state;
+    }
+
+    if (zipCode) {
+        address += address ? ` ${zipCode}` : zipCode;
+    }
+
+    return address;
+}
+
+/**
+ * @function formatAmountInDollars
+ * @param {string, number} amount
+ * @returns {string}
+ */
+export function formatAmountInDollars(amount) {
+    const numericAmount = typeof amount === 'string' ? parseFloat(amount) : amount;
+
+    if (Number.isNaN(numericAmount) || amount === null || amount === undefined) {
+        return '';
+    }
+
+    const roundedAmount = numericAmount.toFixed(2);
+    return `$${roundedAmount}`;
+}
diff --git a/src/helpers/text-helper.spec.js b/src/helpers/text-helper.spec.js
index 1b2daf64..6062ee14 100644
--- a/src/helpers/text-helper.spec.js
+++ b/src/helpers/text-helper.spec.js
@@ -1,4 +1,4 @@
-import { toTitleCase, toDisplayPhoneNumber } from '@/helpers/text-helper.js';
+import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
 
 describe('text-helper', () => {
     test.each([
@@ -39,4 +39,33 @@ describe('text-helper', () => {
             expect(result).toEqual(expected);
         }
     );
+    test.each([
+        [null, null, null, null, null, ''],
+        ['123 Main St', null, null, null, null, '123 Main St'],
+        ['123 main st', 'Apt 4B', null, null, null, '123 Main St, Apt 4b'],
+        ['123 Main St', 'apt 4B', 'Anytown', null, null, '123 Main St, Apt 4b, Anytown'],
+        ['123 Main St', 'Apt 4B', 'Anytown', 'ny', null, '123 Main St, Apt 4b, Anytown, ny'],
+        ['123 Main St', 'Apt 4B', 'AnYtoWn', 'NY', '12345', '123 Main St, Apt 4b, Anytown, NY 12345']
+    ])('formatAddress(%s, %s, %s, %s, %s) should return %s', (addressLine1, addressLine2, city, state, zipCode, expected) => {
+        expect(formatAddress(addressLine1, addressLine2, city, state, zipCode)).toBe(expected);
+    });
+    test.each([
+        [1234.5678, '$1234.57'],
+        ['1234.5678', '$1234.57'],
+        [1234.56, '$1234.56'],
+        ['1234.56', '$1234.56'],
+        [1234.5, '$1234.50'],
+        ['1234.5', '$1234.50'],
+        [1234, '$1234.00'],
+        ['1234', '$1234.00'],
+        [0, '$0.00'],
+        ['0', '$0.00'],
+        [NaN, ''],
+        ['NaN', ''],
+        [null, ''],
+        ['', ''],
+        ['abc', '']
+    ])('formatAmountInDollars(%s) should return %s', (amount, expected) => {
+        expect(formatAmountInDollars(amount)).toBe(expected);
+    });
 });
diff --git a/src/layouts/tpa-submit/review-block/review-block.spec.js b/src/layouts/tpa-submit/review-block/review-block.spec.js
index 8d605bc6..82f3c4e5 100644
--- a/src/layouts/tpa-submit/review-block/review-block.spec.js
+++ b/src/layouts/tpa-submit/review-block/review-block.spec.js
@@ -1,3 +1,56 @@
-describe('review-block', () => {
-    test('', () => {});
+import { shallowMount } from '@vue/test-utils';
+import ReviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
+
+describe('ReviewBlock.vue', () => {
+    let wrapper;
+    const lines = ['Line 1', 'Line 2', 'Line 3'];
+
+    beforeEach(() => {
+        wrapper = shallowMount(ReviewBlock, {
+            propsData: {
+                customHeaderText: 'Test Header',
+                lines
+            }
+        });
+    });
+
+    it('renders the correct header text', () => {
+        const headerElement = wrapper.find('.review-block__header');
+        expect(headerElement.text()).toBe('Test Header');
+    });
+
+    it('renders the correct number of lines', () => {
+        const lineElements = wrapper.findAll('.review-block__body--line');
+        expect(lineElements.length).toBe(lines.length);
+    });
+
+    it('renders the correct line text', () => {
+        const lineElements = wrapper.findAll('.review-block__body--line');
+        lines.forEach((line, index) => {
+            expect(lineElements.at(index).text()).toBe(line);
+        });
+    });
+
+    it('updates the header text when prop changes', async () => {
+        await wrapper.setProps({ customHeaderText: 'New Header' });
+        const headerElement = wrapper.find('.review-block__header');
+        expect(headerElement.text()).toBe('New Header');
+    });
+
+    it('emits an event when the edit link is clicked', async () => {
+        const linkElement = wrapper.findComponent({ name: 'textLink' });
+        await linkElement.vm.$emit('clickEvent');
+        expect(wrapper.emitted('click-edit')).toBeTruthy();
+    });
+
+    it('renders correctly with no lines', () => {
+        wrapper = shallowMount(ReviewBlock, {
+            propsData: {
+                customHeaderText: 'Test Header',
+                lines: []
+            }
+        });
+        const lineElements = wrapper.findAll('.review-block__body--line');
+        expect(lineElements.length).toBe(0);
+    });
 });
diff --git a/src/layouts/tpa-submit/review-block/review-block.vue b/src/layouts/tpa-submit/review-block/review-block.vue
index 1bc7133c..5d13e48f 100644
--- a/src/layouts/tpa-submit/review-block/review-block.vue
+++ b/src/layouts/tpa-submit/review-block/review-block.vue
@@ -34,7 +34,6 @@ export default {
     name: 'review-block',
     components: { textLink },
     props: {
-        headerCmsWidgetName: String,
         customHeaderText: String,
         editScreenReaderTextCmsWidgetName: String,
         lines: Array
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 09f0a70f..05e0d833 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -100,6 +100,7 @@ import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import { useMainStore } from '@/store';
+import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -112,25 +113,6 @@ function getStringWithCustomValues(str, customValueMap) {
     return newString;
 }
 
-function getDisplayPhoneNumber(phoneNumber) {
-    return phoneNumber;
-}
-
-function getTitleCase(str) {
-    return str;
-}
-
-// TODO more elaborate
-function getAddressString(addressLine1, addressLine2, city, state, zipCode) {
-    return `${this.getTitleCase(addressLine1)}, ${this.getTitleCase(addressLine2)}, `
-        + `${this.getTitleCase(city)}, ${state} ${zipCode}`;
-}
-
-// TODO make round two decimal places and work for both strings and numbers
-function getDisplayDollars(amount) {
-    return `$${amount}`;
-}
-
 export default {
     name: 'tpa-submit',
     components: {
@@ -199,7 +181,7 @@ export default {
         deductibleBoxValue() {
             const { isVerified } = useMainStore().order.payment.insuranceCoverage;
             const { currentDeductible } = useMainStore().order;
-            return isVerified ? this.getDisplayDollars(currentDeductible) : VERIFYING_COVERAGE;
+            return isVerified ? this.formatAmountInDollars(currentDeductible) : VERIFYING_COVERAGE;
         },
         forwardButtonText() {
             return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
@@ -214,8 +196,8 @@ export default {
         getPreferredShopLines() {
             const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
             const { streetAddress, city, state, zipCode } = address;
-            const displayAddress = this.getAddressString(streetAddress, '', city, state, zipCode);
-            const displayPhoneNumber = this.getDisplayPhoneNumber(phoneNumber);
+            const displayAddress = this.formatAddress(streetAddress, null, city, state, zipCode);
+            const displayPhoneNumber = this.toDisplayPhoneNumber(phoneNumber);
             return [this.companyName, displayAddress, displayPhoneNumber];
         },
         getContactInfoLines() {
@@ -223,7 +205,7 @@ export default {
             return [
                 `${firstName} ${lastName}`,
                 emailAddress,
-                this.getDisplayPhoneNumber(phoneNumber)
+                this.toDisplayPhoneNumber(phoneNumber)
             ];
         }
     },
@@ -258,10 +240,10 @@ export default {
                 this.$router.navigate(scenario, this.$route);
             },
             getStringWithCustomValues,
-            getDisplayPhoneNumber,
-            getTitleCase,
-            getAddressString,
-            getDisplayDollars
+            toDisplayPhoneNumber,
+            toTitleCase,
+            formatAddress,
+            formatAmountInDollars
         }
 };
 </script>

From 272ec08bc5c20e217b5c6473fd8d6c0bbf30a0a6 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 3 Jan 2024 17:47:23 -0500
Subject: [PATCH 11/18] Final touches

---
 src/helpers/cms-content-helper.js             |  4 +-
 .../coverage-statement/coverage-statement.vue |  2 +-
 src/layouts/tpa-search/tpa-search.vue         | 19 +++++++++
 src/layouts/tpa-submit/tpa-submit.vue         | 39 ++++++++++++-------
 src/store/index.js                            |  4 +-
 5 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index e207a52a..b036cc0f 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -10,8 +10,8 @@ import { useMainStore } from '@/store';
  */
 export function getStringWithCustomValues(str, customValueMap) {
     let newString = str;
-    Object.entries(customValueMap).forEach((key, value) => {
-        newString = newString.replaceAll(`{custom:${key}}`, value);
+    Object.keys(customValueMap).forEach((key) => {
+        newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
     });
     return newString;
 }
diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue
index 04c4c1fc..d923da15 100644
--- a/src/layouts/coverage-statement/coverage-statement.vue
+++ b/src/layouts/coverage-statement/coverage-statement.vue
@@ -118,7 +118,7 @@ import loadingModal from '@/iss-components/loading-modal/loading-modal.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
 
 // Import Supporting Files
-import { fetchCmsContentForPage, setupModalLinks, setupModalLink, processIfStatements } from '@/helpers/cms-content-helper.js';
+import { fetchCmsContentForPage, setupModalLinks, processIfStatements } from '@/helpers/cms-content-helper.js';
 import settleAllPromises from '@/helpers/layout-helper.js';
 import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from '@/store/index.js';
diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 9ab2f3fe..0cf3e9fc 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -280,6 +280,25 @@ export default {
             this.selectedProviderNumber = newProviders?.length === 1 ?? false
                 ? newProviders[0]?.providerNumber ?? ''
                 : '';
+        },
+        selectedProviderNumber(newNumber) {
+            const provider = this.providers?.find((p) => p.providerNumber === newNumber);
+            if (provider) {
+                useMainStore().updateServiceLocation({
+                    provider: {
+                        providerNumber: provider.providerNumber,
+                        address: {
+                            streetAddress: provider.address.streetAddress,
+                            city: provider.address.city,
+                            state: provider.address.state,
+                            zipCode: provider.address.zipCode,
+                            zipCodeCtu: provider.address.zipCodeCtu
+                        },
+                        companyName: provider.companyName,
+                        phoneNumber: provider.phoneNumber
+                    }
+                });
+            }
         }
     },
     beforeUpdate() {
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 05e0d833..35cd1e96 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -34,7 +34,7 @@
                         isPrimary
                         :buttonText="forwardButtonText"
                         loaderColor="white"
-                        class="w-100 mb-4"
+                        class="w-100 mb-5"
                         @clickEvent="forwardButtonAction" />
                     <hr class="mb-0" />
                     <div id="serviceSummarySection">
@@ -95,7 +95,7 @@ import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vu
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 
 // Supporting files
-import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import { fetchCmsContentForPage, processIfStatements, getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
 import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 import widgetFields from '@/constants/cms-widget-fields.js';
@@ -104,15 +104,6 @@ import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
-// TODO move functions to general location
-function getStringWithCustomValues(str, customValueMap) {
-    let newString = str;
-    Object.entries(customValueMap).forEach((key, value) => {
-        newString = newString.replaceAll(`{custom:${key}}`, value);
-    });
-    return newString;
-}
-
 export default {
     name: 'tpa-submit',
     components: {
@@ -176,12 +167,17 @@ export default {
             return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT);
         },
         orderDetailsBody() {
-            return this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+            const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
+            return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
+        },
+        isVerified() {
+            return useMainStore().order.payment.insuranceCoverage.isVerified;
+        },
+        currentDeductible() {
+            return useMainStore().order.currentDeductible;
         },
         deductibleBoxValue() {
-            const { isVerified } = useMainStore().order.payment.insuranceCoverage;
-            const { currentDeductible } = useMainStore().order;
-            return isVerified ? this.formatAmountInDollars(currentDeductible) : VERIFYING_COVERAGE;
+            return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
         },
         forwardButtonText() {
             return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
@@ -239,6 +235,19 @@ export default {
             navigate(scenario) {
                 this.$router.navigate(scenario, this.$route);
             },
+            getCustomValueFromString(str) {
+                switch (str) {
+                    case 'deductibleAboveZero':
+                        return this.isVerified && this.currentDeductible !== 0;
+                    case 'zeroDeductible':
+                        return this.isVerified && this.currentDeductible === 0;
+                    case 'verifyingCoverage':
+                        return !this.isVerified;
+                    default:
+                        return null;
+                }
+            },
+            processIfStatements,
             getStringWithCustomValues,
             toDisplayPhoneNumber,
             toTitleCase,
diff --git a/src/store/index.js b/src/store/index.js
index 7d4c8c25..a019efb0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1324,7 +1324,9 @@ export const useMainStore = defineStore({
                     state: serviceLocationInfo.provider?.address?.state,
                     zipCode: serviceLocationInfo.provider?.address?.zipCode,
                     zipCodeCtu: serviceLocationInfo.provider?.address?.zipCodeCtu
-                }
+                },
+                companyName: serviceLocationInfo.provider?.companyName,
+                phoneNumber: serviceLocationInfo.provider?.phoneNumber
             };
         },
 

From 0de9309cc2f8188453d446f893e8eff35a6f483d Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 3 Jan 2024 19:02:53 -0500
Subject: [PATCH 12/18] Fixing tests

---
 src/layouts/tpa-search/tpa-search.vue | 17 ++++++++---------
 src/store/index.js                    |  4 ++--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index 0cf3e9fc..043c44b4 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -286,16 +286,16 @@ export default {
             if (provider) {
                 useMainStore().updateServiceLocation({
                     provider: {
-                        providerNumber: provider.providerNumber,
+                        providerNumber: provider?.providerNumber,
                         address: {
-                            streetAddress: provider.address.streetAddress,
-                            city: provider.address.city,
-                            state: provider.address.state,
-                            zipCode: provider.address.zipCode,
-                            zipCodeCtu: provider.address.zipCodeCtu
+                            streetAddress: provider.address?.streetAddress,
+                            city: provider.address?.city,
+                            state: provider.address?.state,
+                            zipCode: provider.address?.zipCode,
+                            zipCodeCtu: provider.address?.zipCodeCtu
                         },
-                        companyName: provider.companyName,
-                        phoneNumber: provider.phoneNumber
+                        companyName: provider?.companyName,
+                        phoneNumber: provider?.phoneNumber
                     }
                 });
             }
@@ -391,7 +391,6 @@ export default {
         toTitleCase
     }
 };
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/store/index.js b/src/store/index.js
index a019efb0..65c08ac9 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -116,8 +116,8 @@ const getDefaultState = () => ({
                     zipCode: null,
                     zipCodeCtu: null
                 },
-                companyName: null, // TODO set
-                phoneNumber: null // TODO set
+                companyName: null,
+                phoneNumber: null
             }
         },
         lineItems: {

From 3920969c48cd2374292d8aff627a73b43439c3ba Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 3 Jan 2024 19:09:19 -0500
Subject: [PATCH 13/18] Finishing getStringWithCustomValues method

---
 src/helpers/cms-content-helper.js      | 10 ++++++----
 src/helpers/cms-content-helper.spec.js | 18 ++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js
index b036cc0f..7f5a7546 100644
--- a/src/helpers/cms-content-helper.js
+++ b/src/helpers/cms-content-helper.js
@@ -9,10 +9,12 @@ import { useMainStore } from '@/store';
  * @returns {string}
  */
 export function getStringWithCustomValues(str, customValueMap) {
-    let newString = str;
-    Object.keys(customValueMap).forEach((key) => {
-        newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
-    });
+    let newString = str ?? '';
+    if (customValueMap != null) {
+        Object.keys(customValueMap).forEach((key) => {
+            newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
+        });
+    }
     return newString;
 }
 
diff --git a/src/helpers/cms-content-helper.spec.js b/src/helpers/cms-content-helper.spec.js
index 71d7f535..a69a10c5 100644
--- a/src/helpers/cms-content-helper.spec.js
+++ b/src/helpers/cms-content-helper.spec.js
@@ -2,14 +2,16 @@ import { getStringWithCustomValues } from '@/helpers/cms-content-helper.js';
 
 describe('getStringWithCustomValues', () => {
     test.each([
-        ['Hello, {custom:name}!', { name: 'John' }, 'Hello, John!']// ,
-        // ['{custom:greeting}, {custom:name}!', { greeting: 'Hi', name: 'John' }, 'Hi, John!'],
-        // ['{custom:greeting}, {custom:name}!', { greeting: 'Hi' }, 'Hi, {custom:name}!'],
-        // ['Hello, {custom:name}!', {}, 'Hello, {custom:name}!'],
-        // ['Hello, world!', { name: 'John' }, 'Hello, world!'],
-        // ['', { name: 'John' }, ''],
-        // ['Hello, {custom:name}!', null, 'Hello, {custom:name}!'],
-        // [null, { name: 'John' }, null]
+        ['Hello, {custom:name}!', { name: 'John' }, 'Hello, John!'],
+        ['{custom:greeting}, {custom:name}!', { greeting: 'Hi', name: 'John' }, 'Hi, John!'],
+        ['{custom:greeting}, {custom:name}!', { greeting: 'Hi' }, 'Hi, {custom:name}!'],
+        ['Hello, {custom:name}!', {}, 'Hello, {custom:name}!'],
+        ['Hello, world!', { name: 'John' }, 'Hello, world!'],
+        ['', { name: 'John' }, ''],
+        ['Hello, {custom:name}!', null, 'Hello, {custom:name}!'],
+        ['Hello, {custom:name}!', undefined, 'Hello, {custom:name}!'],
+        [null, { name: 'John' }, ''],
+        [undefined, { name: 'John' }, '']
     ])('getStringWithCustomValues(%s, %o) should return %s', (str, customValueMap, expected) => {
         expect(getStringWithCustomValues(str, customValueMap)).toBe(expected);
     });

From bb6ea4aa4f57b993ab191d49e6bede79ca3836e6 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Wed, 3 Jan 2024 20:14:49 -0500
Subject: [PATCH 14/18] Adding tpa search tests for selectedProviderNumber
 watch

---
 src/layouts/tpa-search/tpa-search.spec.js | 102 ++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js
index 065560fe..9c7ce0ed 100644
--- a/src/layouts/tpa-search/tpa-search.spec.js
+++ b/src/layouts/tpa-search/tpa-search.spec.js
@@ -840,6 +840,108 @@ describe('TPA search page', () => {
                 expect(wrapper.vm.selectedProviderNumber).toBe('');
             });
         });
+        describe.only('selectedProviderNumber', () => {
+            describe('does not call updateServiceLocation when', () => {
+                test('providers list is null ', () => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent({}, {
+                        providers: null
+                    });
+                    const newProviderNumber = 11235;
+
+                    // Act
+                    wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
+
+                    // Assert
+                    expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
+                });
+                test('providers list is empty ', () => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent({}, {
+                        providers: []
+                    });
+                    const newProviderNumber = 11235;
+
+                    // Act
+                    wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
+
+                    // Assert
+                    expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
+                });
+                test('providers list does not contain match for provider number ', () => {
+                    // Arrange
+                    const { wrapper } = getMountedComponent({}, {
+                        providers: [{
+                            providerNumber: 8374,
+                            address: {
+                                streetAddress: '143 Average Lane',
+                                city: 'Cambridge',
+                                state: 'OH',
+                                zipCode: '72983',
+                                zipCodeCtu: '0390'
+                            },
+                            companyName: "Sally's Auto",
+                            phoneNumber: '1234567890'
+                        }]
+                    });
+                    const newProviderNumber = 11235;
+
+                    // Act
+                    wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
+
+                    // Assert
+                    expect(wrapper.vm.mainStore.updateServiceLocation).not.toHaveBeenCalled();
+                });
+            });
+            test('Calls updateServiceLocation when matching provider found.', () => {
+                // Arrange
+                const newProviderNumber = 11235;
+                const streetAddress = '143 Average Lane';
+                const city = 'Berlin';
+                const state = 'MA';
+                const zipCode = '12345';
+                const zipCodeCtu = '0004';
+                const companyName = "Sally's Auto";
+                const phoneNumber = '3298479879';
+                const provider = {
+                    providerNumber: newProviderNumber,
+                    address: {
+                        streetAddress,
+                        city,
+                        state,
+                        zipCode,
+                        zipCodeCtu
+                    },
+                    companyName,
+                    phoneNumber
+                };
+                const { wrapper } = getMountedComponent({}, {
+                    providers: [
+                        provider,
+                        { providerNumber: 328949832 }
+                    ]
+                });
+
+                // Act
+                wrapper.vm.$options.watch.selectedProviderNumber.call(wrapper.vm, newProviderNumber);
+
+                // Assert
+                expect(wrapper.vm.mainStore.updateServiceLocation).toHaveBeenCalledWith({
+                    provider: {
+                        providerNumber: newProviderNumber,
+                        address: {
+                            streetAddress,
+                            city,
+                            state,
+                            zipCode,
+                            zipCodeCtu
+                        },
+                        companyName,
+                        phoneNumber
+                    }
+                });
+            });
+        });
     });
     describe('method', () => {
         test.each([

From bf198e2bfc82f7cf1d8f8cd2a7b17808426032a9 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Fri, 5 Jan 2024 15:59:08 -0500
Subject: [PATCH 15/18] Adding tpa submit tests

---
 src/layouts/tpa-search/tpa-search.spec.js |   2 +-
 src/layouts/tpa-submit/tpa-submit.spec.js | 765 +++++++++++++++++++++-
 src/layouts/tpa-submit/tpa-submit.vue     |  31 +-
 3 files changed, 786 insertions(+), 12 deletions(-)

diff --git a/src/layouts/tpa-search/tpa-search.spec.js b/src/layouts/tpa-search/tpa-search.spec.js
index 9c7ce0ed..f3ff67e0 100644
--- a/src/layouts/tpa-search/tpa-search.spec.js
+++ b/src/layouts/tpa-search/tpa-search.spec.js
@@ -840,7 +840,7 @@ describe('TPA search page', () => {
                 expect(wrapper.vm.selectedProviderNumber).toBe('');
             });
         });
-        describe.only('selectedProviderNumber', () => {
+        describe('selectedProviderNumber', () => {
             describe('does not call updateServiceLocation when', () => {
                 test('providers list is null ', () => {
                     // Arrange
diff --git a/src/layouts/tpa-submit/tpa-submit.spec.js b/src/layouts/tpa-submit/tpa-submit.spec.js
index 9ed7c5b2..7b326679 100644
--- a/src/layouts/tpa-submit/tpa-submit.spec.js
+++ b/src/layouts/tpa-submit/tpa-submit.spec.js
@@ -1,3 +1,766 @@
+// Components
+import { shallowMount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import tpaSubmit from '@/layouts/tpa-submit/tpa-submit.vue';
+
+// Supporting Files
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { useMainStore } from '@/store';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
+import settleAllPromises from '@/helpers/layout-helper.js';
+import widgetFields from '@/constants/cms-widget-fields.js';
+
+// Mock fetchCmsContentForPage
+jest.mock('@/helpers/cms-content-helper', () => ({
+    fetchCmsContentForPage: jest.fn(),
+    doesCopyContainRouterLink: jest.fn(),
+    getStringWithCustomValues: jest.fn(),
+    processIfStatements: jest.fn()
+}));
+
+jest.mock('@/helpers/text-helper.js', () => ({
+    formatAddress: jest.fn(),
+    toDisplayPhoneNumber: jest.fn(),
+    formatAmountInDollars: jest.fn(),
+    toTitleCase: jest.fn()
+}));
+
+// Mock our module for promises.
+jest.mock('@/helpers/layout-helper.js', () => jest.fn());
+
+function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRunAfterInitializingStore = () => {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    const testingPinia = createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    });
+    useMainStore(testingPinia);
+    methodToRunAfterInitializingStore();
+
+    mountOptions.global.plugins = [testingPinia];
+    mountOptions.data = () => (initialData);
+
+    const apiResponses = { cmsContent: {} };
+
+    settleAllPromises.mockImplementation(() => apiResponses);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = shallowMount(tpaSubmit, mountOptions);
+    wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => {});
+    wrapper.vm.setCmsContent = jest.fn();
+    return { wrapper };
+}
+
 describe('tpa-submit', () => {
-    test('', () => {});
+    test('returns the initial data', () => {
+        // Arrange
+        const companyName = 'Frederick Jones';
+        const mainInitialState = {
+            order: {
+                serviceLocation: {
+                    provider: { companyName }
+                }
+            }
+        };
+        const { wrapper } = getMountedComponent(mainInitialState);
+
+        // Assert
+        expect(wrapper.vm.$data).toMatchSnapshot();
+    });
+    describe('should render', () => {
+        test('tpa submit form', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const form = wrapper.findComponent({ ref: 'tpaSubmitFormRef' });
+
+            // Assert
+            expect(form.exists()).toBeTruthy();
+            expect(form.classes()).toContain('tpa-submit');
+        });
+        test('site header', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+            const expectedWidgetName = 'SiteHeaderWidget';
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBeTruthy();
+            expect(siteHeader.props().cmsWidgetName).toBe(expectedWidgetName);
+        });
+        test('vehicle banner', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+            const expectedWidgetName = 'VehicleBannerWidget';
+
+            // Act
+            const vehicleBanner = wrapper.findComponent({ ref: 'vehicleBanner' });
+
+            // Assert
+            expect(vehicleBanner.exists()).toBeTruthy();
+            expect(vehicleBanner.props().cmsWidgetName).toBe(expectedWidgetName);
+            expect(vehicleBanner.props().displayGenericVehicleImage).toBe(false);
+            expect(vehicleBanner.classes()).toContain('mt-5');
+        });
+        test('sub header', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const subHeader = wrapper.findComponent({ ref: 'subHeaderTitle' });
+
+            // Assert
+            expect(subHeader.exists()).toBeTruthy();
+            expect(subHeader.props().justifyText).toBe('center');
+            expect(subHeader.props().marginTopSizeOverride).toBe(4);
+            expect(subHeader.classes()).toContain('text-color--black');
+            expect(subHeader.classes()).toContain('fs-5');
+            expect(subHeader.classes()).toContain('tpa-submit__title--line-height');
+        });
+        test('sub header body one', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const subHeaderBodyOne = wrapper.findComponent({ ref: 'tpaSubmitSubHeaderBodyOne' });
+
+            // Assert
+            expect(subHeaderBodyOne.exists()).toBeTruthy();
+            expect(subHeaderBodyOne.classes()).toContain('small');
+            expect(subHeaderBodyOne.classes()).toContain('text-color--darker-gray');
+        });
+        test('sub header body two', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const subHeaderBodyTwo = wrapper.findComponent({ ref: 'tpaSubmitSubHeaderBodyTwo' });
+
+            // Assert
+            expect(subHeaderBodyTwo.exists()).toBeTruthy();
+            expect(subHeaderBodyTwo.classes()).toContain('mb-4');
+            expect(subHeaderBodyTwo.classes()).toContain('small');
+            expect(subHeaderBodyTwo.classes()).toContain('text-color--darker-gray');
+        });
+        test('main button one', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const mainButton = wrapper.findComponent({ ref: 'buttonMainOne' });
+
+            // Assert
+            expect(mainButton.exists()).toBeTruthy();
+            expect(mainButton.props().isPrimary).toBe(true);
+            expect(mainButton.props().loaderColor).toBe('white');
+            expect(mainButton.classes()).toContain('w-100');
+            expect(mainButton.classes()).toContain('mb-5');
+        });
+        test('service summary section', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const serviceSummarySection = wrapper.find('#serviceSummarySection');
+
+            // Assert
+            expect(serviceSummarySection.exists()).toBeTruthy();
+        });
+        test('service summary title', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const serviceSummaryTitle = wrapper.findComponent({ ref: 'tpaSubmitServiceSummaryTitle' });
+
+            // Assert
+            expect(serviceSummaryTitle.exists()).toBeTruthy();
+            expect(serviceSummaryTitle.props().marginTopSizeOverride).toBe(4);
+            expect(serviceSummaryTitle.classes()).toContain('fw-bold');
+            expect(serviceSummaryTitle.classes()).toContain('fs-1');
+            expect(serviceSummaryTitle.classes()).toContain('lh-lg');
+            expect(serviceSummaryTitle.classes()).toContain('text-color--black');
+        });
+        describe('review blocks', () => {
+            const title1 = 'Section 1';
+            const title2 = 'Another Section';
+            const lines1 = ['apple', 'banana', 'cherry'];
+            const lines2 = ['soccer', 'golf'];
+            const sections = [
+                {
+                    title: title1,
+                    lines: lines1,
+                    onClickEdit: () => {}
+                },
+                {
+                    title: title2,
+                    lines: lines2,
+                    onClickEdit: () => {}
+                }
+            ];
+            const initialData = { sections };
+            const { wrapper } = getMountedComponent({}, initialData);
+            test.each([
+                [0, true, title1, lines1],
+                [1, true, title2, lines2],
+                [2, false, null, null],
+                [-1, false, null, null]
+            ])('section %p exists value is %p with header text %p and lines %p', (index, exists, headerText, lines) => {
+                // Act
+                const reviewBlocks = wrapper.findComponent(`#review-block-${index}`);
+
+                // Assert
+                expect(reviewBlocks.exists()).toBe(exists);
+                if (exists) {
+                    expect(reviewBlocks.props().customHeaderText).toBe(headerText);
+                    expect(reviewBlocks.props().lines).toStrictEqual(lines);
+                }
+            });
+        });
+        test('submit order details section', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const submitOrderDetailsSection = wrapper.find({ ref: 'submitOrderDetailsSection' });
+
+            // Assert
+            expect(submitOrderDetailsSection.exists()).toBeTruthy();
+        });
+        test('submit order details title', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const submitOrderDetailsTitle = wrapper.findComponent({ ref: 'tpaSubmitOrderDetailsTitle' });
+
+            // Assert
+            expect(submitOrderDetailsTitle.exists()).toBeTruthy();
+            expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
+            expect(submitOrderDetailsTitle.classes()).toContain('fw-bold');
+            expect(submitOrderDetailsTitle.classes()).toContain('text-color--black');
+        });
+        test('submit order details body', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const submitOrderDetailsTitle = wrapper.findComponent({ ref: 'tpaSubmitOrderDetailsBody' });
+
+            // Assert
+            expect(submitOrderDetailsTitle.exists()).toBeTruthy();
+            expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
+            expect(submitOrderDetailsTitle.classes()).toContain('mb-4');
+            expect(submitOrderDetailsTitle.classes()).toContain('px-4');
+            expect(submitOrderDetailsTitle.classes()).toContain('small');
+            expect(submitOrderDetailsTitle.classes()).toContain('text-color--darker-gray');
+        });
+        test('deductible box', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const deductibleBox = wrapper.findComponent({ ref: 'deductibleBox' });
+
+            // Assert
+            expect(deductibleBox.exists()).toBeTruthy();
+        });
+        test('site footer', () => {
+            // Arrange
+            const wrapper = shallowMount(tpaSubmit, getMountOptions());
+
+            // Act
+            const siteFooter = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(siteFooter.exists()).toBeTruthy();
+            expect(siteFooter.props().cmsWidgetName).toBe('SiteFooterWidget');
+            expect(siteFooter.classes()).toContain('mt-5');
+        });
+    });
+    describe('before route enter', () => {
+        test('produces 4 sections', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent();
+            expect(wrapper.vm.sections.length).toBe(0);
+
+            // Act
+            await tpaSubmit.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-submit' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            // Assert
+            expect(wrapper.vm.sections.length).toBe(4);
+        });
+        test.each([
+            ['2004', 'Honda', 'Civic', '2004 Honda Civic'],
+            [null, 'Honda', 'Civic', 'Honda Civic'],
+            ['2004', '', 'Civic', '2004 Civic'],
+            ['2004', 'Honda', null, '2004 Honda'],
+            ['2004', null, undefined, '2004'],
+            [null, null, null, '']
+        ])(
+            'when store vehicle has year %p, make %p, and model %p, has line %p',
+            async (year, make, model, line) => {
+                // Arrange
+                const initialStore = {
+                    order: {
+                        vehicle: { year, make, model }
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const vehicleSectionIndex = 0;
+                const expectedLines = [line];
+
+                // Act
+                await tpaSubmit.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-submit' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                const vehicleSection = wrapper.vm.sections[vehicleSectionIndex];
+                expect(vehicleSection.lines).toStrictEqual(expectedLines);
+            }
+        );
+        test.each([
+            ['Apple sauce', 'Apple sauce'],
+            ['', ''],
+            ['', undefined],
+            ['', null]
+        ])(
+            'damage line is %p when store damage is %p',
+            async (damageLine, storeDamage) => {
+                // Arrange
+                const initialStore = {
+                    order: {
+                        policy: { damageCause: storeDamage }
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const damageSectionIndex = 1;
+                const expectedLines = [damageLine];
+
+                // Act
+                await tpaSubmit.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-submit' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                const damageSection = wrapper.vm.sections[damageSectionIndex];
+                expect(damageSection.lines).toStrictEqual(expectedLines);
+            }
+        );
+        describe('preferred shop section', () => {
+            test('has three lines', async () => {
+                // Arrange
+                const { wrapper } = getMountedComponent();
+                const preferredShopSectionIndex = 2;
+
+                // Act
+                await tpaSubmit.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-submit' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
+                expect(preferredShopSection.lines.length).toBe(3);
+            });
+            test.each([
+                ['some value', 'some value'],
+                ['', ''],
+                ['', null],
+                ['', undefined]
+            ])('first line is %p when company name is %p', async (line, companyName) => {
+                // Arrange
+                const initialData = { companyName };
+                const { wrapper } = getMountedComponent({}, initialData);
+                const preferredShopSectionIndex = 2;
+
+                // Act
+                await tpaSubmit.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-submit' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
+                expect(preferredShopSection.lines[0]).toBe(line);
+            });
+            test('second line is expected and formatAddress called', async () => {
+                // Arrange
+                const address = {
+                    streetAddress: '123 South Ln',
+                    city: 'Oneida',
+                    state: 'FL',
+                    zipCode: '78226'
+                };
+                const initialStore = {
+                    order: {
+                        serviceLocation: {
+                            provider: { address }
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const line = 'some returned line';
+                wrapper.vm.formatAddress = jest.fn().mockImplementationOnce(() => line);
+                const preferredShopSectionIndex = 2;
+
+                // Act
+                await tpaSubmit.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-submit' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
+                expect(preferredShopSection.lines[1]).toBe(line);
+                expect(wrapper.vm.formatAddress).toHaveBeenCalledTimes(1);
+                expect(wrapper.vm.formatAddress).toHaveBeenCalledWith(
+                    address.streetAddress,
+                    null,
+                    address.city,
+                    address.state,
+                    address.zipCode
+                );
+            });
+            test('third line is expected and toDisplayPhoneNumber called', async () => {
+                // Arrange
+                const phoneNumber = '9998887777';
+                const initialStore = {
+                    order: {
+                        serviceLocation: {
+                            provider: { phoneNumber }
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const expectedLine = 'returned from to display phone num';
+                wrapper.vm.toDisplayPhoneNumber = jest.fn().mockImplementationOnce(() => expectedLine);
+                const preferredShopSectionIndex = 2;
+
+                // Act
+                await tpaSubmit.beforeRouteEnter.call(
+                    wrapper.vm,
+                    { query: { issPage: 'tpa-submit' } },
+                    undefined,
+                    (c) => c(wrapper.vm)
+                );
+
+                // Assert
+                const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
+                expect(preferredShopSection.lines[2]).toBe(expectedLine);
+                expect(wrapper.vm.toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
+            });
+        });
+        test('contact info section has expected content', async () => {
+            // Arrange
+            const firstName = 'Jones';
+            const lastName = 'Eddison';
+            const emailAddress = 'myname@gmail.com';
+            const phoneNumber = '0001112222';
+            const initialStore = {
+                order: {
+                    contactInfo: {
+                        firstName,
+                        lastName,
+                        emailAddress,
+                        phoneNumber
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(initialStore);
+            const expectedLine1 = 'Jones Eddison';
+            const expectedLine2 = emailAddress;
+            const expectedLine3 = 'some value returned';
+            wrapper.vm.toDisplayPhoneNumber = jest.fn().mockImplementation((number) => (number === phoneNumber ? expectedLine3 : ''));
+            const contactInfoSectionIndex = 3;
+
+            // Act
+            await tpaSubmit.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-submit' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+
+            // Assert
+            const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
+            expect(contactInfoSection.lines[0]).toBe(expectedLine1);
+            expect(contactInfoSection.lines[1]).toBe(expectedLine2);
+            expect(contactInfoSection.lines[2]).toBe(expectedLine3);
+            expect(wrapper.vm.toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
+        });
+    });
+    describe('computed', () => {
+        test.each([
+            ['subHeaderTitle', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'site sub header'],
+            ['subHeaderBodyOne', 'SiteSubHeaderWidget', widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT, 'sub header body one'],
+            ['serviceSummaryText', 'ServiceSummaryContent', widgetFields.TEXT_BLOCK_WIDGET.TEXT, 'service summary text'],
+            ['orderDetailsTitle', 'OrderDetailsContent', widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT, 'order details title'],
+            ['forwardButtonText', 'SiteFooterWidget', widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT, 'forward button text']
+        ])('computed %p returns expected value', (computedName, widgetLabel, fieldLabel, expected) => {
+            // Arrange
+            const mountOptions = getMountOptions();
+            mountOptions.mixins = [{
+                methods: {
+                    getCmsContent: jest.fn().mockImplementation((widget, field) =>
+                        (widget === widgetLabel && field === fieldLabel ? expected : ''))
+                }
+            }];
+            const wrapper = shallowMount(tpaSubmit, mountOptions);
+
+            // Act
+            const result = wrapper.vm[computedName];
+
+            // Assert
+            expect(result).toEqual(expected);
+        });
+        test.each([
+            [true, true],
+            [false, false]
+        ])('isVerified returns %p when store value %p', (expected, storeValue) => {
+            // Arrange
+            const initialStore = {
+                order: {
+                    payment: {
+                        insuranceCoverage: { isVerified: storeValue }
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(initialStore);
+
+            // Assert
+            expect(wrapper.vm.isVerified).toBe(expected);
+        });
+        test.each([
+            [5, 5],
+            [-1, -1],
+            [0, 0],
+            [null, null],
+            [undefined, undefined]
+        ])('currentDeductible returns %p when store value %p', (expected, storeValue) => {
+            // Arrange
+            const initialStore = {
+                order: {
+                    currentDeductible: storeValue
+                }
+            };
+            const { wrapper } = getMountedComponent(initialStore);
+
+            // Assert
+            expect(wrapper.vm.currentDeductible).toBe(expected);
+        });
+        describe('deductible box value', () => {
+            test('returns "Verifying coverage" when isVerified false', () => {
+                // Arrange
+                const initialStore = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: { isVerified: false }
+                        }
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const expected = 'Verifying coverage';
+
+                // Assert
+                expect(wrapper.vm.deductibleBoxValue).toBe(expected);
+            });
+            test('returns in dollars response when isVerified true', () => {
+                // Arrange
+                const currentDeductible = '123094';
+                const initialStore = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: { isVerified: true }
+                        },
+                        currentDeductible
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const notExpected = 'Verifying coverage';
+
+                // Assert
+                expect(wrapper.vm.deductibleBoxValue).not.toBe(notExpected);
+            });
+        });
+    });
+    describe('methods', () => {
+        describe('getCustomValueFromString', () => {
+            describe('with argument deductibleAboveZero', () => {
+                test.each([
+                    [false],
+                    [true]
+                ])(
+                    'returns false when isVerified %p and currentDeductible is zero',
+                    (isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 0
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'deductibleAboveZero';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(false);
+                    }
+                );
+                test.each([
+                    [true, true],
+                    [false, false]
+                ])(
+                    'returns %p when isVerified %p and currentDeductible is not zero',
+                    (expected, isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 10
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'deductibleAboveZero';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(expected);
+                    }
+                );
+            });
+            describe('with argument zeroDeductible', () => {
+                test.each([
+                    [true, true],
+                    [false, false]
+                ])(
+                    'returns %p when isVerified is %p currentDeductible is zero',
+                    (expected, isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 0
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'zeroDeductible';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(expected);
+                    }
+                );
+                test.each([
+                    [false],
+                    [true]
+                ])(
+                    'returns false when isVerified is %p currentDeductible is not zero',
+                    (isVerified) => {
+                        // Arrange
+                        const initialStore = {
+                            order: {
+                                payment: {
+                                    insuranceCoverage: { isVerified }
+                                },
+                                currentDeductible: 76
+                            }
+                        };
+                        const { wrapper } = getMountedComponent(initialStore);
+                        const argument = 'zeroDeductible';
+
+                        // Act
+                        const result = wrapper.vm.getCustomValueFromString(argument);
+
+                        // Assert
+                        expect(result).toBe(false);
+                    }
+                );
+            });
+            test.each([
+                [true, false],
+                [false, true]
+            ])(
+                'with argument verifyingCoverage returns %p when isVerified %p',
+                (expected, isVerified) => {
+                    // Arrange
+                    const initialStore = {
+                        order: {
+                            payment: {
+                                insuranceCoverage: { isVerified }
+                            },
+                            currentDeductible: 26
+                        }
+                    };
+                    const { wrapper } = getMountedComponent(initialStore);
+                    const argument = 'verifyingCoverage';
+
+                    // Act
+                    const result = wrapper.vm.getCustomValueFromString(argument);
+
+                    // Assert
+                    expect(result).toBe(expected);
+                }
+            );
+            test('with unknown argument returns null', () => {
+                // Arrange
+                const initialStore = {
+                    order: {
+                        payment: {
+                            insuranceCoverage: { isVerified: true }
+                        },
+                        currentDeductible: 26
+                    }
+                };
+                const { wrapper } = getMountedComponent(initialStore);
+                const argument = 'some random string';
+
+                // Act
+                const result = wrapper.vm.getCustomValueFromString(argument);
+
+                // Assert
+                expect(result).toBe(null);
+            });
+        });
+    });
 });
diff --git a/src/layouts/tpa-submit/tpa-submit.vue b/src/layouts/tpa-submit/tpa-submit.vue
index 35cd1e96..5c272f36 100644
--- a/src/layouts/tpa-submit/tpa-submit.vue
+++ b/src/layouts/tpa-submit/tpa-submit.vue
@@ -17,20 +17,23 @@
                         :displayGenericVehicleImage="false"
                         class="mt-5" /> <!-- TODO fix styling -->
                     <textBlock
+                        ref="subHeaderTitle"
                         :customText="subHeaderTitle"
                         justifyText="center"
                         :marginTopSizeOverride="4"
                         class="text-color--black fs-5 tpa-submit__title--line-height" />
                     <textBlock
                         id="tpaSubmitSubHeaderBodyOne"
+                        ref="tpaSubmitSubHeaderBodyOne"
                         :customText="subHeaderBodyOne"
                         class="small text-color--darker-gray" />
                     <textBlock
                         id="tpaSubmitSubHeaderBodyTwo"
+                        ref="tpaSubmitSubHeaderBodyTwo"
                         :customText="subHeaderBodyTwo"
                         class="mb-4 small text-color--darker-gray" />
                     <buttonMain
-                        ref="buttonMain"
+                        ref="buttonMainOne"
                         isPrimary
                         :buttonText="forwardButtonText"
                         loaderColor="white"
@@ -40,6 +43,7 @@
                     <div id="serviceSummarySection">
                         <textBlock
                             id="tpaSubmitServiceSummaryTitle"
+                            ref="tpaSubmitServiceSummaryTitle"
                             :customText="serviceSummaryText"
                             :marginTopSizeOverride="4"
                             class="fw-bold fs-1 lh-lg text-color--black" />
@@ -59,18 +63,22 @@
                         </div>
                     </div>
                     <hr class="mb-0" />
-                    <div id="submitOrderDetailsSection">
+                    <div
+                        id="submitOrderDetailsSection"
+                        ref="submitOrderDetailsSection">
                         <textBlock
                             id="tpaSubmitOrderDetailsTitle"
+                            ref="tpaSubmitOrderDetailsTitle"
                             :customText="orderDetailsTitle"
                             :marginTopSizeOverride="4"
                             class="fw-bold text-color--black" />
                         <textBlock
                             id="tpaSubmitOrderDetailsBody"
+                            ref="tpaSubmitOrderDetailsBody"
                             :customText="orderDetailsBody"
                             :marginTopSizeOverride="4"
                             class="mb-4 px-4 small text-color--darker-gray" />
-                        <deductibleBox :value="deductibleBoxValue" />
+                        <deductibleBox ref="deductibleBox" :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
                         ref="siteFooter"
@@ -170,6 +178,9 @@ export default {
             const orderDetailsBodyText = this.getCmsContent(this.widget.orderDetails, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
             return this.processIfStatements(orderDetailsBodyText, 'custom', this.getCustomValueFromString);
         },
+        forwardButtonText() {
+            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
+        },
         isVerified() {
             return useMainStore().order.payment.insuranceCoverage.isVerified;
         },
@@ -179,28 +190,28 @@ export default {
         deductibleBoxValue() {
             return this.isVerified ? this.formatAmountInDollars(this.currentDeductible) : VERIFYING_COVERAGE;
         },
-        forwardButtonText() {
-            return this.getCmsContent(this.widget.footer, widgetFields.FOOTER_WIDGET.FORWARD_BUTTON_TEXT);
-        },
         getVehicleLines() {
             const { year, make, model } = useMainStore().order.vehicle;
-            return [`${year} ${make} ${model}`];
+            const line = [year, make, model]
+                .filter((v) => v != null && v !== '')
+                .join(' ');
+            return [line];
         },
         getDamageLines() {
-            return [useMainStore().order.policy.damageCause];
+            return [useMainStore().order.policy.damageCause ?? ''];
         },
         getPreferredShopLines() {
             const { phoneNumber, address } = useMainStore().order.serviceLocation.provider;
             const { streetAddress, city, state, zipCode } = address;
             const displayAddress = this.formatAddress(streetAddress, null, city, state, zipCode);
             const displayPhoneNumber = this.toDisplayPhoneNumber(phoneNumber);
-            return [this.companyName, displayAddress, displayPhoneNumber];
+            return [this.companyName ?? '', displayAddress, displayPhoneNumber];
         },
         getContactInfoLines() {
             const { firstName, lastName, emailAddress, phoneNumber } = useMainStore().order.contactInfo;
             return [
                 `${firstName} ${lastName}`,
-                emailAddress,
+                emailAddress ?? '',
                 this.toDisplayPhoneNumber(phoneNumber)
             ];
         }

From a267e1a62f358ade4945c00c6e107567f751aa64 Mon Sep 17 00:00:00 2001
From: Michaela Brydon <Michaela.Brydon@safelite.com>
Date: Fri, 5 Jan 2024 16:19:45 -0500
Subject: [PATCH 16/18] Adding snapshot

---
 .../__snapshots__/tpa-submit.spec.js.snap     | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap

diff --git a/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
new file mode 100644
index 00000000..10ea690d
--- /dev/null
+++ b/src/layouts/tpa-submit/__snapshots__/tpa-submit.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`tpa-submit returns the initial data 1`] = `
+Object {
+  "companyName": "Frederick Jones",
+  "customValueMap": Object {
+    "glassShop": "Frederick Jones",
+  },
+  "sections": Array [],
+  "widget": Object {
+    "footer": "SiteFooterWidget",
+    "orderDetails": "OrderDetailsContent",
+    "serviceSummary": "ServiceSummaryContent",
+    "siteHeader": "SiteHeaderWidget",
+    "siteSubHeader": "SiteSubHeaderWidget",
+    "subheader": Object {
+      "contactInfo": "ContactDetailsSubTitle",
+      "damage": "DamageSubTitle",
+      "shop": "PreferredShopSubTitle",
+      "vehicle": "VehicleSubTitle",
+    },
+    "vehicleBanner": "VehicleBannerWidget",
+  },
+}
+`;

From 3025154e19a72952a920e9fc28fcd4b5147e81b8 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 10 Jan 2024 10:36:50 -0500
Subject: [PATCH 17/18] pass in 0 if deductible is null

---
 src/store/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index df6f8b25..6a03cac5 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -941,7 +941,7 @@ export const useMainStore = defineStore({
             }
             const ctuToUse = this.order.serviceLocation.zipCodeCtu;
             const availableLineItemsFormattedForRequest = getLineItemQueryStringForPricing(availableLineItems);
-            const deductibleToUse = this.order.currentDeductible;
+            const deductibleToUse = this.order?.currentDeductible ?? 0;
 
             let queryString =
             `ParentAccountNumber=${this.order.accountNumber}`

From 3a3bbb2c6d478863a6121ab322f20b29e4d71a24 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 10 Jan 2024 10:48:47 -0500
Subject: [PATCH 18/18] remove ?

---
 src/store/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index 6a03cac5..0c4b7ad1 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -941,7 +941,7 @@ export const useMainStore = defineStore({
             }
             const ctuToUse = this.order.serviceLocation.zipCodeCtu;
             const availableLineItemsFormattedForRequest = getLineItemQueryStringForPricing(availableLineItems);
-            const deductibleToUse = this.order?.currentDeductible ?? 0;
+            const deductibleToUse = this.order.currentDeductible ?? 0;
 
             let queryString =
             `ParentAccountNumber=${this.order.accountNumber}`