Merge pull request #3075 from Safelite/feature/CASH-1684

CASH-1684: MSR fee not covered by insurance alert

src/assets/img/icons/alert-circle-yellow.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21">
+    <path fill="#E86421" fill-rule="nonzero" d="M10 .5c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10S4.477.5 10 .5zm.043 13.6a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm.77-9.2h-1.54l-.088.009a.502.502 0 0 0-.299.193.66.66 0 0 0-.125.47l.747 6.806.017.096c.065.249.263.425.495.426l.084-.008c.22-.042.396-.246.427-.51l.793-6.805.004-.102a.651.651 0 0 0-.127-.37.489.489 0 0 0-.388-.205z"/>
+</svg>

src/helpers/cms-content-helper.js

@@ -343,3 +343,14 @@ export function splitCMSCopyOnParagraphTag(copy) {
 export function splitCMSCopyOnBR(copy) {
     return copy.split("<br>");
 }
+
+// This function takes in a number and returns it formatted as USD currency, with or without cents depending on if the number is an integer or not.
+export function formatToUSDollar(amount) {
+    const isInteger = amount % 1 === 0;
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: isInteger ? 0 : 2,
+        maximumFractionDigits: 2,
+    }).format(amount);
+}

src/layouts/schedule/schedule.vue

@@ -74,6 +74,16 @@
                         cmsWidgetName="AlertNoShopsWidget"
                         v-if="displayNoShopsAlert"
                         alertClass="alert-warning" />
+                    <alert
+                        ref="alertMSRNotCoveredByInsurance"
+                        class="mt-5 mb-5"
+                        v-if="isMSRFeeNotCoveredByInsurance"
+                        :manualHeadline="MSRFeeAlertHeadlineText"
+                        :manualCopy="MSRFeeAlertBodyText"
+                        :showWarningIcon="true"
+                        :hasBorder="true"
+                        :showHorizontalRow="true"
+                        alertClass="alert-warning" />
                 </div>
             </div>
             <div
@@ -221,7 +231,11 @@ import {
     RECAL_ACK_YES,
 } from "@/constants/schedule-constants";
 
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import {
+    fetchCmsContentForPage,
+    splitCopyOnCMSPlaceHolder,
+    formatToUSDollar,
+} from "@/helpers/cms-content-helper";
 import { settleAllPromises } from "@/helpers/layout-helper";
 import {
     getPricedMobileFeePart,
@@ -237,7 +251,6 @@ import { partNumberStrings } from "@/constants/part-number-strings";
 import store from "@/store";
 
 import { storeActions } from "@/constants/store-actions";
-import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
 import {
     calcDaysBetweenDates,
     convertDateStringToDate,
@@ -677,8 +690,7 @@ export default {
         isMobileStaticRecalibrationApplicable() {
             return (
                 this.displayMSR &&
-                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
+                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE
-                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
             );
         },
         displayMSR() {
@@ -688,6 +700,28 @@ export default {
                     ?.toLowerCase() === "true"
             );
         },
+        isMSRFeeNotCoveredByInsurance() {
+            return (
+                this.isMobileSelected &&
+                this.isMobileStaticRecalibrationApplicable &&
+                this.mobileFeeHasPrice &&
+                this.isInsurance &&
+                !this.mobileFeePart?.isInsurable
+            );
+        },
+        MSRFeeAlertHeadlineText() {
+            return this.getCmsContent("AlertMSRNotCoveredByInsuranceWidget", "HeadlineText");
+        },
+        MSRFeeAlertBodyText() {
+            const cmsContentText = this.getCmsContent(
+                "AlertMSRNotCoveredByInsuranceWidget",
+                "BodyText"
+            );
+            return cmsContentText.replaceAll(
+                "{custom:mobileFee}",
+                formatToUSDollar(this.mobileFee)
+            );
+        },
         isCashItacNoComp() {
             return !this.isInsurance || this.isITAC || this.isNoComp;
         },

src/ux-components/alert/alert.vue

@@ -7,9 +7,15 @@
             isDismissible ? 'alert-dismissible' : '',
             this.alertClass,
             this.cssClassNameForCmsWidget,
+            this.hasBorder ? 'bordered' : '',
         ]">
         <p class="mx-6 my-0 fw-bold alert-heading">
             <img v-if="showInfoIcon" :src="infoIcon" alt="Info Icon" class="info-icon" />
+            <img
+                v-if="showWarningIcon"
+                :src="warningIcon"
+                alt="Warning Icon"
+                class="warning-icon" />
             {{ alertHeadline }}
         </p>
         <hr v-if="showHorizontalRow" />
@@ -63,7 +69,9 @@ export default {
     name: "alert",
     props: {
         showInfoIcon: Boolean,
+        showWarningIcon: Boolean,
         showHorizontalRow: Boolean,
+        hasBorder: Boolean,
         isDismissible: Boolean,
         alertClass: String,
         /*
@@ -96,6 +104,9 @@ export default {
         infoIcon() {
             return require(`@/assets/img/icons/info-circle-blue.svg`);
         },
+        warningIcon() {
+            return require(`@/assets/img/icons/alert-circle-yellow.svg`);
+        },
         pageQueryString() {
             return applicationConfig.PAGE_QUERYSTRING;
         },
@@ -211,12 +222,19 @@ export default {
         background-color: $yellow-100;
         .alert-heading {
             color: $yellow-600;
+
+            .warning-icon {
+                height: 1rem;
+            }
         }
         svg {
             fill: $yellow-600;
             width: 1rem;
             height: 1rem;
         }
+        hr {
+            border-color: $yellow-800;
+        }
     }
     &.alert-success {
         background-color: $green-100;
@@ -229,6 +247,9 @@ export default {
             height: 1rem;
         }
     }
+    &.bordered {
+        border: 1px solid;
+    }
     & p {
         font-size: 0.875rem;
     }