Merging from develop
This commit is contained in:
Leah Schumann
commit
1f163f95ae
23 changed files with 1362 additions and 66 deletions
|
|
@ -6,8 +6,14 @@ This public/css folder uses a standalone .scss > .css setup.
|
|||
From a Terminal window, run the Sass Watch command from the public folder only:
|
||||
|
||||
```bash
|
||||
sass --no-source-map --watch scss:css
|
||||
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
|
||||
|
|
@ -203,3 +203,107 @@ body .cc-error-container #alert-message {
|
|||
background-color: #fcbfbb;
|
||||
border: 1px solid #d4281c;
|
||||
}
|
||||
|
||||
#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
|
||||
border-radius: 5px;
|
||||
}
|
||||
#fmg-checkout-shared .form-group .list-group.radio .list-group-item label {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container #paypalParentDiv {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label {
|
||||
padding: 0;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label apple-pay-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink.list-group-item {
|
||||
border-radius: 100px;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink {
|
||||
margin: 0;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink #paypalImage {
|
||||
max-width: 40%;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink.list-group-item {
|
||||
border-radius: 100px;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group#applepayParentDiv {
|
||||
display: none;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group.paymentSelection {
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container.no-applepay .form-group .list-group #paypalParentLink #paypalImage {
|
||||
max-width: 20%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container label {
|
||||
display: inline-flex;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
|
||||
margin: auto 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type {
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:last-of-type {
|
||||
width: 0;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active {
|
||||
padding-bottom: 10px;
|
||||
border: 1px solid #0070D1;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
|
||||
border-bottom-color: #0070D1;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img {
|
||||
width: 20%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific {
|
||||
padding: 0 2%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container .italicSmall {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@media only screen and (max-device-width: 767px) {
|
||||
#fmg-checkout-shared #applepay-and-paypal-container {
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container > .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,3 +112,400 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
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,176 @@ body {
|
|||
border: 1px solid #d4281c;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#fmg-checkout-shared {
|
||||
.form-group {
|
||||
.list-group {
|
||||
&.radio {
|
||||
.list-group-item {
|
||||
border-radius: 5px;
|
||||
|
||||
label {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#applepay-and-paypal-container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
#paypalParentDiv {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
.list-group {
|
||||
&.paymentSelection {
|
||||
|
||||
#applepayParentLink {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
background-color: #000000;
|
||||
|
||||
label {
|
||||
padding: 0;
|
||||
|
||||
apple-pay-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-group-item {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#paypalParentLink {
|
||||
margin: 0;
|
||||
|
||||
#paypalImage {
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
&.list-group-item {
|
||||
border-radius: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-applepay {
|
||||
.form-group {
|
||||
width: 100%;
|
||||
|
||||
&#applepayParentDiv {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
&.paymentSelection {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#paypalParentLink {
|
||||
|
||||
#paypalImage {
|
||||
max-width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#other-payments-container {
|
||||
label {
|
||||
display: inline-flex;
|
||||
text-align: left;
|
||||
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
span {
|
||||
&.paymentOptionText {
|
||||
margin: auto 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#afterpayParentLink {
|
||||
label {
|
||||
> span {
|
||||
&:first-of-type {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#creditCardParentDiv {
|
||||
&.active {
|
||||
padding-bottom: 10px;
|
||||
border: 1px solid #0070D1;
|
||||
border-radius: 5px;
|
||||
|
||||
> .paymentSelection {
|
||||
#creditCardParentLink {
|
||||
border-bottom-color: #0070D1;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.paymentSelection {
|
||||
#creditCardImages {
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
|
||||
> img {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.creditCardSpecific {
|
||||
padding: 0 2%;
|
||||
|
||||
> .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.italicSmall {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 767px) {
|
||||
#applepay-and-paypal-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#other-payments-container {
|
||||
> .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -116,3 +116,360 @@
|
|||
.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;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
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",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ const errorMessages = {
|
|||
VIN_FORMAT:
|
||||
"Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
|
||||
OPTION_REQUIRED: "Please select an option",
|
||||
RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
|
||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
||||
DATE_REQUIRED: "Please select a date",
|
||||
|
|
|
|||
|
|
@ -4,4 +4,6 @@ export const paymentMethods = {
|
|||
CREDIT_CARD: "CreditCard",
|
||||
PAYPAL: "Paypal",
|
||||
AFTERPAY: "Afterpay",
|
||||
PAY_NOW: "PayNow",
|
||||
INSURANCE: "Insurance",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
classes = "ui-checkbox d-flex";
|
||||
break;
|
||||
case "servicePackageRadio":
|
||||
classes = "package-main";
|
||||
classes = "package-main d-md-flex justify-content-center";
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
|
|
@ -226,7 +226,7 @@ export default {
|
|||
if (this.buttonTypeString == "radio") {
|
||||
classes += " radio-button-container";
|
||||
} else if (this.buttonTypeString == "servicePackageRadio") {
|
||||
classes = "package-wrapper";
|
||||
classes = "package-wrapper col-md-4";
|
||||
}
|
||||
|
||||
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
|
||||
|
|
|
|||
|
|
@ -29,11 +29,25 @@ describe("checkbox-question.vue", () => {
|
|||
expect(input.attributes().name).toEqual("Checkbox");
|
||||
});
|
||||
|
||||
it("Should return checkbox id", async () => {
|
||||
it("Should return default id when no custom id is specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
// Expect
|
||||
expect(input.attributes().id).not.toBeFalsy();
|
||||
});
|
||||
|
||||
it("Should return custom id when specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {
|
||||
buttonID: "Checkbox ID",
|
||||
customInputId: "Checkbox ID",
|
||||
},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,32 +10,67 @@
|
|||
type="checkbox"
|
||||
aria-checked="false"
|
||||
:name="checkboxName"
|
||||
:id="buttonID"
|
||||
:validationRules="validationRules"
|
||||
:id="inputId"
|
||||
:tabindex="tabIndex"
|
||||
:aria-required="isRequired" />
|
||||
<p v-html="checkboxLabelCopy" class="m-0"></p>
|
||||
<textBlock
|
||||
class="m-0"
|
||||
:customText="checkboxLabelCopy"
|
||||
marginTopSizeOverride="0"
|
||||
typeStyle="small"
|
||||
@text-link-clicked="bubbleTextBlockClick" />
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField, validate } from "vee-validate";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
|
||||
export default {
|
||||
name: "checkboxQuestion",
|
||||
computed: {
|
||||
checkboxLabelCopy() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
},
|
||||
value: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const uuid = uuidv4();
|
||||
const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
|
||||
|
||||
const fieldOptions = {
|
||||
initialValue: props.modelValue,
|
||||
};
|
||||
|
||||
const {
|
||||
value,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
validate,
|
||||
errors,
|
||||
resetField,
|
||||
} = useField(inputId, props.validationRules, fieldOptions);
|
||||
|
||||
return {
|
||||
value,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
validate,
|
||||
meta,
|
||||
errors,
|
||||
resetField,
|
||||
inputId,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
customInputId: String,
|
||||
validationRules: String,
|
||||
cmsWidgetName: String,
|
||||
checkboxName: String,
|
||||
buttonID: String,
|
||||
|
|
@ -48,6 +83,24 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
bubbleTextBlockClick(event) {
|
||||
this.$emit("textLinkClicked", event);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(newValue, oldValue) {
|
||||
if (this.value !== newValue) {
|
||||
this.value = newValue;
|
||||
}
|
||||
},
|
||||
value(newValue, oldValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textBlock,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -56,6 +109,7 @@ export default {
|
|||
.form-check-input {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
min-width: 1rem; // Prevent squish
|
||||
&:checked {
|
||||
background-size: 125%;
|
||||
border: 1px solid $blue;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="cart">
|
||||
<div class="px-0">
|
||||
<!-- set class to 'expaned' on line 7 so cart is open on page load. This may be temporary -->
|
||||
<div
|
||||
class="row vin-toggle flex align-items-center pt-4"
|
||||
:class="[isExpanded ? 'expanded' : '']"
|
||||
:class="[isExpanded ? '' : 'expanded']"
|
||||
@click="toggleIsExpanded()">
|
||||
<a
|
||||
aria-label="expand cart"
|
||||
|
|
|
|||
|
|
@ -47,7 +47,12 @@ describe("payment-method.vue", () => {
|
|||
function setupMocks() {
|
||||
store.getters = {
|
||||
damage: {},
|
||||
lineItems: [],
|
||||
lineItems: {
|
||||
glassParts: [],
|
||||
supportingItems: [],
|
||||
vaps: [],
|
||||
promos: [],
|
||||
},
|
||||
order: {
|
||||
payment: {
|
||||
isPia: false,
|
||||
|
|
@ -55,6 +60,12 @@ function setupMocks() {
|
|||
isVerified: true,
|
||||
},
|
||||
},
|
||||
lineItems: {
|
||||
glassParts: [],
|
||||
supportingItems: [],
|
||||
vaps: [],
|
||||
promos: [],
|
||||
},
|
||||
policy: {
|
||||
currentDeductible: 123,
|
||||
isNoComp: false,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal notFullScreen ref="loadingModal" />
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid payment-method">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
|
|
@ -46,10 +46,28 @@
|
|||
v-bind:isDismissible="false" />
|
||||
</div>
|
||||
|
||||
<div v-if="hasRecal && !isInsurance" class="questions-about-service my-5">
|
||||
<textBlock
|
||||
cmsWidgetName="QuestionsAboutYourServiceWidget"
|
||||
justifyText="left"
|
||||
class="service-questions" />
|
||||
<textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
|
||||
<hr class="my-5" />
|
||||
<div class="d-flex flex-row checkbox-group">
|
||||
<checkboxQuestion
|
||||
cmsWidgetName="RecalConfirmWidget"
|
||||
class="mb-5"
|
||||
isRequired="true"
|
||||
v-model="isRecalAckOptIn"
|
||||
validationRules="recal-ack-required"
|
||||
@text-link-clicked="openModal('RecalModal')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<paymentMethodQuestion
|
||||
v-if="isPiaEnabled && totalAmountDue > 0"
|
||||
v-model="paymentMethodInternalModel"
|
||||
validationRules="option-required" />
|
||||
validationRules="payment-method-required" />
|
||||
|
||||
<alert
|
||||
v-if="!isPiaEnabled && totalAmountDue > 0"
|
||||
|
|
@ -66,6 +84,11 @@
|
|||
buttonSize
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<contentGroupModal
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal"
|
||||
class="recal-modal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -83,13 +106,20 @@ import cart from "@/fmg-components/cart/cart";
|
|||
import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
|
||||
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
||||
|
||||
// Supporting Items
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import store from "@/store";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import {
|
||||
fetchCmsContentForPage,
|
||||
doesCopyContainRouterLink,
|
||||
getRouterLinkRouteFromCopy,
|
||||
} from "@/helpers/cms-content-helper";
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import {
|
||||
|
|
@ -116,10 +146,14 @@ import { partTypeStrings } from "@/constants/part-type-strings";
|
|||
import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
||||
import { coverageStatus } from "@/constants/insurance";
|
||||
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "paymentMethod",
|
||||
props: {
|
||||
recyclingModalCmsWidgetName: String,
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
|
@ -309,9 +343,16 @@ export default {
|
|||
availableVaps: [],
|
||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||
inactivePromos: this.getInactivePromosFromStore(),
|
||||
isAppleDevice: false,
|
||||
isRecalAckOptIn: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doesCopyContainRouterLink,
|
||||
getRouterLinkRouteFromCopy,
|
||||
navigateWithScenario(scenarioName) {
|
||||
this.$router.navigateWithoutSaving(scenarioName, this.$route);
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
// Service Location
|
||||
const serviceLocation = store.getters.order.serviceLocation;
|
||||
|
|
@ -451,14 +492,12 @@ export default {
|
|||
this.paymentMethod,
|
||||
false
|
||||
);
|
||||
|
||||
// save lineitems as they now have salestax added
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
|
||||
this.lineItems.glassParts,
|
||||
false
|
||||
);
|
||||
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||
this.lineItems.supportingItems,
|
||||
|
|
@ -473,7 +512,6 @@ export default {
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.paymentMethod == paymentMethods.LATER) {
|
||||
// this creates the final work order
|
||||
await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
|
||||
|
|
@ -482,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() {
|
||||
|
|
@ -513,8 +559,20 @@ export default {
|
|||
hasSubmittedOrder() {
|
||||
return this.$store.getters.hasSubmittedOrder;
|
||||
},
|
||||
openModal(modalName) {
|
||||
this.$refs[modalName].openModal();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
hasRecal() {
|
||||
const recalLineItem = this.$store.getters.order.lineItems.supportingItems.find(
|
||||
(lineItem) => lineItem.partType == partTypeStrings.RECALIBRATION
|
||||
);
|
||||
if (recalLineItem) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
damageInfo() {
|
||||
return this.$store.getters.damage;
|
||||
},
|
||||
|
|
@ -562,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:
|
||||
|
|
@ -653,11 +715,27 @@ export default {
|
|||
alert,
|
||||
paymentMethodQuestion,
|
||||
reviewDropdown,
|
||||
textBlock,
|
||||
checkboxQuestion,
|
||||
contentGroupModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkbox-group {
|
||||
align-items: start;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.questions-about-service {
|
||||
.service-questions {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
.cart {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -665,4 +743,22 @@ export default {
|
|||
color: $gray-550;
|
||||
margin: 0;
|
||||
}
|
||||
.payment-method {
|
||||
.recal-modal {
|
||||
:deep(.modal-body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h5 {
|
||||
text-align: center;
|
||||
order: 1;
|
||||
}
|
||||
p {
|
||||
order: 3;
|
||||
}
|
||||
img {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -70,6 +58,12 @@ export default {
|
|||
return true;
|
||||
},
|
||||
async processPaypalResponse() {
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||
paymentMethods.PAYPAL,
|
||||
false
|
||||
);
|
||||
|
||||
const token = getQuerystringParameter(queryStrings.TOKEN);
|
||||
const payerId = getQuerystringParameter(queryStrings.PAYERID);
|
||||
|
||||
|
|
@ -83,6 +77,12 @@ export default {
|
|||
await this.saveAndSubmitWorkOrder();
|
||||
},
|
||||
async processCreditCardResponse() {
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||
paymentMethods.CREDIT_CARD,
|
||||
false
|
||||
);
|
||||
|
||||
const subscriptionID = getQuerystringParameter(queryStrings.SUBSCRIPTIONID);
|
||||
|
||||
const referralSeqNum = getQuerystringParameter(queryStrings.REFERRAL_SEQ_NUM);
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal ref="loadingModal" />
|
||||
<div class="container-fluid page-container-grouped-styles">
|
||||
<div class="container-fluid page-container-grouped-styles quote">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
|
|
@ -20,7 +20,10 @@
|
|||
cmsWidgetName="CashOrInsuranceQuestionWidget"
|
||||
v-model="isInsuranceSelected"
|
||||
groupName="CashOrInsuranceQuestion" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<servicePackageQuestion
|
||||
ref="servicePackage"
|
||||
cashCmsWidgetName="CashServicePackageQuestionWidget"
|
||||
|
|
@ -34,7 +37,10 @@
|
|||
v-on="{ 'buttonEvent.openModal': openModalAction }"
|
||||
validationRules="option-required"
|
||||
isRequired />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<afterpayModalBanner
|
||||
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
|
||||
cmsWidgetName="AfterpayModalWidget"
|
||||
|
|
@ -43,7 +49,6 @@
|
|||
:lineItems="lineItems" />
|
||||
|
||||
<recalDisclaimer
|
||||
class="my-5"
|
||||
cmsWidgetName="RecalDisclaimerWidget"
|
||||
v-if="isRecalibrationOnOrder"
|
||||
v-on="{ textLinkClicked: openModalAction }"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@
|
|||
]"
|
||||
for="testradio">
|
||||
<div class="package-specs">
|
||||
<div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
|
||||
<div
|
||||
v-if="this.additionalButtonData.servicePackageDiscount"
|
||||
class="row justify-content-between">
|
||||
<div class="col md-6">
|
||||
<p class="m-0">
|
||||
<span v-html="this.buttonLabel"></span>
|
||||
|
|
@ -136,24 +138,20 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
margin: 1rem 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
position: relative;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
|
|
@ -174,13 +172,21 @@ export default {
|
|||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
min-height: 60px;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-subheader {
|
||||
min-height: 80px;
|
||||
}
|
||||
&.has-text {
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
border: 1px solid #469d2a !important;
|
||||
border: 1px solid #469d2a;
|
||||
@include media-breakpoint-up(md) {
|
||||
border-radius: 0.5rem;
|
||||
padding-top: 3.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -265,6 +271,9 @@ export default {
|
|||
width: 100%;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
|
|
@ -337,6 +346,34 @@ export default {
|
|||
|
||||
.hide-when-closed {
|
||||
display: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
height: 2.875rem;
|
||||
@include media-breakpoint-up(md) {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
~ label {
|
||||
.package-label {
|
||||
&:after {
|
||||
top: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -37,6 +37,19 @@ body {
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
// Quote page desktop
|
||||
&.quote {
|
||||
.col-md-6,
|
||||
.col-lg-4 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
.col-md-6.col-lg-4 {
|
||||
@include media-breakpoint-up(lg) {
|
||||
width: 100%;
|
||||
max-width: 910px;
|
||||
}
|
||||
}
|
||||
}
|
||||
//END set max-width on columns
|
||||
}
|
||||
.pointer {
|
||||
|
|
|
|||
|
|
@ -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