unverified scenarios WIP

src/constants/bailoutCode.js

@@ -4,7 +4,7 @@ const bailoutCode = Object.freeze({
     VehicleNotFound: 2,
     VehicleVinLookupError: 3,
     CoverageStatementInvalidState: 4,
-    DoNotSeeMyShop: 5,
+    NeedHelp: 5,
     PricingResponseError: 6,
     TPANotEnabled: 7,
     RequestCallback: 8,

src/constants/bailoutMessage.js

@@ -33,9 +33,9 @@ const bailoutMessage = Object.freeze({
         code: bailoutCode.CoverageStatementInvalidState,
         message: 'Coverage Statement has entered an invalid state'
     }),
-    doNotSeeMyShop: () => ({
+    needHelp: () => ({
-        code: bailoutCode.DoNotSeeMyShop,
+        code: bailoutCode.NeedHelp,
-        message: 'User does not see their shop.'
+        message: 'User clicked Need Help link.'
     }),
     pricingResponseError: (lineItems, error) => ({
         code: bailoutCode.PricingResponseError,
@@ -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/constants/progress-bar-mapper.js

@@ -45,7 +45,7 @@ export const pageProgressMapper = {
         percent: 50
     },
     'coverage-statement': {
-        percent: 55
+        percent: 50
     },
     'provider-preference': {
         percent: 60

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

@@ -15,26 +15,32 @@
                 <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="secondaryText"
                         class="mt-4 mb-1 fw-bold text-black"
                         v-html="secondaryText"></div>
-                    <div class="itac-price-container" v-if="isITACQuoteVisible">
+                    <div
+                        v-if="isITACQuoteVisible"
+                        class="itac-price-container">
                         <div class="itac-deductible-value-container">
-                            <div class="itac-deductible-value-text">Your deductible:</div>
+                            <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="itac-cost-text">
+                                Safelite price*:
+                            </div>
                             <div class="cost">
                             {{ formatAmountInDollars(totalServicePrice) }}
                             </div>
@@ -57,30 +63,31 @@
                         class="body-text"
                         v-html="nextStepsBody"></div>
                     <buttonMain
+                        v-if="isNoCompQuoteVisible || isITACQuoteVisible"
                         ref="buttonMain"
                         class="full-width-button mt-5"
                         variant="navigation"
                         buttonText="Continue scheduling"
                         @clickEvent="continueToSchedule" />
                     <textLink
+                        v-if="isNoCompQuoteVisible || isITACQuoteVisible"
                         class="underlined-text cancel-link mt-5"
                         linkType="text"
-                        text="No, I want to cancel"    
+                        text="No, I want to cancel"
                         href="#"
                         @clickEvent="cancelClaim" />
                     <textBlock
-                        class="mt-5"
                         v-if="isDisclaimerVisible"
+                        class="mt-5"
                         :customText="disclaimerText"
                         typeStyle="caption" />
                     <siteFooter
+                        v-if="isUnverifiedVisible || isDeductibleVisible"
                         :ref="SITE_FOOTER_REF_NAME"
                         class="mt-5"
-                        isForwardButtonHidden="true"
                         cmsWidgetName="SiteFooterWidget"
                         :isForwardActionDisabled="!meta.valid"
-                        @backClicked="navigateBackByVehicleQuestions"/>
+                        @backClicked="navigateBackByVehicleQuestions" />
-                    
                 </div>
             </div>
         </div>
@@ -104,7 +111,6 @@
 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 textBlock from '@/digital-components/text-block/text-block.vue';
@@ -145,7 +151,6 @@ export default {
         siteHeader,
         // eslint-disable-next-line vue/no-reserved-component-names
         Form,
-        alert,
         cancelClaimModal,
         contentGroupModal,
         buttonMain,
@@ -354,6 +359,12 @@ export default {
         },
         isRepair() {
             return this.mainStore.order.damage.isRepair;
+        },
+        isUnverifiedADAS() {
+            return this.isUnverifiedVisible && this.isADAS;
+        },
+        isUnverifiedNonADAS() {
+            return this.isUnverifiedVisible && !this.isADAS;
         }
     },
     watch: {
@@ -487,6 +498,10 @@ export default {
                     return !isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
                 case 'verifiedReplaceDeductibleOverZero':
                     return !isRepair && this.isDeductibleVisible && this.deductibleValue > 0;
+                case 'unverifiedADAS':
+                    return this.isUnverifiedADAS;
+                case 'unverifiedNonADAS':
+                    return this.isUnverifiedNonADAS;
                 default:
                     return null;
             }
@@ -534,6 +549,8 @@ export default {
     }
     .sub-header {
         line-height: 2rem;
+        margin-top: 20px;
+        margin-bottom: 20px;
     }
     .full-width-button {
         width: 100%;
@@ -569,6 +586,11 @@ export default {
     }
     :deep(.body-text) {
         line-height: 1.5rem;
+        color: $darker-gray;
+        strong {
+            color: $black;
+            font-weight: 500;
+        }
     }
     :deep(.question-text) {
         margin-top: 1.5rem;
@@ -597,7 +619,7 @@ export default {
         font-weight: $font-weight-bold;
         color: $black;
         padding: 10px;
-    
+
         .itac-deductible-value-container {
             display: flex;
             flex-direction: column;