Merge pull request #1020 from Safelite/feature/humphries/INSR-7772

INSR-7772: tpa-submit parity updates

src/constants/progress-bar-mapper.js

@@ -71,6 +71,9 @@ export const pageProgressMapper = {
     'tpa-search': {
         percent: 85
     },
+    'tpa-submit': {
+        percent: 95
+    },
     'tpa-confirmation': {
         percent: 100
     },

src/helpers/text-helper.js

@@ -34,11 +34,8 @@ export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) {
  * @returns {string}
  */
 export function toTitleCase(text) {
-    const temp = text?.toLowerCase()?.split(' ') ?? [];
+    let temp = text?.toLowerCase() ?? '';
-    for (let i = 0; i < temp.length; i++) {
+    return temp.replace(/(^|\s|-)\S/g, (letter) => letter.toUpperCase());
-        temp[i] = temp[i].charAt(0).toUpperCase() + temp[i].slice(1);
-    }
-    return temp.join(' ');
 }
 
 /**

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

@@ -2,24 +2,20 @@
 
 exports[`tpa-submit returns the initial data 1`] = `
 Object {
-  "companyName": "Frederick Jones",
+  "modalPositions": Object {
-  "customValueMap": Object {
+    "center": "center",
-    "glassShop": "Frederick Jones",
+    "edge": "edge",
   },
   "sections": Array [],
   "widget": Object {
-    "damageLocations": "DamageLocationsWidget",
+    "alertIncomplete": "AlertIncompleteWidget",
+    "alertRecalWarning": "AlertRecalWarningWidget",
+    "contactDetails": "ContactDetailsSectionWidget",
+    "editShopLinkText": "EditShopLinkTextWidget",
     "footer": "SiteFooterWidget",
     "orderDetails": "OrderDetailsContent",
-    "serviceSummary": "ServiceSummaryContent",
     "siteHeader": "SiteHeaderWidget",
     "siteSubHeader": "SiteSubHeaderWidget",
-    "subheader": Object {
-      "contactInfo": "ContactDetailsSubTitle",
-      "damage": "DamageSubTitle",
-      "shop": "PreferredShopSubTitle",
-      "vehicle": "VehicleSubTitle",
-    },
   },
 }
 `;

src/layouts/tpa-submit/contact-details-drawer/__snapshots__/contact-details-drawer.spec.js.snap

@@ -3,12 +3,18 @@
 exports[`contact-details-drawer snapshot matches returns the initial data 1`] = `
 Object {
   "emailAddress": "fred.tay@gmail.com",
+  "extension": null,
   "firstName": "Frederick",
   "isModalOpened": false,
   "lastName": "Taylor",
+  "modalPositions": Object {
+    "center": "center",
+    "edge": "edge",
+  },
   "phoneNumber": "606-009-2943",
   "rules": Object {
     "emailAddress": "email-required|email-address-format",
+    "extension": "extension-format",
     "firstName": "first-name-required",
     "lastName": "last-name-required",
     "phoneNumber": "phone-number-required|phone-number-format",
@@ -16,6 +22,7 @@ Object {
   "widget": Object {
     "drawerFooter": "ContactDetailsDrawerFooterWidget",
     "emailQuestion": "EmailQuestionWidget",
+    "extensionQuestion": "ExtensionQuestionWidget",
     "firstNameQuestion": "FirstNameQuestionWidget",
     "lastNameQuestion": "LastNameQuestionWidget",
     "phoneNumberQuestion": "PhoneNumberQuestionWidget",

src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.spec.js

@@ -65,15 +65,16 @@ describe('contact-details-drawer', () => {
     describe('method', () => {
         describe('saveContactDetails', () => {
             test.each([
-                ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909'],
+                ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
-                [null, 'Jones', 's.jones@gmail.com', '724-996-0909'],
+                [null, 'Jones', 's.jones@gmail.com', '724-996-0909', '12345'],
-                ['Sarah', null, 's.jones@gmail.com', '724-996-0909'],
+                ['Sarah', null, 's.jones@gmail.com', '724-996-0909', '12345'],
-                ['Sarah', 'Jones', null, '724-996-0909'],
+                ['Sarah', 'Jones', null, '724-996-0909', '12345'],
-                ['Sarah', 'Jones', 's.jones@gmail.com', null]
+                ['Sarah', 'Jones', 's.jones@gmail.com', null, '12345'],
+                ['Sarah', 'Jones', 's.jones@gmail.com', '724-996-0909', null],
 
             ])(
-                'when first name data "%p", last name "%p", email "%p", and phone number "%p", updateContactInfo called with expected',
+                'when first name data "%p", last name "%p", email "%p", phone number "%p", and extension "%p", updateContactInfo called with expected',
-                (firstName, lastName, emailAddress, phoneNumber) => {
+                (firstName, lastName, emailAddress, phoneNumber, extension) => {
                     // Arrange
                     const mainInitialState = {
                         order: {
@@ -81,12 +82,13 @@ describe('contact-details-drawer', () => {
                                 firstName: 'Frederick',
                                 lastName: 'Taylor',
                                 emailAddress: 'fred.tay@gmail.com',
-                                servicePhone: '606-009-2943'
+                                servicePhone: '606-009-2943',
+                                extension: '11111'
                             }
                         }
                     };
                     const initialData = {
-                        firstName, lastName, emailAddress, phoneNumber
+                        firstName, lastName, emailAddress, phoneNumber, extension
                     };
                     const { wrapper } = getMountedComponent(mainInitialState, initialData);
 
@@ -98,7 +100,7 @@ describe('contact-details-drawer', () => {
                     expect(useMainStore().updateContactInfo).toBeCalledTimes(1);
                     expect(useMainStore().updateContactInfo).toBeCalledWith({ firstName, lastName, emailAddress });
                     expect(useMainStore().updatePhoneNumbers).toBeCalledTimes(1);
-                    expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber });
+                    expect(useMainStore().updatePhoneNumbers).toBeCalledWith({ home: phoneNumber, service: phoneNumber, extension: extension });
                 }
             );
         });

src/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue

@@ -1,6 +1,7 @@
 <template>
     <modal
         :ref="modalName"
+        :modalPosition="modalPositions.center"
         :headerText="headerText"
         :footerButtonText="footerButtonText"
         :onModalClosedCallback="resetFormValues"
@@ -8,7 +9,9 @@
         @isModalOpened="setModalStatus"
         @footerButtonEvent="clickFooterButtonEvent">
         <template v-if="isModalOpened">
+            <div class="row">
                 <textboxQuestion
+                    class="col"
                     ref="firstNameQuestion"
                     v-model="firstName"
                     inputId="firstName"
@@ -16,17 +19,17 @@
                     isRequired
                     :validationRules="rules.firstName" />
                 <textboxQuestion
+                    class="col"
                     ref="lastNameQuestion"
                     v-model="lastName"
-                class="mt-4"
                     inputId="lastName"
                     :cmsWidgetName="widget.lastNameQuestion"
                     isRequired
                     :validationRules="rules.lastName" />
+            </div>
             <textboxQuestion
                 ref="emailQuestion"
                 v-model="emailAddress"
-                class="mt-4"
                 inputId="emailAddress"
                 :cmsWidgetName="widget.emailQuestion"
                 isRequired
@@ -34,13 +37,19 @@
             <textboxQuestion
                 ref="phoneNumberQuestion"
                 v-model="phoneNumber"
-                class="mt-4"
                 inputId="phoneNumber"
                 :cmsWidgetName="widget.phoneNumberQuestion"
                 isRequired
                 :mask="phoneMask"
                 disableAutoFill
                 :validationRules="rules.phoneNumber" />
+            <textboxQuestion
+                ref="extensionQuestion"
+                v-model="extension"
+                inputId="extension"
+                :cmsWidgetName="widget.extensionQuestion"
+                disableAutoFill
+                :validationRules="rules.extension" />
         </template>
     </modal>
 </template>
@@ -51,10 +60,11 @@ import modal from '@/digital-components/modal/modal.vue';
 import textboxQuestion from '@/digital-components/textbox-question/textbox-question.vue';
 
 // Supporting Files
-import { useMainStore } from '@/store/index.js';
+import { useMainStore } from '@/store';
 import globalRules from '@/constants/global-rules.js';
 import MaskaFormattedMasks from '@/constants/maska-masks';
 import widgetFields from '@/constants/cms-widget-fields.js';
+import { modalPositions } from '@/constants/component-variants';
 
 export default {
     name: 'contact-details-drawer',
@@ -67,27 +77,32 @@ export default {
         const { firstName,
             lastName,
             emailAddress,
-            servicePhone } = useMainStore().contactInfo;
+            servicePhone,
+            extension } = useMainStore().contactInfo;
         return {
             isModalOpened: false,
             firstName,
             lastName,
             emailAddress,
             phoneNumber: servicePhone,
+            extension: extension,
             widget: {
                 title: 'ContactDetailsDrawerHeaderWidget',
                 firstNameQuestion: 'FirstNameQuestionWidget',
                 lastNameQuestion: 'LastNameQuestionWidget',
                 emailQuestion: 'EmailQuestionWidget',
                 phoneNumberQuestion: 'PhoneNumberQuestionWidget',
+                extensionQuestion: 'ExtensionQuestionWidget',
                 drawerFooter: 'ContactDetailsDrawerFooterWidget'
             },
             rules: {
                 firstName: globalRules.FIRST_NAME_REQUIRED,
                 lastName: globalRules.LAST_NAME_REQUIRED,
                 emailAddress: `${globalRules.EMAIL_ADDRESS_REQUIRED}|${globalRules.EMAIL_ADDRESS_FORMAT}`,
-                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`
+                phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
-            }
+                extension: `${globalRules.EXTENSION_FORMAT}`
+            },
+            modalPositions
         };
     },
     computed: {
@@ -121,10 +136,11 @@ export default {
                 lastName: this.lastName,
                 emailAddress: this.emailAddress
             };
-            useMainStore().updateContactInfo(contactInfo);
+            this.mainStore.updateContactInfo(contactInfo);
-            useMainStore().updatePhoneNumbers({
+            this.mainStore.updatePhoneNumbers({
                 home: this.phoneNumber,
-                service: this.phoneNumber
+                service: this.phoneNumber,
+                extension: this.extension
             });
             this.$emit('update-contact-details');
         },
@@ -132,11 +148,13 @@ export default {
             const { firstName,
                 lastName,
                 emailAddress,
-                servicePhone } = useMainStore().contactInfo;
+                servicePhone,
+                extension } = this.mainStore.contactInfo;
             this.firstName = firstName;
             this.lastName = lastName;
             this.emailAddress = emailAddress;
             this.phoneNumber = servicePhone;
+            this.extension = extension;
         },
         openModal() {
             this.modal.openModal();
@@ -155,5 +173,14 @@ export default {
         font-size: $h5-font-size;
         font-weight: $font-weight-normal !important;
     }
+    .textbox-question {
+        margin-bottom: 1.25rem;
+        :deep(label:has(b)) {
+            font-weight: $font-weight-normal;
+            b {
+                font-weight: 600;
+            }
+        }
+    }
 }
 </style>

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

@@ -18,7 +18,7 @@ describe('deductible-box', () => {
 
     it('renders the correct deductible label', () => {
         const labelElement = wrapper.find('#deductibleLabel');
-        expect(labelElement.text()).toBe('Deductible');
+        expect(labelElement.text()).toBe('Deductible:');
     });
 
     it('has the correct id', () => {
@@ -26,12 +26,8 @@ describe('deductible-box', () => {
     });
 
     it('has the correct classes', () => {
-        expect(wrapper.classes().length).toBe(5);
+        expect(wrapper.classes().length).toBe(1);
         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');
     });
     it.each([
         ['', ''],

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

@@ -1,17 +1,9 @@
 <template>
     <div
         id="deductibleBox"
-        class="deductible-box d-flex justify-content-between align-items-center py-2">
+        class="deductible-box">
-        <p
+        <span id="deductibleLabel" class="deductible-label">Deductible:</span>
-            id="deductibleLabel"
+        <span id="deductibleValue" class="deductible-value">{{ value }}</span>
-            class="deductible-box__text">
-            Deductible
-        </p>
-        <p
-            id="deductibleValue"
-            class="deductible-box__text">
-            {{ value }}
-        </p>
     </div>
 </template>
 
@@ -28,12 +20,17 @@ export default {
 
 <style lang="scss" scoped>
 .deductible-box {
-    background-color: $green;
+    display: flex;
+    align-items: center;
+    gap: .25rem;
 }
-
+.deductible-label {
-.deductible-box__text {
+    color: $black;
-    color: white;
+    font-weight: 600;
+}
+.deductible-value {
+    color: $green;
     font-weight: 500;
-    margin: 0;
+    font-size: 1.625rem;
 }
 </style>

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

@@ -20,12 +20,12 @@ describe('ReviewBlock.vue', () => {
     });
 
     it('renders the correct number of lines', () => {
-        const lineElements = wrapper.findAll('.review-block__body--line');
+        const lineElements = wrapper.findAll('.review-body p');
         expect(lineElements.length).toBe(lines.length);
     });
 
     it('renders the correct line text', () => {
-        const lineElements = wrapper.findAll('.review-block__body--line');
+        const lineElements = wrapper.findAll('.review-body p');
         lines.forEach((line, index) => {
             expect(lineElements.at(index).text()).toBe(line);
         });

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

@@ -1,11 +1,17 @@
 <template>
     <div class="review-block">
-        <div class="d-flex justify-content-between">
+        <p class="review-block__header">
-            <p class="review-block__header small-strong pb-1">
             {{ customHeaderText }}
         </p>
+        <div class="review-body">
+            <p
+                v-for="line in lines"
+                :key="line"
+                v-html="line">
+            </p>
+        </div>
         <textLink
-                linkType="textSmall"
+            linkType="text"
             :text="editLinkText"
             useLoadingModal
             href="javascript:void(0)"
@@ -18,13 +24,6 @@
             </template>
         </textLink>
     </div>
-        <p
-            v-for="line in lines"
-            :key="line"
-            class="small review-block__body--line"
-            v-html="line">
-        </p>
-    </div>
 </template>
 
 <script>
@@ -36,14 +35,13 @@ export default {
     props: {
         customHeaderText: String,
         editScreenReaderTextCmsWidgetName: String,
-        lines: Array
+        lines: Array,
+        editLinkText: {
+            type: String,
+            default: 'Edit'
+        },
     },
     emits: ['click-edit'],
-    data() {
-        return {
-            editLinkText: 'Edit'
-        };
-    },
     methods: {
         editClicked() {
             this.$emit('click-edit');
@@ -59,12 +57,16 @@ export default {
     }
     .review-block__header {
         color: $black;
+        font-weight: $font-weight-bold;
+        margin-bottom: .625rem;
     }
-    .review-block__body--line {
+
-        color: $gray-600;
+    .review-body {
+        margin-bottom: .625rem
     }
+
     .link {
-        text-underline-offset: 1px;
+        font-weight: $font-weight-normal
     }
 }
 </style>

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

@@ -18,7 +18,15 @@ import coverageStatuses from '@/constants/coverage-statuses';
 jest.mock('@/helpers/cms-content-helper', () => ({
     fetchCmsContentForPage: jest.fn(),
     doesCopyContainRouterLink: jest.fn(),
-    getStringWithCustomValues: jest.fn(),
+    getStringWithCustomValues: jest.fn((str, customValueMap) => {
+        let newString = str ?? '';
+        if (customValueMap != null) {
+            Object.keys(customValueMap).forEach((key) => {
+                newString = newString.replaceAll(`{custom:${key}}`, customValueMap[key]);
+            });
+        }
+        return newString;
+    }),
     processIfStatements: jest.fn()
 }));
 
@@ -129,11 +137,7 @@ describe('tpa-submit', () => {
 
             // Assert
             expect(subHeader.exists()).toBeTruthy();
-            expect(subHeader.props().justifyText).toBe('center');
+            expect(subHeader.classes()).toContain('tpa-submit-title');
-            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
@@ -144,34 +148,6 @@ describe('tpa-submit', () => {
 
             // 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().variant).toBe('success');
-            expect(mainButton.classes()).toContain('w-100');
-            expect(mainButton.classes()).toContain('mb-5');
         });
         test('service summary section', () => {
             // Arrange
@@ -183,21 +159,6 @@ describe('tpa-submit', () => {
             // 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';
@@ -253,24 +214,8 @@ describe('tpa-submit', () => {
 
             // Assert
             expect(submitOrderDetailsTitle.exists()).toBeTruthy();
-            expect(submitOrderDetailsTitle.props().marginTopSizeOverride).toBe(4);
             expect(submitOrderDetailsTitle.classes()).toContain('fw-bold');
-            expect(submitOrderDetailsTitle.classes()).toContain('text-color--black');
+            expect(submitOrderDetailsTitle.classes()).toContain('order-details-title');
-        });
-        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
@@ -306,7 +251,7 @@ describe('tpa-submit', () => {
         });
     });
     describe('before route enter', () => {
-        test('produces 4 sections', async () => {
+        test('produces 2 sections', async () => {
             // Arrange
             const { wrapper } = getMountedComponent();
             expect(wrapper.vm.sections.length).toBe(0);
@@ -320,65 +265,13 @@ describe('tpa-submit', () => {
             );
 
             // Assert
-            expect(wrapper.vm.sections.length).toBe(4);
+            expect(wrapper.vm.sections.length).toBe(2);
-        });
-        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('damage section lines equal result from getDamageDisplayContent', async () => {
-            // Arrange
-            const { wrapper } = getMountedComponent();
-            const damageSectionIndex = 1;
-            const expectedLines = ['hi', 'potato', 'vehicle 3'];
-            getDamageDisplayContent.mockImplementationOnce(() => expectedLines);
-
-            // 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).toEqual(expectedLines);
         });
         describe('preferred shop section', () => {
-            test('has three lines', async () => {
+            test('has two lines', async () => {
                 // Arrange
                 const { wrapper } = getMountedComponent();
-                const preferredShopSectionIndex = 2;
+                const preferredShopSectionIndex = 0;
 
                 // Act
                 await tpaSubmit.beforeRouteEnter.call(
@@ -390,15 +283,15 @@ describe('tpa-submit', () => {
 
                 // Assert
                 const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
-                expect(preferredShopSection.lines.length).toBe(3);
+                expect(preferredShopSection.lines.length).toBe(2);
             });
-            test('first line is value returned from toTitleCase method', async () => {
+            test('title is value returned from toTitleCase method', async () => {
                 // Arrange
                 const initialData = { companyName: 'some value' };
                 const { wrapper } = getMountedComponent({}, initialData);
                 const expectedName = 'some expected name';
                 toTitleCase.mockImplementationOnce(() => expectedName);
-                const preferredShopSectionIndex = 2;
+                const preferredShopSectionIndex = 0;
 
                 // Act
                 await tpaSubmit.beforeRouteEnter.call(
@@ -410,9 +303,9 @@ describe('tpa-submit', () => {
 
                 // Assert
                 const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
-                expect(preferredShopSection.lines[0]).toBe(expectedName);
+                expect(preferredShopSection.title).toBe(expectedName);
             });
-            test('second line is expected and formatAddress called', async () => {
+            test('first line is expected and formatAddress called', async () => {
                 // Arrange
                 const address = {
                     streetAddress: '123 South Ln',
@@ -430,7 +323,7 @@ describe('tpa-submit', () => {
                 const { wrapper } = getMountedComponent(initialStore);
                 const line = 'some returned line';
                 formatAddress.mockImplementationOnce(() => line);
-                const preferredShopSectionIndex = 2;
+                const preferredShopSectionIndex = 0;
 
                 // Act
                 await tpaSubmit.beforeRouteEnter.call(
@@ -442,7 +335,7 @@ describe('tpa-submit', () => {
 
                 // Assert
                 const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
-                expect(preferredShopSection.lines[1]).toBe(line);
+                expect(preferredShopSection.lines[0]).toBe(line);
                 expect(formatAddress).toHaveBeenCalledTimes(1);
                 expect(formatAddress).toHaveBeenCalledWith(
                     address.streetAddress,
@@ -452,7 +345,7 @@ describe('tpa-submit', () => {
                     address.zipCode
                 );
             });
-            test('third line is expected and toDisplayPhoneNumber called', async () => {
+            test('second line is expected and toDisplayPhoneNumber called', async () => {
                 // Arrange
                 const phoneNumber = '9998887777';
                 const initialStore = {
@@ -465,7 +358,7 @@ describe('tpa-submit', () => {
                 const { wrapper } = getMountedComponent(initialStore);
                 const expectedLine = 'returned from to display phone num';
                 toDisplayPhoneNumber.mockImplementationOnce(() => expectedLine);
-                const preferredShopSectionIndex = 2;
+                const preferredShopSectionIndex = 0;
 
                 // Act
                 await tpaSubmit.beforeRouteEnter.call(
@@ -477,7 +370,7 @@ describe('tpa-submit', () => {
 
                 // Assert
                 const preferredShopSection = wrapper.vm.sections[preferredShopSectionIndex];
-                expect(preferredShopSection.lines[2]).toBe(expectedLine);
+                expect(preferredShopSection.lines[1]).toBe(expectedLine);
                 expect(toDisplayPhoneNumber).toHaveBeenCalledWith(phoneNumber);
             });
         });
@@ -487,8 +380,14 @@ describe('tpa-submit', () => {
             const lastName = 'Eddison';
             const emailAddress = 'myname@gmail.com';
             const servicePhone = '0001112222';
+            const providerCompanyName = 'Some Provider LLC';
             const initialStore = {
                 order: {
+                    serviceLocation: {
+                        provider: {
+                            companyName: providerCompanyName
+                         }
+                    },
                     contactInfo: {
                         firstName,
                         lastName,
@@ -498,11 +397,11 @@ describe('tpa-submit', () => {
                 }
             };
             const { wrapper } = getMountedComponent(initialStore);
-            const expectedLine1 = 'Jones Eddison';
+            const expectedEmail = emailAddress;
-            const expectedLine2 = emailAddress;
+            const expectedPhone = 'some value returned';
-            const expectedLine3 = 'some value returned';
+            toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
-            toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedLine3 : ''));
+            const contactInfoSectionIndex = 1;
-            const contactInfoSectionIndex = 3;
+            wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}');
 
             // Act
             await tpaSubmit.beforeRouteEnter.call(
@@ -511,12 +410,59 @@ describe('tpa-submit', () => {
                 undefined,
                 (c) => c(wrapper.vm)
             );
+            wrapper.vm.setSections();
 
             // Assert
             const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
-            expect(contactInfoSection.lines[0]).toBe(expectedLine1);
+            expect(contactInfoSection.lines[0]).toContain(expectedEmail);
-            expect(contactInfoSection.lines[1]).toBe(expectedLine2);
+            expect(contactInfoSection.lines[0]).toContain(expectedPhone);
-            expect(contactInfoSection.lines[2]).toBe(expectedLine3);
+            expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone);
+        });
+        test('contact info section has expected content with extension', async () => {
+            // Arrange
+            const firstName = 'Jones';
+            const lastName = 'Eddison';
+            const emailAddress = 'myname@gmail.com';
+            const servicePhone = '0001112222';
+            const extension = '12345';
+            const providerCompanyName = 'Some Provider LLC';
+            const initialStore = {
+                order: {
+                    serviceLocation: {
+                        provider: {
+                            companyName: providerCompanyName
+                         }
+                    },
+                    contactInfo: {
+                        firstName,
+                        lastName,
+                        emailAddress,
+                        servicePhone,
+                        extension
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(initialStore);
+            const expectedEmail = emailAddress;
+            const expectedPhone = 'some value returned';
+            toDisplayPhoneNumber.mockImplementation((number) => (number === servicePhone ? expectedPhone : ''));
+            const contactInfoSectionIndex = 1;
+            wrapper.vm.getCmsContent.mockImplementation(() => '{custom:contactPhone} or {custom:contactEmail}');
+
+            // Act
+            await tpaSubmit.beforeRouteEnter.call(
+                wrapper.vm,
+                { query: { issPage: 'tpa-submit' } },
+                undefined,
+                (c) => c(wrapper.vm)
+            );
+            wrapper.vm.setSections();
+
+            // Assert
+            const contactInfoSection = wrapper.vm.sections[contactInfoSectionIndex];
+            expect(contactInfoSection.lines[0]).toContain(expectedEmail);
+            expect(contactInfoSection.lines[0]).toContain(expectedPhone);
+            expect(contactInfoSection.lines[0]).toContain(`Ext. ${extension}`);
             expect(toDisplayPhoneNumber).toHaveBeenCalledWith(servicePhone);
         });
     });
@@ -524,7 +470,6 @@ describe('tpa-submit', () => {
         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) => {

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

@@ -13,53 +13,52 @@
             </div>
             <div class="iss-heritage-container-width">
                 <div class="tpa-submit-container iss-heritage-content-container-width">
-                    <!-- TODO fix styling -->
+                    <alert
+                        ref="alertIncomplete"
+                        alertClass="alert-warning"
+                        :cmsWidgetName="widget.alertIncomplete"
+                    />
                     <textBlock
                         ref="subHeaderTitle"
                         :customText="subHeaderTitle"
-                        justifyText="center"
+                        class="tpa-submit-title"/>
-                        :marginTopSizeOverride="4"
-                        class="text-color--black fs-5 tpa-submit__title--line-height" />
                     <textBlock
                         id="tpaSubmitSubHeaderBodyOne"
                         ref="tpaSubmitSubHeaderBodyOne"
-                        :customText="subHeaderBodyOne"
+                        :customText="subHeaderBodyOne" />
-                        class="small text-color--darker-gray" />
+                    <alert
-                    <textBlock
+                        v-if="recalibrationRequired"
-                        id="tpaSubmitSubHeaderBodyTwo"
+                        ref="alertRecalWarning"
-                        ref="tpaSubmitSubHeaderBodyTwo"
+                        alertClass="alert-warning recal-alert"
-                        :customText="subHeaderBodyTwo"
+                        :isCollapsible="true"
-                        class="mb-4 small text-color--darker-gray" />
+                        :cmsWidgetName="widget.alertRecalWarning"
-                    <buttonMain
+                        @textLinkClicked="openRecalModal" />
-                        ref="buttonMainOne"
+                    <modal
-                        variant="success"
+                        ref="recalModal"
-                        :buttonText="forwardButtonText"
+                        class="recal-modal"
-                        class="w-100 mb-5"
+                        :modalPosition="modalPositions.center"
-                        @clickEvent="forwardButtonAction" />
+                        :headerText="recalModalContent.headerText"
-                    <hr class="mb-0" />
+                        :footerButtonText="recalModalContent.footerButtonText"
+                        @footerButtonEvent="closeRecalModal">
+                        <div class="recal-modal-subheader">{{ recalModalContent.subHeaderText }}</div>
+                        <img class="recal-modal-image" :src="recalModalContent.image" />
+                        <div class="recal-modal-body" v-html="recalModalContent.bodyText"></div>
+                    </modal>
+                    <hr />
                     <div id="serviceSummarySection">
-                        <textBlock
-                            id="tpaSubmitServiceSummaryTitle"
-                            ref="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
+                            <hr v-if="index !== 0" />
-                                    v-if="index !== 0"
-                                    class="my-3" />
                             <reviewBlock
                                 :id="'review-block-' + index"
                                 :customHeaderText="section.title"
                                 :lines="section.lines"
+                                :editLinkText="section.editLinkText"
                                 @clickEdit="() => section.onClickEdit()" />
                         </div>
                     </div>
-                    </div>
+                    <hr />
-                    <hr class="mb-0" />
                     <div
                         id="submitOrderDetailsSection"
                         ref="submitOrderDetailsSection">
@@ -67,17 +66,10 @@
                             id="tpaSubmitOrderDetailsTitle"
                             ref="tpaSubmitOrderDetailsTitle"
                             :customText="orderDetailsTitle"
-                            :marginTopSizeOverride="4"
+                            :marginTopSizeOverride="0"
-                            class="fw-bold text-color--black" />
+                            class="fw-bold order-details-title" />
-                        <textBlock
-                            id="tpaSubmitOrderDetailsBody"
-                            ref="tpaSubmitOrderDetailsBody"
-                            :customText="orderDetailsBody"
-                            :marginTopSizeOverride="4"
-                            class="mb-4 px-4 small text-color--darker-gray" />
                         <deductibleBox
                             ref="deductibleBox"
-                            class="px-3"
                             :value="deductibleBoxValue" />
                     </div>
                     <siteFooter
@@ -104,6 +96,8 @@ import reviewBlock from '@/layouts/tpa-submit/review-block/review-block.vue';
 import deductibleBox from '@/layouts/tpa-submit/deductible-box/deductible-box.vue';
 import contactDetailsDrawer from '@/layouts/tpa-submit/contact-details-drawer/contact-details-drawer.vue';
 import siteFooter from '@/iss-components/site-footer/site-footer.vue';
+import alert from '@/ux-components/alert/alert.vue';
+import modal from '@/digital-components/modal/modal.vue';
 
 // Supporting files
 import {
@@ -114,21 +108,16 @@ import {
 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';
-import {
-    getDamageDisplayContent,
-    getLocationAnswer
-} from '@/helpers/damage-review-content-generator.js';
-import damageLocationsSelected from '@/constants/damage-locations-selected.js';
 import { submitWorkOrder } from '@/helpers/order-helper.js';
 import bailoutMessage from '@/constants/bailoutMessage';
 import submitType from '@/constants/submit-type';
+import { modalPositions } from '@/constants/component-variants';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -143,7 +132,9 @@ export default {
         siteFooter,
         contactDetailsDrawer,
         // eslint-disable-next-line vue/no-reserved-component-names
-        Form
+        Form,
+        alert,
+        modal
     },
     mixins: [BaseFormMixin],
     async beforeRouteEnter(to, from, next) {
@@ -154,27 +145,19 @@ export default {
         });
     },
     data() {
-        const { companyName } = useMainStore().order.serviceLocation.provider;
         return {
             sections: [],
             widget: {
                 siteHeader: 'SiteHeaderWidget',
                 siteSubHeader: 'SiteSubHeaderWidget',
-                serviceSummary: 'ServiceSummaryContent',
-                subheader: {
-                    vehicle: 'VehicleSubTitle',
-                    damage: 'DamageSubTitle',
-                    shop: 'PreferredShopSubTitle',
-                    contactInfo: 'ContactDetailsSubTitle'
-                },
-                damageLocations: 'DamageLocationsWidget',
                 orderDetails: 'OrderDetailsContent',
-                footer: 'SiteFooterWidget'
+                footer: 'SiteFooterWidget',
+                alertIncomplete: 'AlertIncompleteWidget',
+                alertRecalWarning: 'AlertRecalWarningWidget',
+                editShopLinkText: 'EditShopLinkTextWidget',
+                 contactDetails: 'ContactDetailsSectionWidget'
             },
-            companyName,
+            modalPositions
-            customValueMap: {
-                glassShop: companyName
-            }
         };
     },
     computed: {
@@ -197,12 +180,6 @@ export default {
             );
             return getStringWithCustomValues(cmsContent, this.customValueMap);
         },
-        serviceSummaryText() {
-            return this.getCmsContent(
-                this.widget.serviceSummary,
-                widgetFields.TEXT_BLOCK_WIDGET.TEXT
-            );
-        },
         orderDetailsTitle() {
             return this.getCmsContent(
                 this.widget.orderDetails,
@@ -227,53 +204,21 @@ export default {
             );
         },
         isVerified() {
-            return useMainStore().isVerified;
+            return this.mainStore.isVerified;
         },
         currentDeductible() {
-            return useMainStore().order.currentDeductible;
+            return this.mainStore.order.currentDeductible;
         },
         deductibleBoxValue() {
             return this.isVerified
                 ? formatAmountInDollars(this.currentDeductible)
                 : VERIFYING_COVERAGE;
         },
-        getVehicleLines() {
+        getPreferredShopTitle() {
-            const { year, make, model } = useMainStore().order.vehicle;
+            return toTitleCase(this.mainStore.order.serviceLocation.provider.companyName ?? '');
-            const line = [year, make, model]
-                .filter((v) => v != null && v !== '')
-                .join(' ');
-            return [line];
-        },
-        locationAnswers() {
-            return this.getInputQuestionWidgetAnswersNullSafe(this.widget.damageLocations);
-        },
-        driverSideDamageAnswers() {
-            const answerContent = getLocationAnswer(
-                damageLocationsSelected.DRIVER,
-                this.locationAnswers
-            );
-            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
-        },
-        passengerSideDamageAnswers() {
-            const answerContent = getLocationAnswer(
-                damageLocationsSelected.PASSENGER,
-                this.locationAnswers
-            );
-            return this.getInputQuestionWidgetAnswersNullSafe(answerContent?.SubWidgetName);
-        },
-        getDamageLines() {
-            const { glassToReplace, isRepair } = useMainStore().order.damage;
-            return getDamageDisplayContent(
-                this.locationAnswers,
-                this.driverSideDamageAnswers,
-                this.passengerSideDamageAnswers,
-                glassToReplace,
-                isRepair
-            );
         },
         getPreferredShopLines() {
-            const { phoneNumber, address } =
+            const { phoneNumber, address } = this.mainStore.order.serviceLocation.provider;
-                useMainStore().order.serviceLocation.provider;
             const { streetAddress, city, state, zipCode } = address;
             const displayAddress = formatAddress(
                 streetAddress,
@@ -284,58 +229,86 @@ export default {
             );
             const displayPhoneNumber = toDisplayPhoneNumber(phoneNumber);
             return [
-                toTitleCase(this.companyName ?? ''),
                 displayAddress,
                 displayPhoneNumber
             ];
         },
+        getEditShopLinkText() {
+            return this.getCmsContent(
+                this.widget.editShopLinkText,
+                widgetFields.TEXT_BLOCK_WIDGET.TEXT
+            );
+        },
+        getContactInfoTitle() {
+            const cmsContent = this.getCmsContent(
+                this.widget.contactDetails,
+                widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
+            );
+            return getStringWithCustomValues(cmsContent, this.customValueMap);
+        },
         getContactInfoLines() {
-            const { firstName, lastName, emailAddress, servicePhone } =
+            const cmsContent = this.getCmsContent(
-                useMainStore().contactInfo;
+                this.widget.contactDetails,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
+            );
             return [
-                `${firstName} ${lastName}`,
+                getStringWithCustomValues(cmsContent, this.customValueMap)
-                emailAddress ?? '',
-                toDisplayPhoneNumber(servicePhone)
             ];
+        },
+        getEditContactInfoLinkText() {
+            return this.getCmsContent(
+                this.widget.contactDetails,
+                widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT
+            );
+        },
+        recalModalContent() {
+            const widgetName = 'RecalModal';
+            return {
+                headerText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT),
+                subHeaderText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT),
+                bodyText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT),
+                footerButtonText: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT),
+                image: this.getCmsContent(widgetName, widgetFields.CONTENT_GROUP_WIDGET.IMAGE)
+            }
+        },
+        recalibrationRequired() {
+            return this.mainStore.hasRecalibrationPart;
+        },
+        customValueMap() {
+            let contactPhone = toDisplayPhoneNumber(this.mainStore.contactInfo.servicePhone);
+            if (this.mainStore.contactInfo.extension) {
+                contactPhone += ` Ext. ${this.mainStore.contactInfo.extension}`;
+            }
+            return {
+                glassShop: this.getPreferredShopTitle,
+                contactPhone: contactPhone,
+                contactEmail: this.mainStore.contactInfo.emailAddress ?? ''
+            }
         }
     },
     methods: {
         setSections() {
-            const vehicleScenario = useMainStore().isPolicyVehicle
-                ? this.navigationScenarios.EDIT_POLICY_VEHICLE
-                : this.navigationScenarios.EDIT_VEHICLE;
             this.sections = [
                 this.getSection(
-                    this.widget.subheader.vehicle,
+                    this.getPreferredShopTitle,
-                    this.getVehicleLines,
-                    () => this.navigate(vehicleScenario)
-                ),
-                // eslint-disable-next-line max-len
-                this.getSection(
-                    this.widget.subheader.damage,
-                    this.getDamageLines,
-                    () => this.navigate(this.navigationScenarios.EDIT_DAMAGE)
-                ),
-                this.getSection(
-                    this.widget.subheader.shop,
                     this.getPreferredShopLines,
-                    () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
+                    this.getEditShopLinkText,
+                    () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP),
                 ),
                 // eslint-disable-next-line max-len
                 this.getSection(
-                    this.widget.subheader.contactInfo,
+                    this.getContactInfoTitle,
                     this.getContactInfoLines,
+                    this.getEditContactInfoLinkText,
                     this.openContactDetailsModal
                 )
             ];
         },
-        getSection(widgetName, lines, onClick) {
+        getSection(title, lines, editLinkText, onClick) {
             return {
-                title: this.getCmsContent(
+                title: title,
-                    widgetName,
-                    widgetFields.TEXT_BLOCK_WIDGET.TEXT
-                ),
                 lines,
+                editLinkText,
                 onClickEdit: onClick
             };
         },
@@ -344,7 +317,7 @@ export default {
                 await submitWorkOrder({ submitType: submitType.TPA }).then(() => {
                     this.navigate(this.navigationScenarios.CLICKED_FORWARD);
                 }).catch((submitError) => {
-                    useMainStore().setBailout(bailoutMessage.saveSessionError(submitError.data));
+                    this.mainStore.setBailout(bailoutMessage.saveSessionError(submitError.data));
                     this.navigate(
                         this.navigationScenarios.SAVE_SESSION_FAILED,
                         this.$route,
@@ -372,6 +345,12 @@ export default {
         },
         openContactDetailsModal() {
             this.$refs.contactDetailsDrawer.openModal();
+        },
+        openRecalModal() {
+            this.$refs.recalModal.openModal();
+        },
+        closeRecalModal() {
+            this.$refs.recalModal.closeModal();
         }
     }
 };
@@ -387,26 +366,69 @@ export default {
 }
 
 .tpa-submit {
-    #tpaSubmitOrderDetailsBody {
+    .alert-warning {
-        p {
+        margin-top: 1.25rem;
-            font-size: .875rem;
+        margin-bottom: 0rem;
-        }
-    }
-    .tpa-submit__title--line-height {
-        line-height: map-get($spacers, 6);
     }
 
-    .text-color--darker-gray {
+    .tpa-submit-title {
-        color: $darker-gray;
+        font-size: 1.25rem;
+        color: $black;
+        font-weight: 400;
+        margin-top: 1.25rem;
+        margin-bottom: .625rem;
     }
 
-    .text-color--black {
+    .recal-alert {
+        margin-bottom: 4rem;
+    }
+
+    b {
+        font-weight: $font-weight-bold;
         color: $black;
     }
 
     hr {
-        opacity: 1;
+        margin: 1.875rem 0rem;
-        color: $gray-350;
+    }
+
+    .fw-bold {
+        color: $black;
+    }
+
+    .order-details-title {
+        margin-bottom: .625rem;
+    }
+
+    .modal.recal-modal .modal-dialog {
+        .modal-header {
+            justify-content: start;
+            margin: 0rem;
+            padding: 1.25rem 1.25rem .625rem 1.25rem;
+            .modal-title {
+                font-weight: $font-weight-bolder;
+                font-size: .875rem;
+                line-height: 1.25rem;
+                text-align: start;
+                justify-content: start;
+            }
+            .btn-close {
+                display: none;
+            }
+        }
+        .modal-body {
+            padding: 0rem 1.25rem 1.25rem 1.25rem;
+            b {
+                font-weight: 600;
+            }
+        }
+        .recal-modal-subheader {
+            font-weight: $font-weight-bold;
+            color: $black;
+        }
+        .recal-modal-image {
+            margin: 1.25rem 0rem
+        }
     }
 }
 </style>

src/store/index.js

@@ -197,6 +197,7 @@ export const getDefaultState = () => ({
             homePhone: null,
             alternativePhone: null,
             servicePhone: null,
+            extension: null,
             requestTextUpdates: false,
             notesForTechnician: ''
         },
@@ -354,6 +355,7 @@ export const useMainStore = defineStore({
             homePhone: s.order.contactInfo.homePhone,
             alternativePhone: s.order.contactInfo.alternativePhone,
             servicePhone: s.order.contactInfo.servicePhone,
+            extension: s.order.contactInfo.extension,
             requestTextUpdates: s.order.contactInfo.requestTextUpdates ?? false,
             notesForTechnician: s.order.contactInfo.notesForTechnician
         }),
@@ -1455,7 +1457,7 @@ export const useMainStore = defineStore({
                     emailAddress: contactInfo.emailAddress || customer.emailAddress,
                     firstName: contactInfo.firstName || customer.firstName,
                     lastName: contactInfo.lastName || customer.lastName,
-                    homePhone: contactInfo.homePhone,
+                    homePhone: contactInfo.extension && contactInfo.homePhone ? contactInfo.homePhone + contactInfo.extension : contactInfo.homePhone,
                     servicePhone: contactInfo.servicePhone,
                     alternativePhone: contactInfo.alternativePhone,
                     isSmsOptIn: contactInfo.requestTextUpdates ?? false
@@ -1589,7 +1591,8 @@ export const useMainStore = defineStore({
                 order.contactInfo.firstName = data?.customer?.firstName;
                 order.contactInfo.lastName = data?.customer?.lastName;
                 order.contactInfo.emailAddress = data?.customer?.emailAddress;
-                order.contactInfo.homePhone = data?.customer?.homePhone;
+                order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
+                order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
                 order.contactInfo.servicePhone = data?.customer?.servicePhone;
                 order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
                 order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
@@ -1657,7 +1660,8 @@ export const useMainStore = defineStore({
                 order.contactInfo.firstName = data?.customer?.firstName;
                 order.contactInfo.lastName = data?.customer?.lastName;
                 order.contactInfo.emailAddress = data?.customer?.emailAddress;
-                order.contactInfo.homePhone = data?.customer?.homePhone;
+                order.contactInfo.extension = data?.customer?.homePhone?.slice(10);
+                order.contactInfo.homePhone = data?.customer?.homePhone?.slice(0, 10);
                 order.contactInfo.servicePhone = data?.customer?.servicePhone;
                 order.contactInfo.alternativePhone = data?.customer?.alternativePhone;
                 order.contactInfo.requestTextUpdates = data?.customer?.isSmsOptIn;
@@ -2095,6 +2099,7 @@ export const useMainStore = defineStore({
             this.order.contactInfo.homePhone = null;
             this.order.contactInfo.alternativePhone = null;
             this.order.contactInfo.servicePhone = null;
+            this.order.contactInfo.extension = null;
             this.order.contactInfo.requestTextUpdates = false;
             this.order.contactInfo.notesForTechnician = '';
         },
@@ -2576,6 +2581,7 @@ export const useMainStore = defineStore({
             contact.homePhone = phoneNumbers.home !== undefined ? phoneNumbers.home : contact.homePhone;
             contact.alternativePhone = phoneNumbers.alternative !== undefined ? phoneNumbers.alternative : contact.alternativePhone;
             contact.servicePhone = phoneNumbers.service !== undefined ? phoneNumbers.service : contact.servicePhone;
+            contact.extension = phoneNumbers.extension !== undefined ? phoneNumbers.extension : contact.extension;
         },
 
         GetExperimentsByUser(userId) {

src/store/store.spec.js

@@ -494,18 +494,21 @@ describe('Store', () => {
             const homePhone = getRandomInt(1000000000, 9999999999);
             const servicePhone = getRandomInt(1000000000, 9999999999);
             const altPhone = getRandomInt(1000000000, 9999999999);
+            const extension = getRandomInt(10000, 99999);
 
             // Act
             store.updatePhoneNumbers({
                 home: homePhone,
                 service: servicePhone,
-                alternative: altPhone
+                alternative: altPhone,
+                extension: extension
             });
 
             // Assert
             expect(store.contactInfo.homePhone).toEqual(homePhone);
             expect(store.contactInfo.servicePhone).toEqual(servicePhone);
             expect(store.contactInfo.alternativePhone).toEqual(altPhone);
+            expect(store.contactInfo.extension).toEqual(extension);
         });
         it('All null values => contact info set in store to all nulls', () => {
             // Act

src/ux-components/alert/alert.vue

@@ -226,6 +226,7 @@ export default {
         padding: 0rem .625rem;
     }
     .btn-collapse {
+        display: flex;
         border: none;
         background: none;
         min-width: 1rem;
@@ -242,7 +243,7 @@ export default {
         }
     }
     a {
-        text-decoration: none;
+        font-weight: $font-weight-normal;
     }
     border-color: transparent;
     .btn-close {