Merge pull request #1895 from Safelite/feature/CSR-2130
Feature/csr 2130
This commit is contained in:
CarlNation
GitHub
commit
69df292e80
13 changed files with 1019 additions and 23 deletions
|
|
@ -11,3 +11,9 @@ sass --watch scss:css
|
|||
This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
|
||||
|
||||
# Do not use the .css files on their own. You must use the .scss files and have Sass compile them to .css files.
|
||||
|
||||
From a windows machine, I ran an install for sass even though it is listed in node_modules. It would not run unless I did an install:
|
||||
npm install -g sass
|
||||
sass --no-source-map --watch scss:css
|
||||
|
||||
Then committed the css files and reverted the package.json file so I didn't commit an upgraded version of sass
|
||||
|
|
@ -112,3 +112,514 @@
|
|||
.creditCardSpecific {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item .checkbox .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .checkbox.list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group .list-group-item label {
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.list-group.radio .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.list-group.radio .list-group-item .radio .list-group,
|
||||
.list-group.radio .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item {
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item input[type=radio] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.row > .form-group > .glyphicon {
|
||||
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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.list-group-item:first-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
a.list-group-item {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
a.list-group-item .list-group-item-heading {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
a.list-group-item:hover,
|
||||
a.list-group-item:focus {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.list-group-item.disabled,
|
||||
.list-group-item.disabled:hover,
|
||||
.list-group-item.disabled:focus {
|
||||
background-color: #f0f1f2;
|
||||
color: #9aa1a3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.list-group-item.disabled .list-group-item-heading,
|
||||
.list-group-item.disabled:hover .list-group-item-heading,
|
||||
.list-group-item.disabled:focus .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.list-group-item.disabled .list-group-item-text,
|
||||
.list-group-item.disabled:hover .list-group-item-text,
|
||||
.list-group-item.disabled:focus .list-group-item-text {
|
||||
color: #9aa1a3;
|
||||
}
|
||||
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
z-index: 2;
|
||||
color: #ffffff;
|
||||
background-color: #167cac;
|
||||
border-color: #167cac;
|
||||
}
|
||||
|
||||
.list-group-item.active .list-group-item-heading,
|
||||
.list-group-item.active:hover .list-group-item-heading,
|
||||
.list-group-item.active:focus .list-group-item-heading,
|
||||
.list-group-item.active .list-group-item-heading > small,
|
||||
.list-group-item.active:hover .list-group-item-heading > small,
|
||||
.list-group-item.active:focus .list-group-item-heading > small,
|
||||
.list-group-item.active .list-group-item-heading > .small,
|
||||
.list-group-item.active:hover .list-group-item-heading > .small,
|
||||
.list-group-item.active:focus .list-group-item-heading > .small {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.list-group-item.active .list-group-item-text,
|
||||
.list-group-item.active:hover .list-group-item-text,
|
||||
.list-group-item.active:focus .list-group-item-text {
|
||||
color: #9cd7f2;
|
||||
}
|
||||
|
||||
.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
background-color: #e6f2ec;
|
||||
}
|
||||
|
||||
a.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
}
|
||||
|
||||
a.list-group-item-success .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-success:hover,
|
||||
a.list-group-item-success:focus {
|
||||
color: #cacbcc;
|
||||
background-color: #d5e9df;
|
||||
}
|
||||
|
||||
a.list-group-item-success.active,
|
||||
a.list-group-item-success.active:hover,
|
||||
a.list-group-item-success.active:focus {
|
||||
color: #fff;
|
||||
background-color: #cacbcc;
|
||||
border-color: #cacbcc;
|
||||
}
|
||||
|
||||
.list-group-item-info {
|
||||
color: #125b7e;
|
||||
background-color: #e7f1f6;
|
||||
}
|
||||
|
||||
a.list-group-item-info {
|
||||
color: #125b7e;
|
||||
}
|
||||
|
||||
a.list-group-item-info .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-info:hover,
|
||||
a.list-group-item-info:focus {
|
||||
color: #125b7e;
|
||||
background-color: #d4e6ef;
|
||||
}
|
||||
|
||||
a.list-group-item-info.active,
|
||||
a.list-group-item-info.active:hover,
|
||||
a.list-group-item-info.active:focus {
|
||||
color: #fff;
|
||||
background-color: #125b7e;
|
||||
border-color: #125b7e;
|
||||
}
|
||||
|
||||
.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
background-color: #fef6e8;
|
||||
}
|
||||
|
||||
a.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
}
|
||||
|
||||
a.list-group-item-warning .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-warning:hover,
|
||||
a.list-group-item-warning:focus {
|
||||
color: #f8af1c;
|
||||
background-color: #fdecd0;
|
||||
}
|
||||
|
||||
a.list-group-item-warning.active,
|
||||
a.list-group-item-warning.active:hover,
|
||||
a.list-group-item-warning.active:focus {
|
||||
color: #fff;
|
||||
background-color: #f8af1c;
|
||||
border-color: #f8af1c;
|
||||
}
|
||||
|
||||
.list-group-item-danger {
|
||||
color: #da291c;
|
||||
background-color: #fbe9e8;
|
||||
}
|
||||
|
||||
a.list-group-item-danger {
|
||||
color: #da291c;
|
||||
}
|
||||
|
||||
a.list-group-item-danger .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-danger:hover,
|
||||
a.list-group-item-danger:focus {
|
||||
color: #da291c;
|
||||
background-color: #f7d4d2;
|
||||
}
|
||||
|
||||
a.list-group-item-danger.active,
|
||||
a.list-group-item-danger.active:hover,
|
||||
a.list-group-item-danger.active:focus {
|
||||
color: #fff;
|
||||
background-color: #da291c;
|
||||
border-color: #da291c;
|
||||
}
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.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 a, .radio.list-group.paymentSelection label, .radio.list-group.paymentSelection a {
|
||||
max-height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.checkbox.list-group,
|
||||
.checkbox.list-group,
|
||||
.radio.list-group,
|
||||
.radio.list-group {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item > label,
|
||||
.form-group.radio .list-group .list-group-item > label,
|
||||
.checkbox.list-group .list-group-item > label,
|
||||
.radio.list-group .list-group-item > label {
|
||||
margin-bottom: initial;
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
padding: 12px 27px 12px 33px;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item,
|
||||
.form-group.radio .list-group .list-group-item,
|
||||
.checkbox.list-group .list-group-item,
|
||||
.radio.list-group .list-group-item {
|
||||
margin-bottom: 12px;
|
||||
border-width: 1px;
|
||||
/* border-color: #cacbcc; */
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item.active,
|
||||
.form-group.radio .list-group .list-group-item.active,
|
||||
.checkbox.list-group .list-group-item.active,
|
||||
.radio.list-group .list-group-item.active {
|
||||
background-color: #e7f1f6;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
min-height: 23px;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#paypalParentLink label,
|
||||
#afterpayParentLink 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;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
window.dataLayer = [{}];
|
||||
</script>
|
||||
<script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
|
||||
<script src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"></script>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
|
|
|
|||
|
|
@ -220,5 +220,4 @@ body {
|
|||
border: 1px solid #d4281c;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -116,3 +116,453 @@
|
|||
.creditCardSpecific {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
.form-group.radio .list-group .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
.form-group.radio .list-group .list-group-item .checkbox .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .checkbox.list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group .list-group-item label {
|
||||
padding-left: 55px;
|
||||
}
|
||||
.list-group.radio .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.list-group.radio .list-group-item .radio .list-group,
|
||||
.list-group.radio .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item {
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
}
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item input[type="radio"] {
|
||||
visibility: visible;
|
||||
}
|
||||
html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
|
||||
border-radius: 48px;
|
||||
}
|
||||
.row > .form-group > .glyphicon {
|
||||
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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.list-group-item:first-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.list-group-item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
a.list-group-item {
|
||||
color: #555555;
|
||||
}
|
||||
a.list-group-item .list-group-item-heading {
|
||||
color: #333333;
|
||||
}
|
||||
a.list-group-item:hover,
|
||||
a.list-group-item:focus {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.list-group-item.disabled,
|
||||
.list-group-item.disabled:hover,
|
||||
.list-group-item.disabled:focus {
|
||||
background-color: #f0f1f2;
|
||||
color: #9aa1a3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.list-group-item.disabled .list-group-item-heading,
|
||||
.list-group-item.disabled:hover .list-group-item-heading,
|
||||
.list-group-item.disabled:focus .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item.disabled .list-group-item-text,
|
||||
.list-group-item.disabled:hover .list-group-item-text,
|
||||
.list-group-item.disabled:focus .list-group-item-text {
|
||||
color: #9aa1a3;
|
||||
}
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
z-index: 2;
|
||||
color: #ffffff;
|
||||
background-color: #167cac;
|
||||
border-color: #167cac;
|
||||
}
|
||||
.list-group-item.active .list-group-item-heading,
|
||||
.list-group-item.active:hover .list-group-item-heading,
|
||||
.list-group-item.active:focus .list-group-item-heading,
|
||||
.list-group-item.active .list-group-item-heading > small,
|
||||
.list-group-item.active:hover .list-group-item-heading > small,
|
||||
.list-group-item.active:focus .list-group-item-heading > small,
|
||||
.list-group-item.active .list-group-item-heading > .small,
|
||||
.list-group-item.active:hover .list-group-item-heading > .small,
|
||||
.list-group-item.active:focus .list-group-item-heading > .small {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item.active .list-group-item-text,
|
||||
.list-group-item.active:hover .list-group-item-text,
|
||||
.list-group-item.active:focus .list-group-item-text {
|
||||
color: #9cd7f2;
|
||||
}
|
||||
.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
background-color: #e6f2ec;
|
||||
}
|
||||
a.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
}
|
||||
a.list-group-item-success .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-success:hover,
|
||||
a.list-group-item-success:focus {
|
||||
color: #cacbcc;
|
||||
background-color: #d5e9df;
|
||||
}
|
||||
a.list-group-item-success.active,
|
||||
a.list-group-item-success.active:hover,
|
||||
a.list-group-item-success.active:focus {
|
||||
color: #fff;
|
||||
background-color: #cacbcc;
|
||||
border-color: #cacbcc;
|
||||
}
|
||||
.list-group-item-info {
|
||||
color: #125b7e;
|
||||
background-color: #e7f1f6;
|
||||
}
|
||||
a.list-group-item-info {
|
||||
color: #125b7e;
|
||||
}
|
||||
a.list-group-item-info .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-info:hover,
|
||||
a.list-group-item-info:focus {
|
||||
color: #125b7e;
|
||||
background-color: #d4e6ef;
|
||||
}
|
||||
a.list-group-item-info.active,
|
||||
a.list-group-item-info.active:hover,
|
||||
a.list-group-item-info.active:focus {
|
||||
color: #fff;
|
||||
background-color: #125b7e;
|
||||
border-color: #125b7e;
|
||||
}
|
||||
.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
background-color: #fef6e8;
|
||||
}
|
||||
a.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
}
|
||||
a.list-group-item-warning .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-warning:hover,
|
||||
a.list-group-item-warning:focus {
|
||||
color: #f8af1c;
|
||||
background-color: #fdecd0;
|
||||
}
|
||||
a.list-group-item-warning.active,
|
||||
a.list-group-item-warning.active:hover,
|
||||
a.list-group-item-warning.active:focus {
|
||||
color: #fff;
|
||||
background-color: #f8af1c;
|
||||
border-color: #f8af1c;
|
||||
}
|
||||
.list-group-item-danger {
|
||||
color: #da291c;
|
||||
background-color: #fbe9e8;
|
||||
}
|
||||
a.list-group-item-danger {
|
||||
color: #da291c;
|
||||
}
|
||||
a.list-group-item-danger .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-danger:hover,
|
||||
a.list-group-item-danger:focus {
|
||||
color: #da291c;
|
||||
background-color: #f7d4d2;
|
||||
}
|
||||
a.list-group-item-danger.active,
|
||||
a.list-group-item-danger.active:hover,
|
||||
a.list-group-item-danger.active:focus {
|
||||
color: #fff;
|
||||
background-color: #da291c;
|
||||
border-color: #da291c;
|
||||
}
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
||||
.radio .list-group.paymentSelection, .radio.list-group.paymentSelection {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 33.9em) {
|
||||
label, a {
|
||||
max-height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.checkbox.list-group,
|
||||
.checkbox.list-group,
|
||||
.radio.list-group,
|
||||
.radio.list-group {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item > label,
|
||||
.form-group.radio .list-group .list-group-item > label,
|
||||
.checkbox.list-group .list-group-item > label,
|
||||
.radio.list-group .list-group-item > label {
|
||||
margin-bottom: initial;
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
padding: 12px 27px 12px 33px;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item,
|
||||
.form-group.radio .list-group .list-group-item,
|
||||
.checkbox.list-group .list-group-item,
|
||||
.radio.list-group .list-group-item {
|
||||
margin-bottom: 12px;
|
||||
border-width: 1px;
|
||||
/* border-color: #cacbcc; */
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item.active,
|
||||
.form-group.radio .list-group .list-group-item.active,
|
||||
.checkbox.list-group .list-group-item.active,
|
||||
.radio.list-group .list-group-item.active {
|
||||
background-color: #e7f1f6;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
min-height: 23px;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#paypalParentLink label,
|
||||
#afterpayParentLink 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;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ const applicationConfig = {
|
|||
SAVED_SESSION_TIMEOUT_DAYS: 45,
|
||||
COOKIE_PATH: "/",
|
||||
CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod"
|
||||
HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
|
||||
APPLICATION_NAME: "FixMyGlass",
|
||||
ANALYTICS_APPLICATION_NAME: "FixMyGlassNextGen",
|
||||
APPLICATION_ABBREVIATION: "fmg",
|
||||
|
|
|
|||
|
|
@ -4,4 +4,6 @@ export const paymentMethods = {
|
|||
CREDIT_CARD: "CreditCard",
|
||||
PAYPAL: "Paypal",
|
||||
AFTERPAY: "Afterpay",
|
||||
PAY_NOW: "PayNow",
|
||||
INSURANCE: "Insurance",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -343,6 +343,7 @@ export default {
|
|||
availableVaps: [],
|
||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||
inactivePromos: this.getInactivePromosFromStore(),
|
||||
isAppleDevice: false,
|
||||
isRecalAckOptIn: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -519,7 +520,15 @@ export default {
|
|||
this.$route
|
||||
);
|
||||
} else {
|
||||
this.setupPia();
|
||||
if (this.paymentMethod == paymentMethods.INSURANCE) {
|
||||
this.dispatchStoreAction(this.storeActions.SAVE_PAYMENT_TYPE, true, false);
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_INSURANCE,
|
||||
this.$route
|
||||
);
|
||||
} else {
|
||||
this.setupPia();
|
||||
}
|
||||
}
|
||||
},
|
||||
async setupPia() {
|
||||
|
|
@ -611,6 +620,10 @@ export default {
|
|||
},
|
||||
customCtaCopy() {
|
||||
switch (this.paymentMethod) {
|
||||
case paymentMethods.PAY_NOW:
|
||||
return "Continue to checkout";
|
||||
case paymentMethods.INSURANCE:
|
||||
return "Continue to insurance";
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
return "Continue to checkout";
|
||||
case paymentMethods.PAYPAL:
|
||||
|
|
|
|||
|
|
@ -45,23 +45,11 @@ export default {
|
|||
);
|
||||
}
|
||||
} else {
|
||||
switch (store.getters.order.payment.piaType) {
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
case paymentMethods.AFTERPAY:
|
||||
await this.processCreditCardResponse();
|
||||
break;
|
||||
case paymentMethods.PAYPAL:
|
||||
await this.processPaypalResponse();
|
||||
break;
|
||||
default:
|
||||
var msg = "Unknown Pia type: " + store.getters.order.payment.piaType;
|
||||
console.log(msg);
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.PIA_ERROR,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_PIA_ALERT]: true }
|
||||
);
|
||||
const token = getQuerystringParameter(queryStrings.TOKEN);
|
||||
if (token) {
|
||||
await this.processPaypalResponse();
|
||||
} else {
|
||||
await this.processCreditCardResponse();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@
|
|||
name="card-frame"
|
||||
id="card-frame"
|
||||
seamless
|
||||
scrolling="no">
|
||||
scrolling="no"
|
||||
allow="payment *; microphone *; geolocation *;">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
|
|
@ -192,6 +193,7 @@
|
|||
<input type="hidden" name="ship_to_phone" :value="phoneNumber" />
|
||||
|
||||
<input type="hidden" name="calling_application" value="NextGen" />
|
||||
<input type="hidden" name="parentdomainname" :value="parentNomainName" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
|
|
@ -256,7 +258,6 @@ export default {
|
|||
piaLineItems: "",
|
||||
lineItems: [],
|
||||
availableVaps: [],
|
||||
|
||||
shouldBlockInteraction: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -405,6 +406,13 @@ export default {
|
|||
});
|
||||
},
|
||||
computed: {
|
||||
parentNomainName() {
|
||||
var a = document.createElement("a");
|
||||
a.href = applicationConfig.HERITAGE_FUNNEL;
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
return `${protocol}//${a.hostname}`;
|
||||
},
|
||||
dynamicCSSUrl() {
|
||||
const { protocol, hostname, port } = window.location;
|
||||
return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
|
||||
|
|
@ -650,10 +658,19 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.$refs.hopForm.submit();
|
||||
|
||||
var isApplePayAvailable = false;
|
||||
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
|
||||
isApplePayAvailable = true;
|
||||
}
|
||||
|
||||
const iframe = this.$refs.paymentFrame;
|
||||
if (iframe) {
|
||||
iframe.onload = () => {
|
||||
if (iframe.contentWindow) {
|
||||
if (isApplePayAvailable) {
|
||||
iframe.contentWindow.postMessage("hybrid-with-applepay", "*");
|
||||
}
|
||||
|
||||
if (this.paymentType == "cc") {
|
||||
iframe.contentWindow.postMessage("CreditCardChosen", "*");
|
||||
} else if (this.paymentType == "ap") {
|
||||
|
|
@ -683,6 +700,9 @@ export default {
|
|||
if (event.data.indexOf("creditCardSubmit") > -1) {
|
||||
this.setUIBlock(true);
|
||||
}
|
||||
if (event.data.indexOf("hybrid") > -1) {
|
||||
this.setUIBlock(true);
|
||||
}
|
||||
}
|
||||
},
|
||||
setIFrameListener() {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const navigationScenarios = {
|
|||
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
|
||||
|
||||
// Payment
|
||||
CLICKED_INSURANCE: "CLICKED_INSURANCE",
|
||||
CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
|
||||
PIA_ERROR: "PIA_ERROR",
|
||||
PIA_CC_ERROR: "PIA_CC_ERROR",
|
||||
|
|
|
|||
|
|
@ -487,6 +487,10 @@ const routingTable = function (store) {
|
|||
scenario: navigationScenarios.CLICKED_PAY_NOW,
|
||||
destinationFmgPageValue: fmgPageValues.PAYMENT,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_INSURANCE,
|
||||
destinationFmgPageValue: fmgPageValues.INSURANCE_COMPANY,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4M
|
|||
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
|
||||
process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
|
||||
|
||||
//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutEmbedded.aspx";
|
||||
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx";
|
||||
//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutShared.aspx";
|
||||
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutShared.aspx";
|
||||
|
||||
// GA & GTM
|
||||
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =
|
||||
|
|
|
|||
Loading…
Reference in a new issue