From fa1472ad7e5c45d5dccb2d9707ba78a8d51fdf9d Mon Sep 17 00:00:00 2001
From: CarlNation <32103961+CarlNation@users.noreply.github.com>
Date: Thu, 19 Oct 2023 08:54:18 -0400
Subject: [PATCH] CSR-1390

add second hop style sheet
---
 public/css/hop-styling.css      | 336 ++++++++++++++++++++++++++++++++
 src/layouts/payment/payment.vue |   8 +-
 2 files changed, 342 insertions(+), 2 deletions(-)
 create mode 100644 public/css/hop-styling.css

diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css
new file mode 100644
index 000000000..c307731f6
--- /dev/null
+++ b/public/css/hop-styling.css
@@ -0,0 +1,336 @@
+.btn-group-lg > .btn {
+  padding: 10px 20px;
+  font-size: 20px;
+  line-height: 1.3;
+  border-radius: 5px;
+}
+.btn-group-sm > .btn {
+  padding: 3px 6px;
+  font-size: 13px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.btn-group-xs > .btn {
+  padding: 1px 5px;
+  font-size: 13px;
+  line-height: 1.5;
+  border-radius: 3px;
+}
+.dl-horizontal dd:before,
+.dl-horizontal dd:after,
+.container:before,
+.container:after,
+.container-fluid:before,
+.container-fluid:after,
+.row:before,
+.row:after,
+.form-horizontal .form-group:before,
+.form-horizontal .form-group:after,
+.btn-toolbar:before,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:before,
+.btn-group-vertical > .btn-group:after,
+.panel-body:before,
+.panel-body:after,
+.modal-footer:before,
+.modal-footer:after {
+  content: " ";
+  display: table;
+}
+.dl-horizontal dd:after,
+.container:after,
+.container-fluid:after,
+.row:after,
+.form-horizontal .form-group:after,
+.btn-toolbar:after,
+.btn-group-vertical > .btn-group:after,
+.panel-body:after,
+.modal-footer:after {
+  clear: both;
+}
+[data-icon]:before,
+[data-icon-after]:after,
+.ico:before {
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-transform: none !important;
+  font-weight: normal !important;
+  font-style: normal !important;
+  font-variant: normal !important;
+  font-size: 20px !important;
+  font-family: "safelite-ico" !important;
+  line-height: 20px !important;
+}
+html {
+  position: static !important;
+  height: auto !important;
+}
+html,
+body {
+  background-color: #ffffff !important;
+}
+body {
+  margin-bottom: 16px !important;
+}
+.headerlinecontainer {
+  color: #000000;
+  font-family: Roboto, Arial, "Helvetica Neue", Helvetica, Tahoma, Verdana, sans-serif;
+}
+.headerline1 {
+  display: block;
+  margin-bottom: 11.5px;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 30px;
+}
+.headerline2,
+.headerline3,
+.headerline4,
+.headerline5 {
+  margin-bottom: 11.5px;
+  font-size: 16px;
+}
+.headerline3 {
+  color: #0c7e47;
+}
+.headerline5 {
+  display: block;
+  padding: 11.5px 0;
+  color: #167cac;
+  font-style: italic;
+}
+.headerline5v2 {
+  display: block;
+  padding: 11.5px 0;
+  color: #da291c;
+  font-style: italic;
+  font-size: 12px;
+}
+.form-group {
+  margin-bottom: 10px;
+}
+.form-group .control-label {
+  display: block;
+  margin-bottom: 2px;
+}
+.form-group .form-control {
+  margin-bottom: 2px;
+}
+@media (min-width: 500px) {
+  .form-group {
+    width: 80%;
+  }
+}
+@media (min-width: 800px) {
+  .form-group {
+    width: 60%;
+  }
+}
+@media (min-width: 576px) {
+  #cardExpirationContainer .card_expirationMonth,
+  #cardExpirationContainer .card_expirationYear {
+    position: relative;
+    width: 49%;
+  }
+  #cardExpirationContainer .card_expirationMonth {
+    float: left;
+  }
+  #cardExpirationContainer .card_expirationYear {
+    float: right;
+  }
+}
+.totalContainer {
+  margin: 16px 0;
+  padding: 8px;
+  border-radius: 5px;
+  background-color: #0c7e47;
+  color: #ffffff;
+  font-size: 16px;
+}
+.totalContainer em {
+  font-weight: 500;
+}
+.totalContainer .strikeThrough {
+  padding-left: 8px;
+  text-decoration: line-through;
+  font-size: 14px;
+}
+.callerDisplayTextContainer {
+  margin: 16px 0;
+  font-style: italic;
+}
+.disclaimerContainer {
+  margin: 16px 0;
+  padding: 8px;
+  border-radius: 5px;
+  background-color: #f0f1f2;
+}
+.disclaimerContainerv2 {
+  margin: 16px 0;
+  border-radius: 5px;
+}
+.buttonContainer #sghopcancelbutton {
+  float: left;
+}
+.buttonContainer #sghopsubmitbutton {
+  float: right;
+}
+.buttonContainer #sghopsubmitbutton.creditCardSpecific {
+  float: right;
+}
+@media (max-width: 500px) {
+  .buttonContainer #sghopsubmitbutton.creditCardSpecific {
+    float: left;
+    width: 100%;
+  }
+}
+.buttonContainer #selectPaymentTypeButton {
+  float: right;
+}
+@media (max-width: 500px) {
+  .buttonContainer #selectPaymentTypeButton {
+    float: left;
+    width: 100%;
+  }
+}
+.globalMessage .message {
+  padding-left: 0;
+  line-height: 1.25;
+}
+.globalMessage .message strong {
+  color: #da291c;
+}
+.italicSmall {
+  font-weight: 300;
+  font-style: normal;
+  font-size: 15px;
+}
+#pageLoadingModal {
+  background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==");
+}
+#pageLoadingModal .modal-content {
+  margin-top: 100px;
+}
+#paypalParentDiv {
+  margin-bottom: 20px;
+}
+#creditCardParentDiv {
+  margin-bottom: 0;
+}
+.radio .list-group.paymentSelection,
+.radio.list-group.paymentSelection {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+@media (max-width: 33.9em) {
+  .radio .list-group.paymentSelection label,
+  .radio.list-group.paymentSelection label,
+  .radio .list-group.paymentSelection a,
+  .radio.list-group.paymentSelection a {
+    max-height: 52px;
+  }
+}
+#creditCardParentLink {
+  margin-bottom: 0;
+}
+@media (max-width: 33.9em) {
+  #creditCardParentLink {
+    min-height: 57px;
+  }
+}
+#creditCardImages,
+#paypalImageSpan {
+  padding-right: 0;
+}
+@media (max-width: 33.9em) {
+  .paymentOptionText {
+    padding-left: 5px;
+  }
+}
+.extraPaddingTop {
+  padding-top: 20px;
+}
+.extraPaddingBottom {
+  padding-bottom: 20px;
+}
+@media (min-width: 33.9em) {
+  #paypalImage {
+    max-width: 22%;
+  }
+}
+@media (max-width: 33.9em) {
+  #paypalImage {
+    max-width: 55px;
+  }
+}
+label.centerme {
+  position: inherit;
+  display: table-cell;
+  width: 9999px !important;
+  /*This is kind of a hack*/
+  vertical-align: middle;
+}
+input[name="rdioCreditCard"] {
+  display: block;
+}
+@media (min-width: 33.9em) {
+  input[name="rdioCreditCard"] {
+    margin-top: 10px;
+  }
+}
+@media (min-width: 33.9em) {
+  span.paymentOptionText {
+    margin-top: 6px;
+  }
+}
+.headerline1.safelitehop {
+  margin-top: 20px;
+}
+@media (max-width: 499px) {
+  #buttonContainer {
+    width: 100%;
+  }
+}
+.has-success .control-label {
+  color: #4d4e53;
+}
+#thm_fp {
+  display: block;
+}
+#paypalParentLink label,
+#creditCardParentLink label {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+#paypalParentLink label .paymentOptionText,
+#creditCardParentLink label .paymentOptionText {
+  padding-left: 20px;
+  text-align: left;
+}
+#paypalParentLink {
+  margin-top: 12px;
+}
+html #creditCardParentLink.list-group-item {
+  border-radius: 48px;
+  text-align: center;
+}
+.optional-label span {
+  display: none;
+}
+.optional-label::after {
+  content: " (optional)";
+  font-weight: 300;
+  font-style: normal;
+  font-size: 15px;
+}
+.creditCardSpecific {
+  display: none;
+}
+@media (max-width: 500px) {
+  .buy-backdrop.afterpay-checkout-wrapper {
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+  }
+}
\ No newline at end of file
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 81c298d11..d6a6394fe 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -56,7 +56,7 @@
 
         <input type="hidden" name="maskCharacter" value="*" />
         <input type="hidden" name="styleSheetCode" :value="dynamicCSSUrl" />
-        <input type="hidden" name="styleSheetCode2" :value="dynamicCSSUrl" />
+        <input type="hidden" name="styleSheetCode2" :value="dynamicHopCSSUrl" />
 
         <input type="hidden" name="sgReceiptResponseURL" :value="piaResponseUrl" />
         <input type="hidden" name="sgDeclineResponseURL" :value="piaResponseUrl" />
@@ -229,7 +229,11 @@ export default {
     computed: {
         dynamicCSSUrl() {
             const { protocol, hostname, port } = window.location;
-            return `${protocol}//${hostname}:${port}/css/site-2020Styling.css`;
+            return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
+        },
+        dynamicHopCSSUrl() {
+            const { protocol, hostname, port } = window.location;
+            return `${protocol}//${hostname}:${port}/fmg/css/hop-styling.css`;
         },
     },
     methods: {