Merge pull request #3233 from Safelite/feature/CASH-2848

CASH-2848: Coverage Statement repair/replace copy

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

@@ -8,13 +8,14 @@
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <div class="my-5" ref="unverified-block">
+                    <div v-if="showUnverifiedContent" class="my-5" ref="unverified-block">
                         <funnelSubHeader cmsWidgetName="SubHeaderWidgetUnverified" alignLeft />
                         <customerInstructions
-                            cmsWidgetName="InstructionsWidgetUnverified"
+                            :cmsWidgetName="getUnverifiedInstructionsWidgetName"
+                            :isRepair="isRepair"
                             v-on="{ textLinkClicked: openModalAction }" />
                     </div>
-                    <div class="my-5" ref="verified-block">
+                    <div v-if="showVerifiedContent" class="my-5" ref="verified-block">
                         <funnelSubHeader cmsWidgetName="SubHeaderWidgetVerified" alignLeft />
                         <priceDisplay
                             cmsWidgetName="PriceWidgetVerified"
@@ -27,7 +28,7 @@
                             cmsWidgetName="AfterpayBreakoutWidget"
                             :totalAmount="cashPrice" />
                     </div>
-                    <div class="my-5" ref="itac-block">
+                    <div v-if="showItacContent" class="my-5" ref="itac-block">
                         <funnelSubHeader
                             class="mb-4"
                             cmsWidgetName="SubHeaderWidgetItac"
@@ -39,7 +40,7 @@
                             <priceDisplay cmsWidgetName="PriceWidgetItac" :price="cashPrice" />
                         </div>
                     </div>
-                    <div class="my-5" ref="nocomp-block">
+                    <div v-if="showNoCompContent" class="my-5" ref="nocomp-block">
                         <funnelSubHeader
                             class="mb-4"
                             cmsWidgetName="SubHeaderWidgetNocomp"
@@ -92,7 +93,11 @@ export default {
     data() {
         return {
             isClaimAndCoverage: this.isClaimAndCoverageFromStore(),
+            isVerified: this.isVerifiedInsuranceFromStore(),
+            isItac: this.isItacFromStore(),
+            isNoComp: this.isNoCompFromStore(),
             isRecalibrationOnOrder: this.isRecalibrationOnOrderFromStore(),
+            isRepair: this.isRepairFromStore(),
             clientConfig: {},
         };
     },
@@ -143,9 +148,21 @@ export default {
         isClaimAndCoverageFromStore() {
             return store.getters.order?.payment?.isClaimAndCoverage;
         },
+        isVerifiedInsuranceFromStore() {
+            return store.getters.order?.payment?.insuranceCoverage.isVerified;
+        },
+        isItacFromStore() {
+            return store.getters.order?.policy?.isItac;
+        },
+        isNoCompFromStore() {
+            return store.getters.order?.policy?.isNoComp;
+        },
         isRecalibrationOnOrderFromStore() {
             return store.getters.isRecalibrationOnOrder;
         },
+        isRepairFromStore() {
+            return store.getters.order?.damage?.isRepair;
+        },
         backButtonAction() {
             if (!this.isClaimAndCoverage) {
                 this.$router.navigateWithoutSaving(
@@ -182,6 +199,27 @@ export default {
         },
     },
     computed: {
+        showVerifiedContent() {
+            return this.isVerified && !this.isItac && !this.isNoComp;
+        },
+        showUnverifiedContent() {
+            return !this.isVerified;
+        },
+        showItacContent() {
+            return this.isItac;
+        },
+        showNoCompContent() {
+            return this.isNoComp;
+        },
+        getUnverifiedInstructionsWidgetName() {
+            if (!this.isVerified) {
+                if (this.isRepair) {
+                    return "InstructionsWidgetUnverifiedRepair";
+                }
+                return "InstructionsWidgetUnverified";
+            }
+            return "";
+        },
         clientLogoImageSrc() {
             return this.clientConfig?.ClientLogoWidget?.Image || "";
         },
@@ -205,6 +243,9 @@ export default {
 </script>
 
 <style lang="scss">
+.funnel-sub-header {
+    margin-bottom: 1.5rem;
+}
 .price-compare {
     display: flex;
 

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

@@ -5,9 +5,9 @@
                 {{ headerText }}
             </strong>
         </div>
-        <div>
+        <div v-if="!this.isRepair">
             <ol>
-                <li v-for="block in instructionBlocks" :key="block">
+                <li v-for="block in InstructionBlocks" :key="block">
                     <span v-for="token in block" :key="token">
                         <span v-if="doesCopyContainTextLink(token)" class="link">
                             <textLink
@@ -24,6 +24,7 @@
                 </li>
             </ol>
         </div>
+        <div v-else v-html="RepairInstructionText"></div>
     </div>
 </template>
 
@@ -45,6 +46,7 @@ export default {
     },
     props: {
         cmsWidgetName: String,
+        isRepair: Boolean,
     },
     methods: {
         doesCopyContainTextLink,
@@ -57,7 +59,7 @@ export default {
         headerText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");
         },
-        instructionBlocks() {
+        InstructionBlocks() {
             const answers = this.getCmsContent(this.cmsWidgetName, "Answers");
 
             if (!answers) {
@@ -72,6 +74,9 @@ export default {
 
             return instructionBlocksAsTokens;
         },
+        RepairInstructionText() {
+            return this.getCmsContent(this.cmsWidgetName, "Text");
+        },
     },
     components: {
         textLink,