CASH-203: UI Updates for Afterpay breakout with service package discounts

src/experiment-components/service-package-radio-for-afterpay.vue

@@ -5,6 +5,7 @@
             :class="[
                 this.buttonLabelSubCopy ? 'has-subheader' : '',
                 this.additionalButtonData.isInsuranceSelected ? 'is-insurance' : '',
+                this.hasPackageDiscount() ? 'has-package-discount' : '',
             ]"
             for="testradio">
             <div class="package-specs">
@@ -55,10 +56,7 @@
                 </div>
 
                 <div
-                    v-if="
+                    v-if="hasPackageDiscount()"
-                        this.additionalButtonData.servicePackageDiscount &&
-                        this.additionalButtonData.Text
-                    "
                     class="special-save-box">
                     <span v-html="this.additionalButtonData.Text"></span>
                 </div>
@@ -144,6 +142,10 @@ export default {
         truncatedSinglePayment() {
             return "$" + Math.trunc(this.buttonAuxillaryCopy.replace("$", ""));
         },
+        hasPackageDiscount() {
+            return this.additionalButtonData.servicePackageDiscount &&
+            this.additionalButtonData.Text;
+        },
     },
 };
 </script>
@@ -212,11 +214,6 @@ export default {
                 }
 
                 &.has-subheader {
-                    min-height: 150px;
-
-                    &.is-insurance {
-                        min-height: 72px;
-                    }
 
                     & > .package-specs {
                         & > div:first-of-type {
@@ -225,6 +222,10 @@ export default {
                     }
                 }
 
+                &.has-package-discount {
+                    min-height: 150px;
+                }
+
                 &:before {
                     content: "";
                     position: relative;