Merge pull request #1899 from Safelite/feature/CSR-2130

Feature/csr 2130

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

@@ -108,6 +108,9 @@ describe("Payment Method Question", () => {
 function generateDefaultProps() {
     return {
         modelValue: "modelValue",
+        hasRecal: false,
+        isApplePay: true,
+        isInsurance: false,
     };
 }
 

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

@@ -10,6 +10,8 @@
             isRequired
             :validationRules="validationRules"
             :hasRecal="hasRecal"
+            :isApplePay="isApplePay"
+            :isInsurance="isInsurance"
             v-model="selectedMethod"
             textPosition="text-start" />
     </div>
@@ -31,6 +33,8 @@ export default {
         modelValue: String,
         validationRules: String,
         hasRecal: Boolean,
+        isApplePay: Boolean,
+        isInsurance: Boolean,
     },
     methods: {
         getAnswersNullSafe(widgetName) {
@@ -60,8 +64,27 @@ export default {
             if (this.hasRecal) {
                 cmsData = this.getAnswersNullSafe("PaymentMethodHasRecalWidget");
             } else {
-                cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
+                if (this.isApplePay) {
+                    cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
+                } else {
+                    cmsData = this.getAnswersNullSafe("PaymentMethodHasRecalWidget");
+                }
             }
+
+            if (this.hasRecal || this.isInsurance) {
+                var tempItems = cmsData.map((answer) => {
+                    return {
+                        buttonLabel: answer.Text,
+                        altText: answer.Text,
+                        groupName: "payment-method",
+                        value: answer.Name,
+                        buttonImage: answer.AnswerImageUrl,
+                    };
+                });
+
+                return tempItems.filter((a) => a.value != "Insurance");
+            }
+
             return cmsData.map((answer) => {
                 return {
                     buttonLabel: answer.Text,

src/layouts/payment-method/payment-method.vue

@@ -68,6 +68,8 @@
                         v-if="isPiaEnabled && totalAmountDue > 0"
                         v-model="paymentMethodInternalModel"
                         :hasRecal="hasRecal"
+                        :isApplePay="isApplePay"
+                        :isInsurance="isInsurance"
                         validationRules="payment-method-required" />
 
                     <alert
@@ -344,7 +346,6 @@ export default {
             availableVaps: [],
             paymentMethodInternalModel: this.getPaymentMethodFromStore(),
             inactivePromos: this.getInactivePromosFromStore(),
-            isAppleDevice: false,
             isRecalAckOptIn: false,
         };
     },
@@ -574,6 +575,12 @@ export default {
             }
             return false;
         },
+        isApplePay() {
+            if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
+                return true;
+            }
+            return false;
+        },
         damageInfo() {
             return this.$store.getters.damage;
         },