CASH-1403: Payment parity changes

public/css/hop-styling.css

@@ -18,7 +18,7 @@ body .validation-info {
   display: none;
 }
 body .italicSmall {
-  font-style: normal;
+  font-style: italic;
   font-size: 14px;
 }
 body span {
@@ -153,13 +153,13 @@ body .buttonContainer button {
   }
 }
 body .buttonContainer button:focus {
-  box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+  box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
 }
 body .buttonContainer button:focus, body .buttonContainer button:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+  box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
   color: #fff;
-  background: linear-gradient(270deg, rgb(6, 87, 124) 0%, rgb(6, 87, 124) 100%);
+  background: #db0020;
 }
 body .buttonContainer button:disabled {
   background: #e3e4e4 !important;
@@ -274,7 +274,7 @@ body .cc-error-container #alert-message {
 #fmg-checkout-shared #other-payments-container label span.paymentOptionText {
   margin: auto 0;
   padding-left: 0;
-  font-weight: 400;
+  font-weight: 600;
 }
 #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
   width: 100%;
@@ -297,7 +297,7 @@ body .cc-error-container #alert-message {
   text-align: right;
 }
 #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
-  width: 20%;
+  width: 12%;
 }
 #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
   padding: 0 2%;
@@ -309,11 +309,13 @@ body .cc-error-container #alert-message {
   margin-top: 24px;
   margin-bottom: 24px;
   font-size: 14px;
+  font-weight: 600;
   color: #525656;
 }
 #fmg-checkout-shared #other-payments-container .disclaimerContainerv2 {
   margin-bottom: 24px;
   font-size: 14px;
+  font-weight: 600;
   color: #525656;
 }
 @media only screen and (max-device-width: 767px) {

public/scss/hop-styling.scss

@@ -20,7 +20,7 @@ body {
     }
 
     .italicSmall {
-        font-style: normal;
+        font-style: italic;
         font-size: 14px;
     }
 
@@ -161,15 +161,15 @@ body {
                 cursor: pointer;
             }
             &:focus {
-                box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
             }
             &:focus, // Mouse, touch, stylus focus
             &:focus-visible {
                 // Keyboard focus for accessibility
                 outline: none;
-                box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
+                box-shadow: 0 0 0 3px, 0 0 0 5.5px #db0020;
                 color: #fff;
-                background: linear-gradient(270deg, rgba(6, 87, 124, 1) 0%, rgba(6, 87, 124, 1) 100%);
+                background: #db0020;
             }
             &:disabled {
                 background: #e3e4e4 !important;
@@ -332,7 +332,7 @@ body {
 				&.paymentOptionText {
 					margin: auto 0;
 					padding-left: 0;
-                    font-weight: 400;
+                    font-weight: 600;
 				}
 			}
 		}
@@ -372,7 +372,7 @@ body {
 					text-align: right;
 
 					> img {
-						width: 20%;
+						width: 12%;
 					}
 				}
 			}
@@ -390,12 +390,14 @@ body {
 			margin-top: 24px;
             margin-bottom: 24px;
             font-size: 14px;
+            font-weight: 600;
             color: #525656;
 		}
 
         .disclaimerContainerv2 {
             margin-bottom: 24px;
             font-size: 14px;
+            font-weight: 600;
             color: #525656;
         }
 	}

src/layouts/payment/payment.vue

@@ -4,7 +4,7 @@
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container">
             <div class="row">
-                <div class="col-12 col-md-10 col-lg-8 col-xl-7">
+                <div class="col-12">
                     <div>
                         <alert
                             ref="piaCCErrorAlert"
@@ -37,45 +37,51 @@
                             seamless
                             scrolling="no"
                             allow="payment *; microphone *; geolocation *;"></iframe>
+
+                        <div id="cart-container">
+                            <cart
+                                ref="cart"
+                                :damage="damageInfo"
+                                :availableVaps="availableVaps"
+                                :allowItemRemoval="false"
+                                v-model="lineItems"
+                                servicePackageOptionsCmsName="ServicePackageTitle"
+                                recyclingModalCmsWidgetName="RecycleModal"
+                                :isInsurance="isInsurance"
+                                :insuranceDeductible="currentDeductible"
+                                :insuranceCompanyName="insuranceCompanyName"
+                                :showInsuranceCoverageAs="showInsuranceCoverageAs"
+                                :isItac="isItac"
+                                :isNoComp="isNoComp"
+                                :isExpandedOnLoad="true" />
+
+                            <button
+                                v-if="showSwitchPaymentMethod"
+                                id="submit-payment"
+                                class="btn btn-primary rounded-pill py-3 px-6 delay w-100"
+                                type="button"
+                                @click="submitPayment">
+                                Submit payment
+                            </button>
+
+                            <div class="payment-method-question">
+                                <buttonQuestion
+                                    v-if="showSwitchPaymentMethod"
+                                    groupName="payment-method"
+                                    buttonTypeString="payment-method-list-button"
+                                    :buttonTypeObject="paymentMethodListButton"
+                                    isWide
+                                    :questionText="paymentMethodQuestionText"
+                                    :answers="paymentMethodAnswerData"
+                                    isRequired
+                                    :validationRules="validationRules"
+                                    :showApplePay="false"
+                                    :isInsurance="isInsurance"
+                                    v-model="switchedPaymentMethod" />
+                            </div>
+                        </div>
                     </div>
 
-                    <hr />
-
-                    <cart
-                        ref="cart"
-                        :damage="damageInfo"
-                        :availableVaps="availableVaps"
-                        :allowItemRemoval="false"
-                        v-model="lineItems"
-                        servicePackageOptionsCmsName="ServicePackageTitle"
-                        recyclingModalCmsWidgetName="RecycleModal"
-                        :isInsurance="isInsurance"
-                        :insuranceDeductible="currentDeductible"
-                        :insuranceCompanyName="insuranceCompanyName"
-                        :showInsuranceCoverageAs="showInsuranceCoverageAs"
-                        :isItac="isItac"
-                        :isNoComp="isNoComp"
-                        :isExpandedOnLoad="true" />
-
-                    <div class="payment-method-question">
-                        <buttonQuestion
-                            v-if="showSwitchPaymentMethod"
-                            groupName="payment-method"
-                            buttonTypeString="payment-method-list-button"
-                            :buttonTypeObject="paymentMethodListButton"
-                            isWide
-                            :questionText="paymentMethodQuestionText"
-                            :answers="paymentMethodAnswerData"
-                            isRequired
-                            :validationRules="validationRules"
-                            :showApplePay="false"
-                            :isInsurance="isInsurance"
-                            v-model="switchedPaymentMethod"
-                            textPosition="text-start" />
-                    </div>
-
-                    <hr class="mb-5" />
-
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         isForwardActionDisabled="true"
@@ -889,6 +895,12 @@ export default {
             }
             return false;
         },
+        submitPayment() {
+            const iframe = this.$refs.paymentFrame;
+            if (iframe) {
+                iframe.contentWindow.postMessage("submitPayment", "*");
+            }
+        },
     },
     components: {
         funnelHeader,
@@ -904,18 +916,48 @@ export default {
 <style lang="scss">
 .hop-iframe {
     position: relative;
-    min-height: 650px;
     width: 100%;
+    min-height: 650px;
     border: 0 none;
+
+    @include media-breakpoint-down(lg) {
+        min-height: 1688px;
+    }
 }
 #pageLoadingModal {
     background-color: red;
 }
 
+#card-container {
+    display: flex;
+    & > iframe {
+        flex-basis: 55%;
+        margin-right: 9%;
+    }
+    & > #cart-container {
+        flex-basis: 36%;
+    }
+
+    @include media-breakpoint-down(lg) {
+        flex-direction: column;
+        & > iframe {
+            flex-basis: 100%;
+            margin-right: 0;
+        }
+        & > #cart-container {
+            flex-basis: 100%;
+
+            & > button#submit-payment {
+                display: none;
+            }
+        }
+    }
+}
 .payment-method-question {
-    padding: 0 1.5rem;
+    padding: 0;
-    .question-text span {
+
-        text-align: left;
+    & .list-button-content {
+        justify-content: center;
     }
 }