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

Feature/csr 2130

public/css/hop-styling.css

@@ -210,6 +210,9 @@ body .cc-error-container #alert-message {
 #fmg-checkout-shared .form-group .list-group.radio .list-group-item label {
   padding: 12px 20px;
 }
+#fmg-checkout-shared #afterpayParentDiv {
+  display: none;
+}
 #fmg-checkout-shared #applepay-and-paypal-container {
   display: inline-flex;
   width: 100%;

public/scss/hop-styling.scss

@@ -237,6 +237,10 @@ body {
 		}
 	}
 
+    #afterpayParentDiv {
+        display: none;
+    }
+
 	#applepay-and-paypal-container {
 		display: inline-flex;
 		width: 100%;

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

@@ -9,6 +9,7 @@
             :answers="paymentMethodAnswerData"
             isRequired
             :validationRules="validationRules"
+            :hasRecal="hasRecal"
             v-model="selectedMethod"
             textPosition="text-start" />
     </div>
@@ -29,6 +30,7 @@ export default {
     props: {
         modelValue: String,
         validationRules: String,
+        hasRecal: Boolean,
     },
     methods: {
         getAnswersNullSafe(widgetName) {
@@ -54,8 +56,12 @@ export default {
             return this.getCmsContent("PaymentMethodWidget", "QuestionText");
         },
         paymentMethodAnswerData() {
-            const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
-
+            var cmsData;
+            if (this.hasRecal) {
+                cmsData = this.getAnswersNullSafe("PaymentMethodHasRecalWidget");
+            } else {
+                cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
+            }
             return cmsData.map((answer) => {
                 return {
                     buttonLabel: answer.Text,

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

@@ -67,6 +67,7 @@
                     <paymentMethodQuestion
                         v-if="isPiaEnabled && totalAmountDue > 0"
                         v-model="paymentMethodInternalModel"
+                        :hasRecal="hasRecal"
                         validationRules="payment-method-required" />
 
                     <alert