deductible and ITAC WIP

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/coverage-statement.vue

@@ -21,6 +21,10 @@
                         ref="explanatoryText"
                         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"
@@ -51,17 +55,27 @@
                         class="d-flex cost cost-underline">
                         {{ formatAmountInDollars(deductibleValue) }}
                     </div>
+                    <div
+                        v-if="!isReplaceZeroDeductible"
+                        class="fw-bold text-black mt-5"
+                        v-html="nextStepsHeader"></div>
+                    <div
+                        v-if="isReplaceZeroDeductible"
+                        class="mt-4"
+                        v-html="nextStepsSubheader"></div>
+                    <div
+                        class="body-text"
+                        v-html="nextStepsBody"></div>
+                    <div
+                        v-if="isNoCompQuoteVisible"
+                        class="no-comp-price-text">
+                        Safelite price*:
+                    </div>
                     <div
                         v-if="isQuoteDisplayed"
                         class="d-flex justify-content-center cost mb-0 cost-underline">
                         {{ formatAmountInDollars(totalServicePrice) }}
                     </div>
-                    <div
-                        class="fw-bold text-black mt-5 mb-2"
-                        v-html="nextStepsHeader"></div>
-                    <div
-                        class="body-text"
-                        v-html="nextStepsBody"></div>
                     <buttonMain
                         v-if="isNoCompQuoteVisible || isITACQuoteVisible"
                         ref="buttonMain"
@@ -132,7 +146,7 @@ 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, createOrderedListFromStringOfParagraphs, createUnorderedListFromStringOfParagraphs } from '@/helpers/text-helper.js';
 import showIssLoadingModal from '@/helpers/loading-modal-helper';
 import { getPriceOfLineItems } from '@/helpers/price-calculator';
 import coverageStatuses from '@/constants/coverage-statuses';
@@ -275,19 +289,31 @@ export default {
                 widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
             );
         },
+        explanatoryText2() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.explanatoryText,
+                widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT_2
+            );
+        },
         nextStepsHeader() {
             return this.getTextFromCmsWithCustomIfStatements(
                 this.widget.nextStep,
                 widgetFields.CONTENT_GROUP_WIDGET.HEADER_TEXT
             );
         },
+        nextStepsSubheader() {
+            return this.getTextFromCmsWithCustomIfStatements(
+                this.widget.nextStep,
+                widgetFields.CONTENT_GROUP_WIDGET.SUBHEADER_TEXT
+            );
+        },
         nextStepsBody() {
             const cmsText = this.getTextFromCmsWithCustomIfStatements(
                 this.widget.nextStep,
                 widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT
             )?.replaceAll('{custom:damage}', this.damageText);
 
-            return createOrderedListFromStringOfParagraphs(cmsText);
+            return createUnorderedListFromStringOfParagraphs(cmsText);
         },
         damageText() {
             const damageString = getDamageString();
@@ -337,7 +363,7 @@ export default {
             return this.isITACQuoteVisible || this.isNoCompQuoteVisible;
         },
         showDeductibleOnly() {
-            return this.isDeductibleVisible && this.isITACQuoteVisible;
+            return this.isDeductibleVisible && !this.isRepairZeroDeductible;
         },
         shouldRegisterClaim() {
             const {
@@ -363,6 +389,12 @@ export default {
         },
         isUnverifiedNonADAS() {
             return this.isUnverifiedVisible && !this.isADAS;
+        },
+        isReplaceZeroDeductible() {
+            return !this.isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
+        },
+        isRepairZeroDeductible() {
+            return this.isRepair && this.isDeductibleVisible && this.deductibleValue <= 0;
         }
     },
     watch: {
@@ -483,13 +515,9 @@ export default {
                 case 'nonADASRepair':
                     return isRepair;
                 case 'deductibleOverZero':
-                    return (
-                        this.isDeductibleVisible && this.deductibleValue > 0
-                    );
+                    return this.isDeductibleVisible && this.deductibleValue > 0;
                 case 'isDeductibleZero':
-                    return (
-                        this.isDeductibleVisible && this.deductibleValue <= 0
-                    );
+                    return this.isDeductibleVisible && this.deductibleValue <= 0;
                 case 'verifiedRepair':
                     return isRepair && this.isDeductibleVisible;
                 case 'verifiedReplaceZeroDeductible':
@@ -500,6 +528,10 @@ export default {
                     return this.isUnverifiedADAS;
                 case 'unverifiedNonADAS':
                     return this.isUnverifiedNonADAS;
+                case 'verifiedReplaceDeductibleOverZeroNonADAS':
+                    return !isRepair && this.isDeductibleVisible && this.deductibleValue > 0 && !this.isADAS;
+                case 'verifiedReplaceDeductibleOverZeroADAS':
+                    return !isRepair && this.isDeductibleVisible && this.deductibleValue > 0 && this.isADAS;
                 default:
                     return null;
             }
@@ -546,7 +578,7 @@ export default {
         line-height: 1.5rem;
     }
     .sub-header {
-        line-height: 2rem;
+        line-height: 1.5rem;
         margin-top: 20px;
         margin-bottom: 20px;
     }
@@ -565,11 +597,11 @@ export default {
         list-style-type: disc;
         padding-left: 0;
     }
-    :deep(ol) {
+    :deep(ul) {
         padding: 0;
-        padding-left: 1.125rem;
-        padding-right: 1.125rem;
-        line-height: 1.5rem;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+        line-height: 1.25rem;
 
         li {
             margin-bottom: .5rem;
@@ -589,6 +621,7 @@ export default {
             color: $black;
             font-weight: 500;
         }
+        margin-top: 6px;
     }
     :deep(.question-text) {
         margin-top: 1.5rem;
@@ -617,6 +650,7 @@ export default {
         font-weight: $font-weight-bold;
         color: $black;
         padding: 10px;
+        margin-top: 20px;
 
         .itac-deductible-value-container {
             display: flex;
@@ -639,6 +673,14 @@ export default {
             background-color: #cacbcc;
         }
     }
+    .no-comp-price-text {
+        font-weight: 500;
+        color: $black;
+    }
+    :deep(.line-two) {
+        margin-top: 20px;
+        display: block;
+    }
 }
 
 :deep(.deductible-modal) {

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;
-    $link: #09748b;
+    $accent-color: #0070d1;
+    $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 {