Merge pull request #585 from Safelite/feature/richardson/SSR-1100.2

display error message on failure

src/layouts/payment-page/payment-page.spec.js

@@ -468,4 +468,21 @@ describe('payment-page.vue', () => {
             expect(creditCardErrorAlert.isVisible()).toBeTruthy();
         });
     });
+
+    describe('AfterPay Error Alert', () => {
+        test('show after pay error alert', () => {
+            // Arrange
+            const queryString = {
+                [queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethods.AFTERPAY
+            };
+            const wrapper = setupMocks({ queryString });
+
+            // Act
+
+            // Assert
+            const afterPayErrorAlert = wrapper.find('[name="payInAdvanceAfterPayErrorAlert"]');
+            expect(afterPayErrorAlert.exists()).toBeTruthy();
+            expect(afterPayErrorAlert.isVisible()).toBeTruthy();
+        });
+    });
 });

src/layouts/payment-page/payment-page.vue

@@ -12,6 +12,14 @@
                         alertClass="alert-danger"
                         :isDismissible="false"
                         @textLinkClicked="paymentFailedPayLater" />
+                    <alert
+                        v-if="displayPayInAdvanceAfterPayAlert"
+                        name="payInAdvanceAfterPayErrorAlert"
+                        class="my-4"
+                        cmsWidgetName="PayInAdvanceAfterpayErrorAlertWidget"
+                        alertClass="alert-danger"
+                        :isDismissible="false"
+                        @textLinkClicked="paymentFailedPayLater" />
 
                     <div id="card-container">
                         <iframe
@@ -537,6 +545,9 @@ export default {
         },
         displayPayInAdvanceCreditCardAlert() {
             return this.displayPayInAdvanceAlert(paymentMethods.CREDIT_CARD);
+        },
+        displayPayInAdvanceAfterPayAlert() {
+            return this.displayPayInAdvanceAlert(paymentMethods.AFTERPAY);
         }
     },
     methods: