Merge pull request #1014 from Safelite/feature/kiener/INSR-7753

INSR-7753: Coverage Statement page

src/constants/bailoutMessage.js

@@ -66,9 +66,9 @@ const bailoutMessage = Object.freeze({
         message: 'User selected to continue a referral where a TPA shop was previously selected.'
     }),
     vehicleYMMSLookupError: (year, make, model, style, error) => {
-        const baseMessage = "An error occurred looking up vehicle";
+        const baseMessage = 'An error occurred looking up vehicle';
         const errorMessage = `Error: ${getItemData(error)}`;
-    
+
         const getMessage = (year, make, model, style) => {
             if (!year) return `${baseMessage} years. ${errorMessage}`;
             if (!make) return `${baseMessage} makes for Year: ${year}. ${errorMessage}`;
@@ -76,12 +76,12 @@ const bailoutMessage = Object.freeze({
             if (!style) return `${baseMessage} styles for Year: ${year}, Make: ${make}, Model: ${model}. ${errorMessage}`;
             return `${baseMessage} with Year: ${year}, Make: ${make}, Model: ${model}, Style: ${style}. ${errorMessage}`;
         };
-    
+
         return {
             code: bailoutCode.VehicleYMMSLookupError,
             message: getMessage(year, make, model, style)
         };
-    },
+    }
 });
 
 export default bailoutMessage;

src/helpers/cart-helper.js

@@ -76,7 +76,7 @@ export function getMobileFeeLineItem(order) {
  * @returns {number|undefined|null} current deductible
  */
 export function getDeductible(order) {
-    return order.currentDeductible;
+    return order.damage.isRepair ? order.currentDeductible.repair : order.currentDeductible.replace;
 }
 
 /**

src/helpers/cart-helper.spec.js

@@ -239,8 +239,13 @@ describe('cart-helper', () => {
     describe('getDeductible', () => {
         test('Returns deductible on the order', () => {
             // Arrange
-            const deductible = 100;
+            const deductible = {
+                replace: 100
+            };
             const order = {
+                damage: {
+                    isRepair: false
+                },
                 currentDeductible: deductible
             };
 
@@ -249,7 +254,7 @@ describe('cart-helper', () => {
 
             // Assert
             expect(result).not.toBeNull();
-            expect(result).toBe(deductible);
+            expect(result).toBe(deductible.replace);
         });
     });
 
@@ -349,7 +354,12 @@ describe('cart-helper', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: type
                     },
-                    currentDeductible: 100,
+                    damage: {
+                        isRepair: false
+                    },
+                    currentDeductible: {
+                        replace: 100
+                    },
                     lineItems: nullLineItems
                 };
 
@@ -373,7 +383,12 @@ describe('cart-helper', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: type
                     },
-                    currentDeductible: 100,
+                    damage: {
+                        isRepair: false
+                    },
+                    currentDeductible: {
+                        replace: 100
+                    },
                     lineItems: emptyLineItems
                 };
 
@@ -397,7 +412,12 @@ describe('cart-helper', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: type
                     },
-                    currentDeductible: 100,
+                    damage: {
+                        isRepair: false
+                    },
+                    currentDeductible: {
+                        replace: 100
+                    },
                     lineItems: defaultLineItems
                 };
 
@@ -495,7 +515,12 @@ describe('cart-helper', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: type
                     },
-                    currentDeductible: 100,
+                    damage: {
+                        isRepair: false
+                    },
+                    currentDeductible: {
+                        replace: 100
+                    },
                     lineItems: nullLineItems
                 };
 
@@ -520,7 +545,12 @@ describe('cart-helper', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: type
                     },
-                    currentDeductible: 100,
+                    damage: {
+                        isRepair: false
+                    },
+                    currentDeductible: {
+                        replace: 100
+                    },
                     lineItems: emptyLineItems
                 };
 
@@ -545,7 +575,12 @@ describe('cart-helper', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: type
                     },
-                    currentDeductible: 100,
+                    damage: {
+                        isRepair: false
+                    },
+                    currentDeductible: {
+                        replace: 100
+                    },
                     lineItems: defaultLineItems
                 };
 

src/helpers/text-helper.js

@@ -27,6 +27,17 @@ export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) {
     return `<ol>${stringOfParagraphs.replaceAll('<p></p>', '').replaceAll('<p>', '<li>').replaceAll('</p>', '</li>')}</ol>`;
 }
 
+/**
+ * @function createUnorderedListFromStringOfParagraphs
+ * @summary
+ *  Returns string with <p> tags changed to <li> and wrapped in an <ul>
+ * @param {string} stringOfParagraphs single string with 1 to N <p> tags
+ * @returns {string} converted string wrapped in an <ul>
+ */
+export function createUnorderedListFromStringOfParagraphs(stringOfParagraphs) {
+    return `<ul>${stringOfParagraphs.replaceAll('<p></p>', '').replaceAll('<p>', '<li>').replaceAll('</p>', '</li>')}</ul>`;
+}
+
 /**
  * @function toTitleCase
  * @summary Returns title cased string version of 'text'

src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap

@@ -2,23 +2,13 @@
 
 exports[`coverageStatement.vue returns the initial data 1`] = `
 Object {
-  "CANCEL_CLAIM_REF_NAME": "CancelClaimModal",
-  "DEDUCTIBLE_MODAL_REF_NAME": "DeductibleModal",
   "RECAL_MODAL_REF_NAME": "RecalModal",
-  "SITE_FOOTER_REF_NAME": "siteFooter",
   "baseServiceLineItems": Array [],
-  "deductibleText": "Your deductible is",
-  "rules": Object {
-    "selectionRequired": "option-required",
-  },
-  "selectedProvider": "",
   "widget": Object {
     "disclaimerText": "DisclaimerWidget",
     "explanatoryText": "ExplanatoryTextWidget",
     "nextStep": "NextStepsWidget",
-    "serviceProviderQuestion": "ServiceProviderQuestion",
     "subheader": "SiteSubHeaderWidget",
-    "verifiedItacAlert": "VerifiedITACAlert",
   },
 }
 `;

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -29,6 +29,7 @@ jest.mock('@/helpers/cms-content-helper', () => ({
 
 jest.mock('@/helpers/text-helper', () => ({
     createOrderedListFromStringOfParagraphs: jest.fn(),
+    createUnorderedListFromStringOfParagraphs: jest.fn(),
     formatAmountInDollars: jest.fn()
 }));
 
@@ -98,9 +99,6 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRu
     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
 
     const wrapper = shallowMount(coverageStatement, mountOptions);
-    wrapper.vm.$refs[CANCEL_CLAIM_REF_NAME].openModal = jest.fn();
-    wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
-    wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
     return { wrapper };
 }
 
@@ -165,16 +163,6 @@ describe('coverageStatement.vue', () => {
             // Assert
             expect(secondaryText.exists()).toBe(true);
         });
-        test('Should render site footer', () => {
-            // Arrange
-            const { wrapper } = getMountedComponent({});
-
-            // Act
-            const footer = wrapper.findComponent({ ref: 'siteFooter' });
-
-            // Assert
-            expect(footer.exists()).toBe(true);
-        });
     });
     describe('Computed', () => {
         describe.each([
@@ -373,7 +361,7 @@ describe('coverageStatement.vue', () => {
                 [false, coverageStatuses.PENDING, coverageType.NO_COMP],
                 [false, coverageStatuses.PENDING, coverageType.Deductible],
                 [true, coverageStatuses.VERIFIED, coverageType.NO_COMP],
-                [true, coverageStatuses.VERIFIED, coverageType.ITAC],
+                [false, coverageStatuses.VERIFIED, coverageType.ITAC],
                 [false, coverageStatuses.VERIFIED, coverageType.Deductible],
                 [false, coverageStatuses.NO_COVERAGE, coverageType.NO_COMP],
                 [false, coverageStatuses.NO_COVERAGE, coverageType.ITAC],
@@ -512,7 +500,10 @@ describe('coverageStatement.vue', () => {
                             coverageStatus: coverageStatuses.PENDING,
                             coverageType: coverageType.NONE
                         },
-                        currentDeductible: null
+                        currentDeductible: {
+                            repair: null,
+                            replace: null
+                        }
                     }
                 };
                 const { wrapper } = getMountedComponent(mainInitialState);
@@ -539,7 +530,9 @@ describe('coverageStatement.vue', () => {
                             coverageStatus: coverageStatuses.VERIFIED,
                             coverageType: coverageType.Deductible
                         },
-                        currentDeductible: deductible
+                        currentDeductible: {
+                            replace: deductible
+                        }
                     }
                 };
                 const { wrapper } = getMountedComponent(mainInitialState);
@@ -566,7 +559,9 @@ describe('coverageStatement.vue', () => {
                             coverageStatus: coverageStatuses.VERIFIED,
                             coverageType: coverageType.ITAC
                         },
-                        currentDeductible: deductible
+                        currentDeductible: {
+                            replace: deductible
+                        }
                     }
                 };
                 const { wrapper } = getMountedComponent(mainInitialState);
@@ -584,7 +579,7 @@ describe('coverageStatement.vue', () => {
                         undefined
                     );
             });
-            test('If Verified ITAC, selected other shop, navigate forward w/ CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP', () => {
+            test('If Verified ITAC, selected Cancel, navigate forward w/ CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP', () => {
                 // Arrange
                 const deductible = servicePrice + 1;
                 const mainInitialState = {
@@ -596,7 +591,9 @@ describe('coverageStatement.vue', () => {
                             coverageStatus: coverageStatuses.VERIFIED,
                             coverageType: coverageType.ITAC
                         },
-                        currentDeductible: deductible
+                        currentDeductible: {
+                            replace: deductible
+                        }
                     }
                 };
                 const { wrapper } = getMountedComponent(mainInitialState);
@@ -605,7 +602,7 @@ describe('coverageStatement.vue', () => {
                 });
 
                 // Act
-                wrapper.vm.navigateForward();
+                wrapper.vm.cancelClaim();
 
                 // Assert
                 expect(wrapper.vm.$router.navigate)
@@ -667,7 +664,7 @@ describe('coverageStatement.vue', () => {
                 });
 
                 // Act
-                wrapper.vm.navigateForward();
+                wrapper.vm.cancelClaim();
 
                 // Assert
                 expect(wrapper.vm.$router.navigate)
@@ -776,7 +773,9 @@ describe('coverageStatement.vue', () => {
                     vehicle: {
                         policyVehicleId: 1
                     },
-                    currentDeductible: deductible
+                    currentDeductible: {
+                        replace: deductible
+                    }
                 },
                 issConfig: {
                     isClaimRegistrationRequired: true

src/layouts/coverage-statement/coverage-statement.vue

@@ -15,72 +15,87 @@
                 <div class="coverage-statement-container iss-heritage-content-container-width">
                     <h5
                         ref="siteSubHeader"
-                        class="sub-header text-black mt-4"
+                        class="sub-header text-black"
                         v-html="coverageStatementSubHeader"></h5>
                     <div
                         ref="explanatoryText"
-                        class="body-text mt-2"
+                        class="body-text"
                         v-html="explanatoryText"></div>
+                    <div
+                        ref="explanatoryText2"
+                        class="body-text mt-3"
+                        v-html="explanatoryText2"></div>
                     <div
                         ref="secondaryText"
                         class="mt-4 mb-1 fw-bold text-black"
                         v-html="secondaryText"></div>
                     <div
-                        v-if="isDeductibleVisible"
+                        v-if="isITACQuoteVisible"
-                        class="d-flex justify-content-center cost">
+                        class="itac-price-container">
+                        <div class="itac-deductible-value-container">
+                            <div class="itac-deductible-value-text">
+                                Your deductible:
+                            </div>
+                            <div class="itac-deductible-value">
+                                {{ formatAmountInDollars(deductibleValue) }}
+                            </div>
+                        </div>
+                        <div class="separator"></div>
+                        <div class="itac-cost-container">
+                            <div class="itac-cost-text">
+                                Safelite price*:
+                            </div>
+                            <div class="cost">
+                            {{ formatAmountInDollars(totalServicePrice) }}
+                            </div>
+                        </div>
+                    </div>
+                    <div
+                        v-if="showDeductibleOnly"
+                        class="d-flex cost cost-underline">
                         {{ formatAmountInDollars(deductibleValue) }}
                     </div>
                     <div
-                        v-if="isQuoteDisplayed"
+                        class="fw-bold text-black mt-5"
-                        class="d-flex justify-content-center cost mb-0">
-                        {{ formatAmountInDollars(totalServicePrice) }}
-                    </div>
-                    <div
-                        v-if="isITACQuoteVisible"
-                        class="d-flex justify-content-center mb-4 deductible-text">
-                        {{ deductibleText }}&nbsp;
-                        <span class="text-success fw-bold">{{
-                            formatAmountInDollars(deductibleValue)
-                        }}</span>
-                    </div>
-                    <alert
-                        v-if="isITACQuoteVisible"
-                        ref="verifiedITACAlert"
-                        class="mb-5"
-                        cmsWidgetName="VerifiedITACAlert"
-                        :manualHeadline="verifiedItacAlertHeader"
-                        :manualCopy="verifiedItacAlertBody"
-                        alertClass="alert-success"
-                        :isDismissible="false">
-                    </alert>
-                    <div
-                        class="fw-bold text-black mt-5 mb-2"
                         v-html="nextStepsHeader"></div>
                     <div
                         class="body-text"
                         v-html="nextStepsBody"></div>
-                    <buttonQuestion
+                    <div
+                        v-if="isNoCompQuoteVisible"
+                        class="no-comp-price-text">
+                        Safelite price*:
+                    </div>
+                    <div
                         v-if="isQuoteDisplayed"
-                        v-model="selectedProvider"
+                        class="d-flex justify-content-center cost mb-0 cost-underline">
-                        cmsWidgetName="ServiceProviderQuestion"
+                        {{ formatAmountInDollars(totalServicePrice) }}
-                        :questionText="serviceProviderQuestionText"
+                    </div>
-                        :answers="serviceProviderQuestionAnswers"
+                    <buttonMain
-                        groupName="ServiceProviderQuestionOption"
+                        ref="buttonMain"
-                        buttonTypeString="listButton"
+                        class="full-width-button mt-5 mb-5"
-                        isRequired
+                        variant="navigation"
-                        :validationRules="rules.selectionRequired">
+                        :buttonText="buttonText"
-                    </buttonQuestion>
+                        @clickEvent="navigateForward" />
-                    <siteFooter
+                    <textLink
-                        :ref="SITE_FOOTER_REF_NAME"
+                        v-if="isNoCompQuoteVisible || isITACQuoteVisible"
-                        class="mt-5"
+                        class="underlined-text cancel-link mt-5"
-                        cmsWidgetName="SiteFooterWidget"
+                        linkType="text"
-                        :isForwardActionDisabled="!meta.valid"
+                        text="No, I want to cancel"
-                        @backClicked="navigateBackByVehicleQuestions"
+                        href="#"
-                        @forwardClicked="navigateForward" />
+                        @clickEvent="cancelClaim" />
                     <textBlock
-                        v-if="isQuoteDisplayed"
+                        v-if="isDisclaimerVisible"
+                        class="mt-5 mb-5"
                         :customText="disclaimerText"
                         typeStyle="caption" />
+                    <div :class="getVariant + ' mb-5'">
+                        <textLink
+                            linkType="navigation"
+                            text="Back"
+                            href="#"
+                            @clickEvent="navigateBackByVehicleQuestions" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -88,28 +103,17 @@
             :ref="RECAL_MODAL_REF_NAME"
             cssModalHeadlineClass="text-center"
             cmsWidgetName="RecalModal" />
-        <contentGroupModal
-            :ref="DEDUCTIBLE_MODAL_REF_NAME"
-            cmsWidgetName="DeductibleModal"
-            class="deductible-modal" />
-        <cancelClaimModal
-            :ref="CANCEL_CLAIM_REF_NAME"
-            @cancelClaimConfirmation="cancelClaim"
-            @returnToClaim="continueClaim" />
     </Form>
 </template>
 
 <script>
 // Import Component
 import { Form } from 'vee-validate';
-import siteFooter from '@/iss-components/site-footer/site-footer.vue';
 import siteHeader from '@/iss-components/site-header/site-header.vue';
-import alert from '@/ux-components/alert/alert.vue';
-import cancelClaimModal from '@/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue';
 import contentGroupModal from '@/iss-components/content-group-modal/content-group-modal.vue';
-import buttonQuestion from '@/digital-components/button-question/button-question.vue';
 import textBlock from '@/digital-components/text-block/text-block.vue';
-
+import textLink from '@/ux-components/text-link/text-link.vue';
+import buttonMain from '@/ux-components/button-main/button-main.vue';
 // Import Supporting Files
 import {
     fetchCmsContentForPage,
@@ -121,35 +125,28 @@ import settleAllPromises from '@/helpers/layout-helper.js';
 import { getDamageString } from '@/helpers/damage-helper.js';
 import { useMainStore } from '@/store/index.js';
 import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
-import globalRules from '@/constants/global-rules.js';
 import baseFormMixin from '@/mixins/base-form-mixin.js';
 import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
 import bailoutMessage from '@/constants/bailoutMessage';
 import widgetFields from '@/constants/cms-widget-fields.js';
-import { formatAmountInDollars, createOrderedListFromStringOfParagraphs } from '@/helpers/text-helper.js';
+import { formatAmountInDollars, createUnorderedListFromStringOfParagraphs, createOrderedListFromStringOfParagraphs } from '@/helpers/text-helper.js';
 import showIssLoadingModal from '@/helpers/loading-modal-helper';
 import { getPriceOfLineItems } from '@/helpers/price-calculator';
 import coverageStatuses from '@/constants/coverage-statuses';
 import coverageType from '@/constants/coverage-type';
 
-const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal';
-const SAFELITE_PROVIDER = 'Safelite';
 const RECAL_MODAL_REF_NAME = 'RecalModal';
-const DEDUCTIBLE_MODAL_REF_NAME = 'DeductibleModal';
-const SITE_FOOTER_REF_NAME = 'siteFooter';
 
 export default {
     name: 'coverage-statement',
     components: {
-        siteFooter,
         siteHeader,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert,
-        cancelClaimModal,
         contentGroupModal,
-        buttonQuestion,
+        buttonMain,
-        textBlock
+        textBlock,
+        textLink
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
     async beforeRouteEnter(to, from, next) {
@@ -204,24 +201,13 @@ export default {
     data() {
         return {
             baseServiceLineItems: [],
-            selectedProvider: '',
-            deductibleText: 'Your deductible is',
-            // TODO update when design team gives appropriate text
-            rules: {
-                selectionRequired: globalRules.OPTION_REQUIRED
-            },
             widget: {
                 disclaimerText: 'DisclaimerWidget',
                 subheader: 'SiteSubHeaderWidget',
-                verifiedItacAlert: 'VerifiedITACAlert',
                 explanatoryText: 'ExplanatoryTextWidget',
-                nextStep: 'NextStepsWidget',
+                nextStep: 'NextStepsWidget'
-                serviceProviderQuestion: 'ServiceProviderQuestion'
             },
-            CANCEL_CLAIM_REF_NAME,
+            RECAL_MODAL_REF_NAME
-            RECAL_MODAL_REF_NAME,
-            DEDUCTIBLE_MODAL_REF_NAME,
-            SITE_FOOTER_REF_NAME
         };
     },
     computed: {
@@ -231,27 +217,15 @@ export default {
                 widgetFields.SUB_HEADER_WIDGET.SUB_HEADER_TEXT
             );
         },
-        verifiedItacAlertHeader() {
+        secondaryText() {
-            return this.getCmsContent(
-                this.widget.verifiedItacAlert,
-                widgetFields.ALERT_WIDGET.HEADLINE_TEXT
-            );
-        },
-        verifiedItacAlertBody() {
             const itacCostSavings =
                 this.deductibleValue - this.totalServicePrice;
-            return this.getCmsContent(
-                this.widget.verifiedItacAlert,
-                widgetFields.ALERT_WIDGET.BODY_TEXT
-            )?.replaceAll(
-                '{custom:costSavings}',
-                formatAmountInDollars(itacCostSavings)
-            );
-        },
-        secondaryText() {
             return this.getTextFromCmsWithCustomIfStatements(
                 this.widget.subheader,
                 widgetFields.SUB_HEADER_WIDGET.SECONDARY_TEXT
+            )?.replaceAll(
+                '{custom:costSavings}',
+                formatAmountInDollars(itacCostSavings)
             );
         },
         disclaimerText() {
@@ -266,6 +240,12 @@ export default {
                 widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
             );
         },
+        explanatoryText2() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.explanatoryText,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
+            )?.replaceAll('{custom:currentReplaceDeductible}', formatAmountInDollars(this.mainStore.order.currentDeductible.replace));
+        },
         nextStepsHeader() {
             return this.getTextFromCmsWithCustomIfStatements(
                 this.widget.nextStep,
@@ -278,6 +258,9 @@ export default {
                 widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
             )?.replaceAll('{custom:damage}', this.damageText);
 
+            if (this.isITACQuoteVisible || this.isNoCompQuoteVisible) {
+                return createUnorderedListFromStringOfParagraphs(cmsText);
+            }
             return createOrderedListFromStringOfParagraphs(cmsText);
         },
         damageText() {
@@ -285,7 +268,7 @@ export default {
             return damageString === 'match' ? '' : damageString;
         },
         deductibleValue() {
-            return useMainStore().order.currentDeductible;
+            return this.mainStore.currentDeductible;
         },
         isNoCompQuoteVisible() {
             return this.mainStore.isVerified && this.mainStore.isNoComp;
@@ -309,21 +292,15 @@ export default {
         totalServicePrice() {
             return getPriceOfLineItems(this.baseServiceLineItems);
         },
-        serviceProviderQuestionText() {
-            return this.getCmsContent(
-                this.widget.serviceProviderQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT
-            );
-        },
-        serviceProviderQuestionAnswers() {
-            return this.getCmsContent(
-                this.widget.serviceProviderQuestion,
-                widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
-            );
-        },
         isQuoteDisplayed() {
+            return this.isNoCompQuoteVisible;
+        },
+        isDisclaimerVisible() {
             return this.isITACQuoteVisible || this.isNoCompQuoteVisible;
         },
+        showDeductibleOnly() {
+            return this.isDeductibleVisible && !this.isRepairZeroDeductible;
+        },
         shouldRegisterClaim() {
             const {
                 vehicle,
@@ -342,29 +319,24 @@ export default {
         },
         isRepair() {
             return this.mainStore.order.damage.isRepair;
+        },
+        isRepairZeroDeductible() {
+            return this.isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
+        },
+        buttonText() {
+            return (this.isITACQuoteVisible || this.isNoCompQuoteVisible) ? 'Continue scheduling' : 'Continue';
+        },
+        getVariant() {
+            if (this.isITACQuoteVisible || this.isNoCompQuoteVisible) {
+                return 'text-center';
+            }
+            return 'text-left';
         }
     },
     watch: {
-        selectedProvider() {
-            if (this.selectedProvider) {
-                if (this.selectedProvider !== SAFELITE_PROVIDER) {
-                    this.$refs[this.CANCEL_CLAIM_REF_NAME].openModal();
-                    this.selectedProvider = '';
-                    this.$refs.siteFooter.disableForwardButton();
-                } else {
-                    this.$refs.siteFooter.enableForwardAction();
-                }
-            }
-        },
         nextStepsBody(newValue, oldValue) {
             if (newValue !== oldValue) {
                 setupModalLink(this, RECAL_MODAL_REF_NAME);
-                setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
-            }
-        },
-        verifiedItacAlertBody(newValue, oldValue) {
-            if (newValue !== oldValue) {
-                setupModalLink(this, DEDUCTIBLE_MODAL_REF_NAME);
             }
         }
     },
@@ -421,15 +393,10 @@ export default {
             if (this.isUnverifiedVisible || this.isDeductibleVisible) {
                 this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD);
             } else if (this.isITACQuoteVisible || this.isNoCompQuoteVisible) {
-                useMainStore().updateIsSafeliteProvider(this.selectedProvider === SAFELITE_PROVIDER);
+                this.mainStore.updateIsSafeliteProvider(true);
-                if (this.selectedProvider === SAFELITE_PROVIDER) {
+                this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
-                } else {
-                    useMainStore().setBailout(bailoutMessage.RequestCallback());
-                    this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
-                }
             } else {
-                useMainStore().setBailout(bailoutMessage.coverageStatementInvalidState());
+                this.mainStore.setBailout(bailoutMessage.coverageStatementInvalidState());
                 this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_INVALID_STATE);
             }
         },
@@ -449,28 +416,24 @@ export default {
             switch (str) {
                 case 'coverageUnverified':
                     return this.isUnverifiedVisible;
-                case 'verifiedDeductible':
-                    return this.isDeductibleVisible;
                 case 'verifiedITAC':
                     return this.isITACQuoteVisible;
                 case 'verifiedNoComp':
                     return this.isNoCompQuoteVisible;
                 case 'ADASReplace':
-                    return !isRepair && this.isADAS;
+                    return !isRepair && this.isADAS && !this.isNoCompQuoteVisible && !this.isITACQuoteVisible;
                 case 'nonADASReplace':
-                    return !isRepair && !this.isADAS;
+                    return !isRepair && !this.isADAS && !this.isNoCompQuoteVisible && !this.isITACQuoteVisible;
-                case 'nonADASRepair':
+                case 'verifiedRepairDeductible':
-                    return isRepair;
-                case 'deductibleOverZero':
-                    return (
-                        this.isDeductibleVisible && this.deductibleValue > 0
-                    );
-                case 'isDeductibleZero':
-                    return (
-                        this.isDeductibleVisible && this.deductibleValue <= 0
-                    );
-                case 'verifiedRepair':
                     return isRepair && this.isDeductibleVisible;
+                case 'verifiedRepairZeroDeductible':
+                    return isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
+                case 'verifiedRepairZeroDeductibleReplaceDeductibleOverZero':
+                    return isRepair && this.isDeductibleVisible && this.deductibleValue <= 0 && this.mainStore.order.currentDeductible.replace > 0;
+                case 'verifiedRepairDeductibleOverZero':
+                    return isRepair && this.isDeductibleVisible && this.deductibleValue > 0;
+                case 'verifiedReplaceDeductible':
+                    return !isRepair && this.isDeductibleVisible;
                 case 'verifiedReplaceZeroDeductible':
                     return !isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
                 case 'verifiedReplaceDeductibleOverZero':
@@ -484,13 +447,9 @@ export default {
         },
         formatAmountInDollars,
         cancelClaim() {
-            useMainStore().updateIsSafeliteProvider(false);
+            this.mainStore.updateIsSafeliteProvider(false);
-            useMainStore().setBailout(bailoutMessage.RequestCallback());
+            this.mainStore.setBailout(bailoutMessage.RequestCallback());
             this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_NON_SAFELITE_SHOP);
-        },
-        continueClaim() {
-            useMainStore().updateIsSafeliteProvider(true);
-            this.navigateWithScenario(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE);
         }
     }
 };
@@ -501,46 +460,82 @@ export default {
     .coverage-statement-container {
         position: relative;
         min-height: 1px;
-        padding-left: .9375rem;
+        padding-left: .75rem;
-        padding-right: .9375rem;
+        padding-right: .75rem;
     }
 }
 
 .coverage-statement {
     .cost {
         color: $green;
-        font-size: 2rem;
+        font-size: 1.675rem;
-        font-weight: $font-weight-light;
+        font-weight: $font-weight-bold;
-        line-height: 2.75rem;
+        line-height: 2.5rem;
+        width: fit-content;
     }
-    .deductible-text {
+    .cost-underline {
-        line-height: 1.5rem;
+        border-bottom: 4px solid #0c7e47;
     }
     .sub-header {
-        line-height: 2rem;
+        line-height: 1.5rem;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .full-width-button {
+        width: 100%;
+    }
+    .underlined-text {
+        text-decoration: underline;
+    }
+    .cancel-link {
+        display: block;
+        margin: 24px auto 0 auto;
+    }
+    .back-link {
+        display: inline-block;
+        align-items: center;
+    }
+    :deep(.body-text > ol > ul) {
+        list-style-position: outside;
+        list-style-type: disc;
+        padding-left: 0;
     }
     :deep(ol) {
+        padding-left: 1.25rem;
+    }
+    :deep(li) {
+        margin-top: 1px;
+        padding-left: 5px;
+    }
+    :deep(ul) {
         padding: 0;
-        padding-left: 1.125rem;
+        padding-left: 1.25rem;
-        padding-right: 1.125rem;
+        padding-right: 1.25rem;
-        line-height: 1.5rem;
+        line-height: 1.25rem;
-        font-size: .875rem;
 
         li {
-            margin-bottom: .5rem;
+            margin-top: .5rem;
+            padding-left: 5px;
         }
     }
     :deep(p) {
         line-height: 1.5rem;
-        font-size: 0.875rem;
         margin-bottom: 0.5rem;
         strong {
             color: $black;
         }
     }
     :deep(.body-text) {
-        font-size: 0.875rem;
         line-height: 1.5rem;
+        color: $darker-gray;
+        strong {
+            color: $black;
+            font-weight: 500;
+        }
+        margin-top: 6px;
+        a {
+            text-decoration: none;
+        }
     }
     :deep(.question-text) {
         margin-top: 1.5rem;
@@ -560,20 +555,45 @@ export default {
             }
         }
     }
-}
+    .itac-price-container {
+        display: flex;
+        justify-content: space-around;
+        border: solid 1px #cacbcc;
+        border-radius: 5px;
+        align-items: center;
+        font-weight: $font-weight-bold;
+        color: $black;
+        padding: 10px;
+        margin-top: 20px;
 
-:deep(.deductible-modal) {
+        .itac-deductible-value-container {
-    p {
+            display: flex;
-        margin-bottom: 0 !important;
+            flex-direction: column;
+            align-items: center;
+        }
+        .itac-cost-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        .itac-deductible-value {
+            font-size: 1.675rem;
+            font-weight: $font-weight-normal;
+            line-height: 2.5rem;
+        }
+        .separator {
+            width: 1px;
+            height: 60px;
+            background-color: #cacbcc;
+        }
     }
-    img.mb-4 {
+    .no-comp-price-text {
-        margin: 0 !important;
+        font-weight: 500;
+        color: $black;
     }
-    h5 {
+    :deep(.line-two) {
-        color: black;
+        margin-top: 20px;
-    }
+        display: block;
-    p:last-child {
-        margin-top: 0.5rem;
     }
 }
 

src/layouts/order-confirmation/order-confirmation.spec.js

@@ -84,6 +84,13 @@ const initialStore = {
             lastName: 'Test',
             servicePhone: '111-111-1111',
             emailAddress: 'test@email.com'
+        },
+        damage: {
+            isRepair: false
+        },
+        currentDeductible: {
+            replace: 100,
+            repair: 0
         }
     }
 };
@@ -123,14 +130,20 @@ const sessionStorage = {
         vaps: []
     },
     policy: {},
-    damage: {},
+    damage: {
+        isRepair: false
+    },
     vehicle: {
         year: 2000,
         make: 'Honda',
         model: 'Civic'
     },
     customer: {},
-    customerPortalLoginToken: 'token'
+    customerPortalLoginToken: 'token',
+    currentDeductible: {
+        replace: 100,
+        repair: 0
+    }
 };
 
 function getMountedComponent(mainInitialState = {}, initialData = {}, methodToRun = () => {}, mixin = mockMixin) {

src/layouts/payment-method/payment-method.spec.js

@@ -232,7 +232,9 @@ describe('payment-method.vue', () => {
                         coverageStatus: coverageStatuses.VERIFIED,
                         coverageType: coverageType.Deductible
                     },
-                    currentDeductible: 123
+                    currentDeductible: {
+                        replace: 123
+                    }
                 },
                 issConfig: {
                     isClaimRegistrationRequired: true,
@@ -286,7 +288,7 @@ describe('payment-method.vue', () => {
         test('returns true when coverageStatus is verified and deductibleTotal = 0', () => {
             // Arrange
             store.order.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
-            store.order.currentDeductible = 0;
+            store.order.currentDeductible.replace = 0;
             const wrapper = setupMocks({}, store, mixin);
 
             // Act

src/layouts/payment-method/payment-method.vue

@@ -153,7 +153,7 @@ export default {
         isPayInAdvanceDisabled() {
             const piaExperience = this.getSettingValue(experimentSettings.ISS_DISPLAY_PAY_IN_ADVANCE);
             const isEnabled = piaExperience === 'true';
-            const isDeductibleTotalEqualToZero = useMainStore().order.currentDeductible === 0;
+            const isDeductibleTotalEqualToZero = useMainStore().currentDeductible === 0;
 
             return !isEnabled || useMainStore().isUnverified || (useMainStore().isDeductible && isDeductibleTotalEqualToZero);
         },

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

@@ -386,7 +386,7 @@ describe('tpa-submit', () => {
                     serviceLocation: {
                         provider: {
                             companyName: providerCompanyName
-                         }
+                        }
                     },
                     contactInfo: {
                         firstName,
@@ -431,7 +431,7 @@ describe('tpa-submit', () => {
                     serviceLocation: {
                         provider: {
                             companyName: providerCompanyName
-                         }
+                        }
                     },
                     contactInfo: {
                         firstName,
@@ -520,7 +520,9 @@ describe('tpa-submit', () => {
             // Arrange
             const initialStore = {
                 order: {
-                    currentDeductible: storeValue
+                    currentDeductible: {
+                        replace: storeValue
+                    }
                 }
             };
             const { wrapper } = getMountedComponent(initialStore);
@@ -568,7 +570,10 @@ describe('tpa-submit', () => {
                             insuranceCoverage: {
                                 coverageStatus: status
                             },
-                            currentDeductible: deductible
+                            currentDeductible: {
+                                replace: deductible,
+                                repair: deductible
+                            }
                         }
                     };
                     const { wrapper } = getMountedComponent(initialStore);
@@ -596,7 +601,10 @@ describe('tpa-submit', () => {
                             insuranceCoverage: {
                                 coverageStatus: status
                             },
-                            currentDeductible: deductible
+                            currentDeductible: {
+                                replace: deductible,
+                                repair: deductible
+                            }
                         }
                     };
                     const { wrapper } = getMountedComponent(initialStore);

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

@@ -16,12 +16,11 @@
                     <alert
                         ref="alertIncomplete"
                         alertClass="alert-warning"
-                        :cmsWidgetName="widget.alertIncomplete"
+                        :cmsWidgetName="widget.alertIncomplete" />
-                    />
                     <textBlock
                         ref="subHeaderTitle"
                         :customText="subHeaderTitle"
-                        class="tpa-submit-title"/>
+                        class="tpa-submit-title" />
                     <textBlock
                         id="tpaSubmitSubHeaderBodyOne"
                         ref="tpaSubmitSubHeaderBodyOne"
@@ -40,9 +39,15 @@
                         :headerText="recalModalContent.headerText"
                         :footerButtonText="recalModalContent.footerButtonText"
                         @footerButtonEvent="closeRecalModal">
-                        <div class="recal-modal-subheader">{{ recalModalContent.subHeaderText }}</div>
+                        <div class="recal-modal-subheader">
-                        <img class="recal-modal-image" :src="recalModalContent.image" />
+{{ recalModalContent.subHeaderText }}
-                        <div class="recal-modal-body" v-html="recalModalContent.bodyText"></div>
+</div>
+                        <img
+class="recal-modal-image"
+:src="recalModalContent.image" />
+                        <div
+class="recal-modal-body"
+v-html="recalModalContent.bodyText"></div>
                     </modal>
                     <hr />
                     <div id="serviceSummarySection">
@@ -155,7 +160,7 @@ export default {
                 alertIncomplete: 'AlertIncompleteWidget',
                 alertRecalWarning: 'AlertRecalWarningWidget',
                 editShopLinkText: 'EditShopLinkTextWidget',
-                 contactDetails: 'ContactDetailsSectionWidget'
+                contactDetails: 'ContactDetailsSectionWidget'
             },
             modalPositions
         };
@@ -207,7 +212,7 @@ export default {
             return this.mainStore.isVerified;
         },
         currentDeductible() {
-            return this.mainStore.order.currentDeductible;
+            return this.mainStore.currentDeductible;
         },
         deductibleBoxValue() {
             return this.isVerified
@@ -269,7 +274,7 @@ export default {
                 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;
@@ -281,9 +286,9 @@ export default {
             }
             return {
                 glassShop: this.getPreferredShopTitle,
-                contactPhone: contactPhone,
+                contactPhone,
                 contactEmail: this.mainStore.contactInfo.emailAddress ?? ''
-            }
+            };
         }
     },
     methods: {
@@ -293,7 +298,7 @@ export default {
                     this.getPreferredShopTitle,
                     this.getPreferredShopLines,
                     this.getEditShopLinkText,
-                    () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP),
+                    () => this.navigate(this.navigationScenarios.EDIT_PREFERRED_SHOP)
                 ),
                 // eslint-disable-next-line max-len
                 this.getSection(
@@ -306,7 +311,7 @@ export default {
         },
         getSection(title, lines, editLinkText, onClick) {
             return {
-                title: title,
+                title,
                 lines,
                 editLinkText,
                 onClickEdit: onClick

src/store/index.js

@@ -220,8 +220,16 @@ export const getDefaultState = () => ({
         settledTenderAmount: null,
         lockToken: null,
         customerPortalLoginToken: null,
-        originalDeductible: null,
+        originalDeductible: {
-        currentDeductible: null,
+            repair: null,
+            replace: null
+        },
+        currentDeductible: {
+            repair: null,
+            replace: null
+        },
+        totalTaxAmount: null,
+        waiverReasons: null,
         carrierPhoneNumber: null,
         loadedFromCookie: false,
         loadedFromDupeCheck: null,
@@ -439,7 +447,9 @@ export const useMainStore = defineStore({
         experimentSettings: (state) => state.applicationUser.experiments
             .filter((x) => !!x.isActive)
             .map((x) => x.settings)
-            .reduce((r, c) => Object.assign(r, c), {}) ?? {}
+            .reduce((r, c) => Object.assign(r, c), {}) ?? {},
+        originalDeductible: (state) => (state.order.damage.isRepair ? state.order.originalDeductible.repair : state.order.originalDeductible.replace),
+        currentDeductible: (state) => (state.order.damage.isRepair ? state.order.currentDeductible.repair : state.order.currentDeductible.replace)
     },
     actions:
     {
@@ -653,7 +663,7 @@ export const useMainStore = defineStore({
                             safelitePolicy: {
                                 policies: []
                             },
-                            actualDeductible: this.order.currentDeductible?.toString() ?? ''
+                            actualDeductible: this.currentDeductible.toString() ?? ''
                         },
                         lossInfo: {
                             dateOfLoss: this.order.policy.dateOfLoss,
@@ -716,8 +726,8 @@ export const useMainStore = defineStore({
                         manualGlassNames: manualGlassNamesArray,
                         policyState: this.order.customer.address.state,
                         status: this.order.policy.status,
-                        originalDeductible: this.order.originalDeductible,
+                        originalDeductible: this.originalDeductible,
-                        currentDeductible: this.order.currentDeductible,
+                        currentDeductible: this.currentDeductible,
                         noCoverage: false,
                         isRepair: this.order.damage.isRepair,
                         policyNumber: this.order.policy.policyNumber,
@@ -731,7 +741,7 @@ export const useMainStore = defineStore({
                     }
                 }).then((r) => {
                     this.order.policy.policyData = r.data.policyData;
-                    this.updateDeductible(r.data.deductible);
+                    this.updateDeductible(r.data);
                     return resolve(r);
                 }).catch((error) => reject(error));
             });
@@ -1198,7 +1208,7 @@ export const useMainStore = defineStore({
                             Model: vehicle.model
                         },
                         Insurance: {
-                            Deductible: this.order.currentDeductible ?? 0,
+                            Deductible: this.currentDeductible ?? 0,
                             PolicyNumber: policy.policyNumber,
                             CoverageStatus: insuranceCoverage.coverageStatus,
                             CoverageType: insuranceCoverage.coverageType
@@ -1448,8 +1458,8 @@ export const useMainStore = defineStore({
                     },
                     policyNumber: policy.policyNumber,
                     policyZipCode: policy.policyZipCode,
-                    originalDeductible: this.order.originalDeductible,
+                    originalDeductible: this.originalDeductible,
-                    currentDeductible: this.order.currentDeductible,
+                    currentDeductible: this.currentDeductible,
                     OemEndorsement: this.hasOemEndorsement,
                     noCoverage: this.isNoComp,
                     isItac: this.isITAC
@@ -2031,9 +2041,10 @@ export const useMainStore = defineStore({
             this.order.policy.deductible.repair = coverage?.repairWaived ?? false ? 0 : coverage.deductible;
             this.order.policy.endorsements = coverage?.endorsements;
 
-            // TODO logic should be more complicated later on
+            this.order.originalDeductible.replace = this.order.policy.deductible.replace;
-            this.order.originalDeductible = coverage.deductible;
+            this.order.currentDeductible.replace = this.order.policy.deductible.replace;
-            this.order.currentDeductible = coverage.deductible;
+            this.order.originalDeductible.repair = this.order.policy.deductible.repair;
+            this.order.currentDeductible.repair = this.order.policy.deductible.repair;
         },
 
         resetOrder() {
@@ -2046,8 +2057,10 @@ export const useMainStore = defineStore({
             this.order.settledTenderAmount = null;
             this.order.lockToken = null;
             this.order.eon = null;
-            this.order.originalDeductible = null;
+            this.order.originalDeductible.repair = null;
-            this.order.currentDeductible = null;
+            this.order.originalDeductible.replace = null;
+            this.order.currentDeductible.repair = null;
+            this.order.currentDeductible.replace = null;
             this.order.loadedFromDupeCheck = null;
             this.order.loadedSessionClearedPreviousData = null;
             this.order.availableVaps = null;
@@ -2317,8 +2330,12 @@ export const useMainStore = defineStore({
         updateIsSafeliteProvider(isSafelite) {
             this.order.serviceLocation.IsSafeliteProvider = isSafelite;
         },
-        updateDeductible(finalDeductible) {
+        updateDeductible(deductibleInfo) {
-            this.order.currentDeductible = finalDeductible;
+            if (this.order.damage.isRepair) {
+                this.order.currentDeductible.repair = deductibleInfo.deductible;
+            } else {
+                this.order.currentDeductible.replace = deductibleInfo.deductible;
+            }
         },
         savePartQuestionAnswers(partQuestionAnswersArray) {
         // if part question answers have changed, reset subsequent question answers

src/store/store.spec.js

@@ -12,7 +12,6 @@ import coverageStatuses from '@/constants/coverage-statuses.js';
 import { paymentMethods } from '@/constants/payment-method-constants';
 import endpoints from '@/constants/endpoints';
 import { AppointmentTypeStrings } from '@/constants/schedule-constants';
-import bailoutCode from '@/constants/bailoutCode';
 import coverageType from '@/constants/coverage-type';
 import { getEnumName } from '@/helpers/unit-test-helper';
 
@@ -227,6 +226,10 @@ describe('Store', () => {
         test(`CoverageType is set to expected ${getEnumName(coverageType, expected)} when vehicle noCoverage is ${noCoverage} and enableNoCompQuote is ${enableNoCompQuote}`, () => {
             // Arrange
             store.issConfig.enableNoCompQuote = enableNoCompQuote;
+            store.order.currentDeductible = {
+                replace: 500,
+                repair: 0
+            };
             const vehicleCoverage = {
                 noCoverage
             };
@@ -407,6 +410,10 @@ describe('Store', () => {
                 }
             };
             store.order.insuranceCoverage.coverageType = coverageType.NO_COMP;
+            store.order.currentDeductible = {
+                replace: 500,
+                repair: 0
+            };
 
             globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
 
@@ -434,6 +441,10 @@ describe('Store', () => {
                 }
             };
             store.order.insuranceCoverage.coverageType = coverageType.Deductible;
+            store.order.currentDeductible = {
+                replace: 500,
+                repair: 0
+            };
 
             globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve(response));
 
@@ -453,6 +464,10 @@ describe('Store', () => {
             const error = 'register claim error';
             globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject(error));
             store.order.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
+            store.order.currentDeductible = {
+                replace: 500,
+                repair: 0
+            };
 
             // Act
             await store.registerClaim().catch((e) => {
@@ -501,7 +516,7 @@ describe('Store', () => {
                 home: homePhone,
                 service: servicePhone,
                 alternative: altPhone,
-                extension: extension
+                extension
             });
 
             // Assert
@@ -670,10 +685,22 @@ describe('Store', () => {
                 const policyZipCode = getRandomString(6, 6);
                 const status = getRandomEnum(coverageStatuses);
                 const type = getRandomEnum(coverageType);
-                const originalDeductible = getRandomString(6, 6);
+                const originalDeductible = {
-                const currentDeductible = getRandomString(6, 6);
+                    replace: 500,
-                store.order.originalDeductible = originalDeductible;
+                    repair: 0
-                store.order.currentDeductible = currentDeductible;
+                };
+                const currentDeductible = {
+                    replace: 500,
+                    repair: 0
+                };
+                store.order.originalDeductible = {
+                    replace: originalDeductible.replace,
+                    repair: originalDeductible.repair
+                };
+                store.order.currentDeductible = {
+                    replace: currentDeductible.replace,
+                    repair: currentDeductible.repair
+                };
                 store.order.customer.firstName = customerFirstName;
                 store.order.customer.lastName = customerLastName;
                 store.order.customer.emailAddress = customerEmail;
@@ -684,6 +711,7 @@ describe('Store', () => {
                 store.order.policy.policyZipCode = policyZipCode;
                 store.order.insuranceCoverage.coverageStatus = status;
                 store.order.insuranceCoverage.coverageType = type;
+                store.order.damage.isRepair = false;
                 globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.resolve({}));
 
                 // Act
@@ -702,8 +730,8 @@ describe('Store', () => {
                             }),
                             policyNumber,
                             policyZipCode,
-                            originalDeductible,
+                            originalDeductible: originalDeductible.replace,
-                            currentDeductible
+                            currentDeductible: currentDeductible.replace
                         }),
                         insuranceCoverage: expect.objectContaining({
                             coverageStatus: status,
@@ -1717,8 +1745,8 @@ describe('Store', () => {
                 const manualGlassNames = [location];
                 const policyState = getRandomString(2, 2);
                 const status = getRandomString(6, 8);
-                const currentDeductible = getRandomInt(0, 5000);
+                const currentDeductible = 500;
-                const originalDeductible = getRandomInt(0, 5000);
+                const originalDeductible = 500;
                 const isRepair = getRandomBoolean();
                 const policyNumber = getRandomString(10, 20);
                 const insuredFirstName = getRandomString(10, 20);
@@ -1730,8 +1758,14 @@ describe('Store', () => {
 
                 store.order.referralCorrelationId = referralCorrelationId;
                 store.order.parentAccountNumber = parentAccountNumber;
-                store.order.currentDeductible = currentDeductible;
+                store.order.currentDeductible = {
-                store.order.originalDeductible = originalDeductible;
+                    replace: currentDeductible,
+                    repair: currentDeductible
+                };
+                store.order.originalDeductible = {
+                    replace: originalDeductible,
+                    repair: originalDeductible
+                };
                 store.order.policy.status = status;
                 store.order.customer.address.state = policyState;
                 store.order.damage.isRepair = isRepair;
@@ -1827,8 +1861,14 @@ describe('Store', () => {
 
                 store.order.referralCorrelationId = referralCorrelationId;
                 store.order.parentAccountNumber = parentAccountNumber;
-                store.order.currentDeductible = currentDeductible;
+                store.order.currentDeductible = {
-                store.order.originalDeductible = originalDeductible;
+                    replace: currentDeductible,
+                    repair: currentDeductible
+                };
+                store.order.originalDeductible = {
+                    replace: originalDeductible,
+                    repair: originalDeductible
+                };
                 store.order.policy.status = status;
                 store.order.customer.address.state = policyState;
                 store.order.policy.endorsementQuestionAnswers = endorsementAnswers;
@@ -1898,23 +1938,29 @@ describe('Store', () => {
     describe('updateDeductible method', () => {
         it('final deductible is saved as currentDeductible in store', () => {
             // Arrange
-            const finalDeductible = getRandomInt(0, 5000);
+            store.order.damage.isRepair = false;
+            const deductibleInfo = {
+                deductible: 500
+            };
 
             // Act
-            store.updateDeductible(finalDeductible);
+            store.updateDeductible(deductibleInfo);
 
             // Assert
-            expect(store.order.currentDeductible).toEqual(finalDeductible);
+            expect(store.order.currentDeductible.replace).toEqual(deductibleInfo.deductible);
         });
         it('null final deductible => currentDeductible in store set to null', () => {
             // Arrange
-            const finalDeductible = null;
+            store.order.damage.isRepair = false;
+            const deductibleInfo = {
+                deductible: null
+            };
 
             // Act
-            store.updateDeductible(finalDeductible);
+            store.updateDeductible(deductibleInfo);
 
             // Assert
-            expect(store.order.currentDeductible).toEqual(finalDeductible);
+            expect(store.order.currentDeductible.replace).toEqual(deductibleInfo.deductible);
         });
     });
 

src/styles/client-customizations.scss

@@ -6,15 +6,18 @@
     //Define colors for namespaced classes
     $header-background: #ffd100;
     $accent-fill: #e6f1f3; // Calendar background
-    $accent-color: #09748b;
+    $accent-color: #0070d1;
-    $link: #09748b;
+    $link: #0070d1;
     $svg-fill-color: '%2309748b'; // Color of calendar icon. Place HEX code *after* %23
     $progress-bar-success-color: #1a1446;
     $progress-bar-background-color: #ffffff;
 
+    a,
     svg,
     .modal-text {
         fill: $accent-color;
+        color: $accent-color;
+        font-weight: 500;
     }
 
     .container-fluid {