Merge pull request #1567 from Safelite/feature/CSR-1827

error message

src/layouts/payment-method/promo-modal-question/promo-modal-question.spec.js

@@ -49,7 +49,9 @@ describe("promo-modal-question.vue", () => {
 
         // Assert
         expect(wrapper.vm.displayInvalidPromoAlert).toBe(false);
-        expect(wrapper.vm.displayInvalidOnOrderPromoAlert).toBe(false);
+        expect(wrapper.vm.displayStackingPromoAlert).toBe(false);
+        expect(wrapper.vm.displayInShopPromoAlert).toBe(false);
+        expect(wrapper.vm.displaySimilarPromoAlert).toBe(false);
     });
     it("Should emit update:modelValue on Modal closed", async () => {
         // Arrange

src/layouts/payment-method/promo-modal-question/promo-modal-question.vue

@@ -22,19 +22,34 @@
             <alert
                 ref="alertInvalidPromo"
                 v-if="displayInvalidPromoAlert"
-                v-html="InvalidPromoText"
+                v-html="errorMessage"
                 class="my-4 alert"
                 cmsWidgetName="AlertInvalidPromoWidget"
                 alertClass="alert-danger"
-                v-bind:isDismissible="true" />
+                v-bind:isDismissible="false" />
             <alert
-                ref="alertInvalidPromoOnOrder"
+                ref="AlertSimilarPromo"
-                v-if="displayInvalidOnOrderPromoAlert"
+                v-if="displaySimilarPromoAlert"
-                v-html="InvalidPromoOnOrderText"
                 class="my-4 alert"
-                cmsWidgetName="AlertInvalidPromoOnOrderWidget"
+                cmsWidgetName="AlertSimilarPromoWidget"
                 alertClass="alert-danger"
-                v-bind:isDismissible="true" />
+                v-bind:isDismissible="false" />
+            <alert
+                ref="alertInvalidStackingPromo"
+                v-if="displayStackingPromoAlert"
+                v-html="errorMessage"
+                class="my-4 alert"
+                cmsWidgetName="AlertStackingPromoWidget"
+                alertClass="alert-danger"
+                v-bind:isDismissible="false" />
+            <alert
+                ref="AlertInShopPromo"
+                v-if="displayInShopPromoAlert"
+                v-html="errorMessage"
+                class="my-4 alert"
+                cmsWidgetName="AlertInshopPromoWidget"
+                alertClass="alert-danger"
+                v-bind:isDismissible="false" />
             <div v-for="(promoCode, i) in this.getPromoCodeList()" :key="i">
                 <span class="applied-promo">Promo code "{{ promoCode }}" applied </span>
                 <textLink
@@ -71,8 +86,11 @@ export default {
         return {
             promoCode: "",
             promoTextInputId: "",
+            errorMessage: "",
             displayInvalidPromoAlert: false,
-            displayInvalidOnOrderPromoAlert: false,
+            displaySimilarPromoAlert: false,
+            displayStackingPromoAlert: false,
+            displayInShopPromoAlert: false,
             lineItems: deepClone(this.modelValue),
         };
     },
@@ -97,20 +115,14 @@ export default {
         modal() {
             return this.$refs[this.modalName];
         },
-        PromoOnOrderText() {
+        StackPromoText() {
-            return this.getCmsContent("AlertInvalidPromoOnOrderWidget", "HeadlineText");
+            return this.getCmsContent("AlertStackingPromoWidget", "HeadlineText");
-        },
-        InvalidPromoOnOrderText() {
-            return this.PromoOnOrderText?.replaceAll(
-                "{custom:NEWPROMOCODE}",
-                this.promoCode.toUpperCase()
-            ).replaceAll("{custom:OLDPROMOCODE}", this.getPromoCode()?.toUpperCase());
         },
         PromoText() {
             return this.getCmsContent("AlertInvalidPromoWidget", "HeadlineText");
         },
-        InvalidPromoText() {
+        InShopPromoText() {
-            return this.PromoText?.replaceAll("{custom:PROMOCODE}", this.promoCode.toUpperCase());
+            return this.getCmsContent("AlertInshopPromoWidget", "HeadlineText");
         },
         removeLinkText() {
             return this.getCmsContent("RemoveCartItemTextWidget", "Text");
@@ -118,8 +130,11 @@ export default {
     },
     methods: {
         resetAlerts() {
-            this.displayInvalidOnOrderPromoAlert = false;
+            this.displayStackingPromoAlert = false;
             this.displayInvalidPromoAlert = false;
+            this.displaySimilarPromoAlert = false;
+            this.displayInShopPromoAlert = false;
+            this.errorMessage = "";
         },
         resetsOnPromoInput() {
             this.resetAlerts();
@@ -130,8 +145,16 @@ export default {
             );
             return promosToDisplay;
         },
-        getPromoCode() {
+        getConflictingPromoCode(additionalInfo) {
-            return this.lineItems.promos?.[0]?.promoCode;
+            var conflictingCodes = additionalInfo?.[0];
+            if (additionalInfo?.length > 1) {
+                if (additionalInfo?.length > 2) conflictingCodes += ",";
+                for (let i = 1; i < additionalInfo?.length - 1; i++) {
+                    conflictingCodes += ` "${additionalInfo[i]}",`;
+                }
+                conflictingCodes += ` and "${additionalInfo?.slice(-1)[0]}"`;
+            }
+            return conflictingCodes;
         },
         onInputIdAssigned(inputId) {
             this.promoTextInputId = inputId;
@@ -171,6 +194,7 @@ export default {
                 isValid: !("errorCode" in promoValidationResponse),
                 promoCode: promoValidationResponse?.orderPromos,
                 errorCode: promoValidationResponse?.errorCode,
+                additionalInfo: promoValidationResponse?.additionalInfo,
             };
         },
         removeItem(promo) {
@@ -181,6 +205,38 @@ export default {
                     getPromoCodeWithoutBundleIdentifier(lineItemsToKeep.promoCode) != promo
             );
         },
+        getErrorMessage(error, additionalInfo) {
+            switch (error) {
+                case promoErrorCodes.PROMO_STACKING_NOT_ALLOWED:
+                case promoErrorCodes.SIMILAR_PROMO_ALREADY_ON_ORDER:
+                    return additionalInfo.length === 1 &&
+                        additionalInfo[0] === this.promoCode.toUpperCase()
+                        ? (this.displaySimilarPromoAlert = true)
+                        : ((this.errorMessage = this.StackPromoText?.replace(
+                              /\{custom:(NEW|OLD)PROMOCODE\}/g,
+                              (match, group) =>
+                                  group === "NEW"
+                                      ? this.promoCode.toUpperCase()
+                                      : this.getConflictingPromoCode(additionalInfo)
+                          )),
+                          (this.displayStackingPromoAlert = true));
+                case promoErrorCodes.INVALID_PROMO_ON_ORDER:
+                    if (additionalInfo.some((x) => x.toUpperCase() === "APPOINTMENT_TYPE")) {
+                        this.errorMessage = this.InShopPromoText?.replaceAll(
+                            "{custom:INSHOPPROMOCODE}",
+                            this.promoCode.toUpperCase()
+                        );
+                        return (this.displayInShopPromoAlert = true);
+                    }
+                    break;
+                default:
+                    this.errorMessage = this.PromoText?.replaceAll(
+                        "{custom:PROMOCODE}",
+                        this.promoCode.toUpperCase()
+                    );
+                    return (this.displayInvalidPromoAlert = true);
+            }
+        },
         async addPromoCode() {
             if (this.promoCode) {
                 this.resetAlerts();
@@ -227,11 +283,7 @@ export default {
                     this.lineItems.vaps?.push(...getVaps);
                     this.closeModal();
                 } else {
-                    if (promoCodeData.errorCode == promoErrorCodes.PROMO_STACKING_NOT_ALLOWED) {
+                    this.getErrorMessage(promoCodeData.errorCode, promoCodeData.additionalInfo);
-                        this.displayInvalidOnOrderPromoAlert = true;
-                    } else {
-                        this.displayInvalidPromoAlert = true;
-                    }
                     this.focusOnPromoInput();
                     this.resetModalButtonStyle();
                 }
@@ -241,7 +293,9 @@ export default {
     watch: {
         promoCode() {
             this.displayInvalidPromoAlert = false;
-            this.displayInvalidOnOrderPromoAlert = false;
+            this.displayStackingPromoAlert = false;
+            this.displaySimilarPromoAlert = false;
+            this.displayInShopPromoAlert = false;
         },
         modelValue: {
             handler(newValue) {