CSR-2130

CSR-2130 more style updates and save the payment method type once we know what it is after being selected on the hop page

public/css/hop-styling.css

@@ -203,3 +203,107 @@ body .cc-error-container #alert-message {
   background-color: #fcbfbb;
   border: 1px solid #d4281c;
 }
+
+#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
+  border-radius: 5px;
+}
+#fmg-checkout-shared .form-group .list-group.radio .list-group-item label {
+  padding: 12px 20px;
+}
+#fmg-checkout-shared #applepay-and-paypal-container {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+}
+#fmg-checkout-shared #applepay-and-paypal-container #paypalParentDiv {
+  padding-left: 10px;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group {
+  margin: 0;
+  width: 100%;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink {
+  margin: 0;
+  padding: 10px 0;
+  background-color: #000000;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label {
+  padding: 0;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label apple-pay-button {
+  vertical-align: middle;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink.list-group-item {
+  border-radius: 100px;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
+  margin: 0;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
+  max-width: 40%;
+}
+#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink.list-group-item {
+  border-radius: 100px;
+}
+#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group {
+  width: 100%;
+}
+#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group#applepayParentDiv {
+  display: none;
+}
+#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group.paymentSelection {
+  width: 100%;
+}
+#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group #paypalParentLink #paypalImage {
+  max-width: 20%;
+}
+#fmg-checkout-shared #other-payments-container label {
+  display: inline-flex;
+  text-align: left;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
+  margin: auto 0;
+  padding-left: 0;
+}
+#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
+  width: 100%;
+}
+#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
+  width: 0;
+}
+#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
+  padding-bottom: 10px;
+  border: 1px solid #0070D1;
+  border-radius: 5px;
+}
+#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
+  border-bottom-color: #0070D1;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
+  width: 50%;
+  text-align: right;
+}
+#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
+  width: 20%;
+}
+#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
+  padding: 0 2%;
+}
+#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
+  width: 100%;
+}
+#fmg-checkout-shared #other-payments-container .italicSmall {
+  margin-top: 10px;
+}
+@media only screen and (max-device-width: 767px) {
+  #fmg-checkout-shared #applepay-and-paypal-container {
+    width: 100%;
+  }
+  #fmg-checkout-shared #other-payments-container > .form-group {
+    width: 100%;
+  }
+}

public/css/site-2020Styling.css

@@ -181,19 +181,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
   right: 15px;
 }
 
-#fmg-checkout-shared #other-payments-container label {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  text-align: left;
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-}
-
 .form-group {
   margin-bottom: 10px;
 }
@@ -217,103 +204,6 @@ html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
     width: 60%;
   }
 }
-#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
-  border-radius: 5px;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container {
-  display: inline-flex;
-  width: 100%;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container .form-group {
-  margin: 0;
-  width: 100%;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection {
-  width: 95%;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
-  margin: 0;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
-  max-width: 35%;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container.no-applepay #applepayParentDiv {
-  display: none;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group.paymentSelection {
-  width: 100%;
-}
-
-#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group #paypalParentLink #paypalImage {
-  max-width: 25%;
-}
-
-#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
-  margin: auto 0;
-  padding-left: 0;
-}
-
-#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
-  width: 100%;
-}
-
-#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
-  width: 0;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv {
-  padding-bottom: 10px;
-  border-radius: 5px;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
-  border-bottom-color: #0070d1;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
-  padding-bottom: 10px;
-  border: 1px solid #0070d1;
-  border-radius: 5px;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
-  width: 50%;
-  text-align: right;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
-  width: 20%;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
-  padding: 0 2%;
-}
-
-#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
-  width: 100%;
-}
-
-#fmg-checkout-shared #other-payments-container .italicSmall {
-  margin-top: 10px;
-}
-
-@media only screen and (max-device-width: 767px) {
-  #fmg-checkout-shared #applepay-and-paypal-container {
-    width: 100%;
-  }
-  #fmg-checkout-shared #other-payments-container > .form-group {
-    width: 100%;
-  }
-}
 .list-group {
   margin-bottom: 20px;
   padding-left: 0;
@@ -602,10 +492,6 @@ img {
   text-align: left;
 }
 
-#paypalParentLink {
-  margin-top: 12px;
-}
-
 html #creditCardParentLink.list-group-item {
   border-radius: 48px;
   text-align: center;

public/scss/hop-styling.scss

@@ -221,3 +221,175 @@ body {
         }
     }
 }
+
+#fmg-checkout-shared {
+	.form-group {
+		.list-group {
+			&.radio {
+				.list-group-item {
+					border-radius: 5px;
+
+					label {
+						padding: 12px 20px;
+					}
+				}
+			}
+		}
+	}
+
+	#applepay-and-paypal-container {
+		display: inline-flex;
+		width: 100%;
+
+		justify-content: space-between;
+
+        #paypalParentDiv {
+            padding-left: 10px;
+        }
+
+		.form-group {
+			margin: 0;
+			width: 100%;
+
+			.list-group {
+				&.paymentSelection {
+
+					#applepayParentLink {
+						margin: 0;
+						padding: 10px 0;
+						background-color: #000000;
+
+						label {
+							padding: 0;
+
+							apple-pay-button {
+								vertical-align: middle;
+							}
+						}
+
+                        &.list-group-item {
+                            border-radius: 100px;
+                        }
+					}
+				}
+
+				#paypalParentLink {
+					margin: 0;
+
+					#paypalImage {
+						max-width: 40%;
+					}
+
+                    &.list-group-item {
+                        border-radius: 100px;
+                    }
+				}
+			}
+		}
+
+		&.no-applepay {
+			.form-group {
+				width: 100%;
+
+				&#applepayParentDiv {
+					display: none;
+				}
+
+				.list-group {
+					&.paymentSelection {
+						width: 100%;
+					}
+
+					#paypalParentLink {
+
+						#paypalImage {
+							max-width: 20%;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	#other-payments-container {
+		label {
+			display: inline-flex;
+			text-align: left;
+
+			align-items: flex-start;
+			justify-content: space-between;
+
+			span {
+				&.paymentOptionText {
+					margin: auto 0;
+					padding-left: 0;
+				}
+			}
+		}
+
+		#afterpayParentLink {
+			label {
+				> span {
+					&:first-of-type {
+						width: 100%;
+					}
+
+					&:last-of-type {
+						width: 0;
+					}
+				}
+			}
+		}
+
+		#creditCardParentDiv {
+			&.active {
+				padding-bottom: 10px;
+				border: 1px solid #0070D1;
+				border-radius: 5px;
+
+				> .paymentSelection {
+					#creditCardParentLink {
+						border-bottom-color: #0070D1;
+						border-bottom-right-radius: 0;
+						border-bottom-left-radius: 0;
+					}
+				}
+			}
+
+			.paymentSelection {
+				#creditCardImages {
+					width: 50%;
+					text-align: right;
+
+					> img {
+						width: 20%;
+					}
+				}
+			}
+
+			.creditCardSpecific {
+				padding: 0 2%;
+
+				> .form-group {
+					width: 100%;
+				}
+			}
+		}
+
+		.italicSmall {
+			margin-top: 10px;
+		}
+	}
+
+	@media only screen and (max-device-width: 767px) {
+		#applepay-and-paypal-container {
+			width: 100%;
+		}
+
+		#other-payments-container {
+			> .form-group {
+				width: 100%;
+			}
+		}
+	}
+}

public/scss/site-2020Styling.scss

@@ -175,19 +175,6 @@
     right: 15px;
   }
     
-  #fmg-checkout-shared #other-payments-container label {
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
-    text-align: left;
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-    align-items: flex-start;
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-  }
-  
   .form-group {
     margin-bottom: 10px;
   }
@@ -212,84 +199,6 @@
     }
   }
   
-  #fmg-checkout-shared .form-group .list-group.radio .list-group-item {
-    border-radius: 5px;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container {
-    display: inline-flex;
-    width: 100%;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container .form-group {
-    margin: 0;
-    width: 100%;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection {
-    width: 95%;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
-    margin: 0;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
-    max-width: 35%;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container.no-applepay #applepayParentDiv {
-    display: none;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group.paymentSelection {
-    width: 100%;
-  }
-  #fmg-checkout-shared #applepay-and-paypal-container.no-applepay .list-group #paypalParentLink #paypalImage {
-    max-width: 25%;
-  }
-  #fmg-checkout-shared #other-payments-container label span.paymentOptionText {
-    margin: auto 0;
-    padding-left: 0;
-  }
-  #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
-    width: 100%;
-  }
-  #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
-    width: 0;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv {
-    padding-bottom: 10px;
-    border-radius: 5px;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
-    border-bottom-color: #0070d1;
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
-    padding-bottom: 10px;
-    border: 1px solid #0070d1;
-    border-radius: 5px;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
-    width: 50%;
-    text-align: right;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
-    width: 20%;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
-    padding: 0 2%;
-  }
-  #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
-    width: 100%;
-  }
-  #fmg-checkout-shared #other-payments-container .italicSmall {
-    margin-top: 10px;
-  }
-  @media only screen and (max-device-width: 767px) {
-    #fmg-checkout-shared #applepay-and-paypal-container {
-      width: 100%;
-    }
-    #fmg-checkout-shared #other-payments-container > .form-group {
-      width: 100%;
-    }
-  }
-  
   .list-group {
     margin-bottom: 20px;
     padding-left: 0;
@@ -545,9 +454,7 @@ img {
   padding-left: 20px;
   text-align: left;
 }
-#paypalParentLink {
+
-  margin-top: 12px;
-}
 html #creditCardParentLink.list-group-item {
   border-radius: 48px;
   text-align: center;

src/layouts/payment-pia-return/payment-pia-return.vue

@@ -58,6 +58,12 @@ export default {
             return true;
         },
         async processPaypalResponse() {
+            await this.dispatchStoreAction(
+                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+                paymentMethods.PAYPAL,
+                false
+            );
+            
             const token = getQuerystringParameter(queryStrings.TOKEN);
             const payerId = getQuerystringParameter(queryStrings.PAYERID);
 
@@ -71,6 +77,12 @@ export default {
             await this.saveAndSubmitWorkOrder();
         },
         async processCreditCardResponse() {
+            await this.dispatchStoreAction(
+                storeActions.SAVE_PAYMENT_METHOD_CHOICE,
+                paymentMethods.CREDIT_CARD,
+                false
+            );
+
             const subscriptionID = getQuerystringParameter(queryStrings.SUBSCRIPTIONID);
 
             const referralSeqNum = getQuerystringParameter(queryStrings.REFERRAL_SEQ_NUM);