CSR-2130
CSR-2130
This commit is contained in:
CarlNation
parent
d67fb0d1b2
commit
a7d5f776a4
13 changed files with 1064 additions and 25 deletions
|
|
@ -11,3 +11,9 @@ sass --no-source-map --watch scss:css
|
||||||
This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
|
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.
|
# 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 {
|
.creditCardSpecific {
|
||||||
display: none;
|
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 = [{}];
|
window.dataLayer = [{}];
|
||||||
</script>
|
</script>
|
||||||
<script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></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 charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
|
|
||||||
|
|
@ -220,5 +220,4 @@ body {
|
||||||
border: 1px solid #d4281c;
|
border: 1px solid #d4281c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -116,3 +116,453 @@
|
||||||
.creditCardSpecific {
|
.creditCardSpecific {
|
||||||
display: none;
|
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,
|
SAVED_SESSION_TIMEOUT_DAYS: 45,
|
||||||
COOKIE_PATH: "/",
|
COOKIE_PATH: "/",
|
||||||
CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod"
|
CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod"
|
||||||
|
HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
|
||||||
APPLICATION_NAME: "FixMyGlass",
|
APPLICATION_NAME: "FixMyGlass",
|
||||||
ANALYTICS_APPLICATION_NAME: "FixMyGlassNextGen",
|
ANALYTICS_APPLICATION_NAME: "FixMyGlassNextGen",
|
||||||
APPLICATION_ABBREVIATION: "fmg",
|
APPLICATION_ABBREVIATION: "fmg",
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,6 @@ export const paymentMethods = {
|
||||||
CREDIT_CARD: "CreditCard",
|
CREDIT_CARD: "CreditCard",
|
||||||
PAYPAL: "Paypal",
|
PAYPAL: "Paypal",
|
||||||
AFTERPAY: "Afterpay",
|
AFTERPAY: "Afterpay",
|
||||||
|
PAY_NOW: "PayNow",
|
||||||
|
INSURANCE: "Insurance",
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -308,6 +308,7 @@ export default {
|
||||||
availableVaps: [],
|
availableVaps: [],
|
||||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||||
inactivePromos: this.getInactivePromosFromStore(),
|
inactivePromos: this.getInactivePromosFromStore(),
|
||||||
|
isAppleDevice: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|
@ -481,7 +482,15 @@ export default {
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
} else {
|
} 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() {
|
async setupPia() {
|
||||||
|
|
@ -561,6 +570,10 @@ export default {
|
||||||
},
|
},
|
||||||
customCtaCopy() {
|
customCtaCopy() {
|
||||||
switch (this.paymentMethod) {
|
switch (this.paymentMethod) {
|
||||||
|
case paymentMethods.PAY_NOW:
|
||||||
|
return "Continue to checkout";
|
||||||
|
case paymentMethods.INSURANCE:
|
||||||
|
return "Continue to insurance";
|
||||||
case paymentMethods.CREDIT_CARD:
|
case paymentMethods.CREDIT_CARD:
|
||||||
return "Continue to checkout";
|
return "Continue to checkout";
|
||||||
case paymentMethods.PAYPAL:
|
case paymentMethods.PAYPAL:
|
||||||
|
|
|
||||||
|
|
@ -45,23 +45,11 @@ export default {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
switch (store.getters.order.payment.piaType) {
|
const token = getQuerystringParameter(queryStrings.TOKEN);
|
||||||
case paymentMethods.CREDIT_CARD:
|
if (token) {
|
||||||
case paymentMethods.AFTERPAY:
|
await this.processPaypalResponse();
|
||||||
await this.processCreditCardResponse();
|
} else {
|
||||||
break;
|
await this.processCreditCardResponse();
|
||||||
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 }
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,15 @@
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-6 col-xl-4 p-0">
|
<div class="col-md-6 col-xl-4 p-0">
|
||||||
|
<!-- <funnelSubHeader class="mb-5 mt-4" cmsWidgetName="FunnelSubHeaderWidget" /> -->
|
||||||
|
|
||||||
|
<!-- <div class="text-center">
|
||||||
|
<img :src="ApplePayImage" class="payment-buttons" alt="apple pay" />
|
||||||
|
<img :src="PayPalImage" class="payment-buttons" alt="paypal" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<paymentMethodQuestion v-model="paymentMethodInternalModel" /> -->
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<alert
|
<alert
|
||||||
ref="piaCCErrorAlert"
|
ref="piaCCErrorAlert"
|
||||||
|
|
@ -40,7 +49,8 @@
|
||||||
name="card-frame"
|
name="card-frame"
|
||||||
id="card-frame"
|
id="card-frame"
|
||||||
seamless
|
seamless
|
||||||
scrolling="no">
|
scrolling="no"
|
||||||
|
allow="payment *; microphone *; geolocation *;">
|
||||||
</iframe>
|
</iframe>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -192,16 +202,19 @@
|
||||||
<input type="hidden" name="ship_to_phone" :value="phoneNumber" />
|
<input type="hidden" name="ship_to_phone" :value="phoneNumber" />
|
||||||
|
|
||||||
<input type="hidden" name="calling_application" value="NextGen" />
|
<input type="hidden" name="calling_application" value="NextGen" />
|
||||||
|
<input type="hidden" name="parentdomainname" :value="parentNomainName" />
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Components
|
// Components
|
||||||
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
|
||||||
|
//import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
|
||||||
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
import navbar from "@/fmg-components/nav-bar/nav-bar";
|
||||||
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
|
||||||
import cart from "@/fmg-components/cart/cart";
|
import cart from "@/fmg-components/cart/cart";
|
||||||
import alert from "@/ux-components/alert/alert";
|
import alert from "@/ux-components/alert/alert";
|
||||||
|
// import paymentMethodQuestion from "@/layouts/payment-method/payment-method-question/payment-method-question";
|
||||||
|
|
||||||
import { storeActions } from "@/constants/store-actions";
|
import { storeActions } from "@/constants/store-actions";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
|
|
@ -256,8 +269,9 @@ export default {
|
||||||
piaLineItems: "",
|
piaLineItems: "",
|
||||||
lineItems: [],
|
lineItems: [],
|
||||||
availableVaps: [],
|
availableVaps: [],
|
||||||
|
|
||||||
shouldBlockInteraction: false,
|
shouldBlockInteraction: false,
|
||||||
|
//paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||||
|
//showIframe: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
directives: {
|
directives: {
|
||||||
|
|
@ -404,7 +418,29 @@ export default {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
// watch: {
|
||||||
|
// async paymentMethodInternalModel(paymentMethod) {
|
||||||
|
// if (paymentMethod === paymentMethods.CREDIT_CARD) {
|
||||||
|
// this.showIframe = true;
|
||||||
|
// } else {
|
||||||
|
// this.showIframe = false;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// },
|
||||||
computed: {
|
computed: {
|
||||||
|
// ApplePayImage() {
|
||||||
|
// return this.getCmsContent("ApplePayWidget", "Image");
|
||||||
|
// },
|
||||||
|
// PayPalImage() {
|
||||||
|
// return this.getCmsContent("PayPalWidget", "Image");
|
||||||
|
// },
|
||||||
|
parentNomainName() {
|
||||||
|
var a = document.createElement("a");
|
||||||
|
a.href = applicationConfig.HERITAGE_FUNNEL;
|
||||||
|
|
||||||
|
const protocol = window.location.protocol;
|
||||||
|
return `${protocol}//${a.hostname}`;
|
||||||
|
},
|
||||||
dynamicCSSUrl() {
|
dynamicCSSUrl() {
|
||||||
const { protocol, hostname, port } = window.location;
|
const { protocol, hostname, port } = window.location;
|
||||||
return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
|
return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
|
||||||
|
|
@ -425,6 +461,9 @@ export default {
|
||||||
}
|
}
|
||||||
return "";
|
return "";
|
||||||
},
|
},
|
||||||
|
// getSubHeader() {
|
||||||
|
// return this.getCmsContent("PaymentSubHeaderWidget", "Text");
|
||||||
|
// },
|
||||||
damageInfo() {
|
damageInfo() {
|
||||||
return this.$store.getters.damage;
|
return this.$store.getters.damage;
|
||||||
},
|
},
|
||||||
|
|
@ -469,6 +508,9 @@ export default {
|
||||||
shouldDisplayPiaAPAlert() {
|
shouldDisplayPiaAPAlert() {
|
||||||
return this.shouldDisplayPiaAlert(paymentMethods.AFTERPAY);
|
return this.shouldDisplayPiaAlert(paymentMethods.AFTERPAY);
|
||||||
},
|
},
|
||||||
|
// paymentMethod() {
|
||||||
|
// return this.paymentMethodInternalModel;
|
||||||
|
// },
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
|
|
@ -528,6 +570,9 @@ export default {
|
||||||
paymentMethodReqs
|
paymentMethodReqs
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
// getPaymentMethodFromStore() {
|
||||||
|
// return store.getters.order.payment.piaType;
|
||||||
|
// },
|
||||||
getWOrkOrderNumber() {
|
getWOrkOrderNumber() {
|
||||||
if (store.getters.order.workOrderNumber) {
|
if (store.getters.order.workOrderNumber) {
|
||||||
const items = store.getters.order.workOrderNumber.split("-");
|
const items = store.getters.order.workOrderNumber.split("-");
|
||||||
|
|
@ -650,10 +695,19 @@ export default {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$refs.hopForm.submit();
|
this.$refs.hopForm.submit();
|
||||||
|
|
||||||
|
var isApplePayAvailable = false;
|
||||||
|
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
|
||||||
|
isApplePayAvailable = true;
|
||||||
|
}
|
||||||
|
|
||||||
const iframe = this.$refs.paymentFrame;
|
const iframe = this.$refs.paymentFrame;
|
||||||
if (iframe) {
|
if (iframe) {
|
||||||
iframe.onload = () => {
|
iframe.onload = () => {
|
||||||
if (iframe.contentWindow) {
|
if (iframe.contentWindow) {
|
||||||
|
if (isApplePayAvailable) {
|
||||||
|
iframe.contentWindow.postMessage("hybrid-with-applepay", "*");
|
||||||
|
}
|
||||||
|
|
||||||
if (this.paymentType == "cc") {
|
if (this.paymentType == "cc") {
|
||||||
iframe.contentWindow.postMessage("CreditCardChosen", "*");
|
iframe.contentWindow.postMessage("CreditCardChosen", "*");
|
||||||
} else if (this.paymentType == "ap") {
|
} else if (this.paymentType == "ap") {
|
||||||
|
|
@ -683,6 +737,9 @@ export default {
|
||||||
if (event.data.indexOf("creditCardSubmit") > -1) {
|
if (event.data.indexOf("creditCardSubmit") > -1) {
|
||||||
this.setUIBlock(true);
|
this.setUIBlock(true);
|
||||||
}
|
}
|
||||||
|
if (event.data.indexOf("hybrid") > -1) {
|
||||||
|
this.setUIBlock(true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setIFrameListener() {
|
setIFrameListener() {
|
||||||
|
|
@ -707,6 +764,8 @@ export default {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
funnelHeader,
|
funnelHeader,
|
||||||
|
//funnelSubHeader,
|
||||||
|
// paymentMethodQuestion,
|
||||||
navbar,
|
navbar,
|
||||||
loadingModal,
|
loadingModal,
|
||||||
cart,
|
cart,
|
||||||
|
|
@ -716,6 +775,10 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
// .payment-buttons {
|
||||||
|
// cursor: pointer;
|
||||||
|
// padding-right: 10px;
|
||||||
|
// }
|
||||||
.hop-iframe {
|
.hop-iframe {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 650px;
|
min-height: 650px;
|
||||||
|
|
|
||||||
|
|
@ -49,6 +49,7 @@ const navigationScenarios = {
|
||||||
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
|
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
|
||||||
|
|
||||||
// Payment
|
// Payment
|
||||||
|
CLICKED_INSURANCE: "CLICKED_INSURANCE",
|
||||||
CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
|
CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
|
||||||
PIA_ERROR: "PIA_ERROR",
|
PIA_ERROR: "PIA_ERROR",
|
||||||
PIA_CC_ERROR: "PIA_CC_ERROR",
|
PIA_CC_ERROR: "PIA_CC_ERROR",
|
||||||
|
|
|
||||||
|
|
@ -487,6 +487,10 @@ const routingTable = function (store) {
|
||||||
scenario: navigationScenarios.CLICKED_PAY_NOW,
|
scenario: navigationScenarios.CLICKED_PAY_NOW,
|
||||||
destinationFmgPageValue: fmgPageValues.PAYMENT,
|
destinationFmgPageValue: fmgPageValues.PAYMENT,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
scenario: navigationScenarios.CLICKED_INSURANCE,
|
||||||
|
destinationFmgPageValue: fmgPageValues.INSURANCE_COMPANY,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
process.env.VUE_APP_CONSUMER_CF_DISTRO = "https://digitalapi.dev.safelite.io";
|
process.env.VUE_APP_CONSUMER_CF_DISTRO = "https://digitalapi.dev.safelite.io";
|
||||||
//process.env.VUE_APP_HERITAGE_FUNNEL = "http://localhost:38000/default.aspx";
|
process.env.VUE_APP_HERITAGE_FUNNEL = "http://localhost/default.aspx";
|
||||||
process.env.VUE_APP_HERITAGE_FUNNEL = "https://fixmyglassdev.safelite.com/default.aspx";
|
//process.env.VUE_APP_HERITAGE_FUNNEL = "https://fixmyglassdev.safelite.com/default.aspx";
|
||||||
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
|
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo";
|
||||||
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
|
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
|
||||||
process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
|
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 = "http://localhost:60966/fmgCheckoutShared.aspx";
|
||||||
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx";
|
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutShared.aspx";
|
||||||
|
|
||||||
// GA & GTM
|
// GA & GTM
|
||||||
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =
|
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue