Merge pull request #1908 from Safelite/merge-dev-to-CSR-2087
Merge dev to csr 2087
This commit is contained in:
hiteshkumar87
GitHub
commit
3cbabbb204
35 changed files with 1556 additions and 189 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:
|
From a Terminal window, run the Sass Watch command from the public folder only:
|
||||||
|
|
||||||
```bash
|
```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.
|
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
|
||||||
|
|
@ -203,3 +203,111 @@ body .cc-error-container #alert-message {
|
||||||
background-color: #fcbfbb;
|
background-color: #fcbfbb;
|
||||||
border: 1px solid #d4281c;
|
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 #afterpayParentDiv {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#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;
|
||||||
|
padding: 2px 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 {
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 = [{}];
|
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,181 @@ body {
|
||||||
border: 1px solid #d4281c;
|
border: 1px solid #d4281c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#fmg-checkout-shared {
|
||||||
|
.form-group {
|
||||||
|
.list-group {
|
||||||
|
&.radio {
|
||||||
|
.list-group-item {
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
padding: 12px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#afterpayParentDiv {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
padding: 2px 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 {
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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,
|
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",
|
||||||
|
|
|
||||||
|
|
@ -33,15 +33,15 @@ const endpoints = {
|
||||||
method: "GET",
|
method: "GET",
|
||||||
},
|
},
|
||||||
LookupVehicleByVin: {
|
LookupVehicleByVin: {
|
||||||
url: "/vehicle/api/v1/vehicle/Lookup",
|
url: "/vehicle/api/v1/vehicle/lookup",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
},
|
},
|
||||||
LookupVinByPlate: {
|
LookupVinByPlate: {
|
||||||
url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
|
url: "/vehicle/api/v1/vehicle/lookup-by-plate",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
},
|
},
|
||||||
LookupVinByAddress: {
|
LookupVinByAddress: {
|
||||||
url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
|
url: "/vehicle/api/v1/vehicle/lookup-by-address",
|
||||||
method: "POST",
|
method: "POST",
|
||||||
},
|
},
|
||||||
LookupVinByImage: {
|
LookupVinByImage: {
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@ const errorMessages = {
|
||||||
VIN_FORMAT:
|
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",
|
"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",
|
OPTION_REQUIRED: "Please select an option",
|
||||||
|
RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
|
||||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||||
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
||||||
DATE_REQUIRED: "Please select a date",
|
DATE_REQUIRED: "Please select a date",
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@ const experimentUniverses = {
|
||||||
|
|
||||||
const experimentSettings = {
|
const experimentSettings = {
|
||||||
GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
|
GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
|
||||||
|
SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
|
||||||
DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
|
DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
|
||||||
PIA_EXPERIENCE: "PIA Experience",
|
PIA_EXPERIENCE: "PIA Experience",
|
||||||
PIA_INSURANCE: "DisplayPIAInsurance",
|
PIA_INSURANCE: "DisplayPIAInsurance",
|
||||||
|
|
|
||||||
|
|
@ -4,4 +4,7 @@ export const paymentMethods = {
|
||||||
CREDIT_CARD: "CreditCard",
|
CREDIT_CARD: "CreditCard",
|
||||||
PAYPAL: "Paypal",
|
PAYPAL: "Paypal",
|
||||||
AFTERPAY: "Afterpay",
|
AFTERPAY: "Afterpay",
|
||||||
|
PAY_NOW: "PayNow",
|
||||||
|
INSURANCE: "Insurance",
|
||||||
|
APPLE_PAY: "ApplePay",
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -213,7 +213,7 @@ export default {
|
||||||
classes = "ui-checkbox d-flex";
|
classes = "ui-checkbox d-flex";
|
||||||
break;
|
break;
|
||||||
case "servicePackageRadio":
|
case "servicePackageRadio":
|
||||||
classes = "package-main";
|
classes = "package-main d-md-flex justify-content-md-center";
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
return classes;
|
return classes;
|
||||||
|
|
@ -226,7 +226,7 @@ export default {
|
||||||
if (this.buttonTypeString == "radio") {
|
if (this.buttonTypeString == "radio") {
|
||||||
classes += " radio-button-container";
|
classes += " radio-button-container";
|
||||||
} else if (this.buttonTypeString == "servicePackageRadio") {
|
} else if (this.buttonTypeString == "servicePackageRadio") {
|
||||||
classes = "package-wrapper";
|
classes = "package-wrapper col-md-4";
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
|
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
|
||||||
|
|
@ -255,7 +255,7 @@ export default {
|
||||||
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
|
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
|
||||||
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
|
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
|
||||||
buttonImageId: answer.buttonImageId ?? answer.ImageId,
|
buttonImageId: answer.buttonImageId ?? answer.ImageId,
|
||||||
additionalButtonData: answer.additionalButtonData,
|
additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
|
||||||
groupName: this.formatString(this.groupName),
|
groupName: this.formatString(this.groupName),
|
||||||
value:
|
value:
|
||||||
answer.value ??
|
answer.value ??
|
||||||
|
|
|
||||||
|
|
@ -29,11 +29,25 @@ describe("checkbox-question.vue", () => {
|
||||||
expect(input.attributes().name).toEqual("Checkbox");
|
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
|
// Act
|
||||||
const wrapper = shallowMount(checkboxQuestion, {
|
const wrapper = shallowMount(checkboxQuestion, {
|
||||||
propsData: {
|
propsData: {
|
||||||
buttonID: "Checkbox ID",
|
customInputId: "Checkbox ID",
|
||||||
},
|
},
|
||||||
mixins: [mockMixin],
|
mixins: [mockMixin],
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -10,32 +10,67 @@
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
aria-checked="false"
|
aria-checked="false"
|
||||||
:name="checkboxName"
|
:name="checkboxName"
|
||||||
:id="buttonID"
|
:validationRules="validationRules"
|
||||||
|
:id="inputId"
|
||||||
:tabindex="tabIndex"
|
:tabindex="tabIndex"
|
||||||
:aria-required="isRequired" />
|
: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>
|
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { useField, validate } from "vee-validate";
|
||||||
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
import textBlock from "@/digital-components/text-block/text-block";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "checkboxQuestion",
|
name: "checkboxQuestion",
|
||||||
computed: {
|
computed: {
|
||||||
checkboxLabelCopy() {
|
checkboxLabelCopy() {
|
||||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
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: {
|
props: {
|
||||||
|
customInputId: String,
|
||||||
|
validationRules: String,
|
||||||
cmsWidgetName: String,
|
cmsWidgetName: String,
|
||||||
checkboxName: String,
|
checkboxName: String,
|
||||||
buttonID: String,
|
buttonID: String,
|
||||||
|
|
@ -48,6 +83,24 @@ export default {
|
||||||
default: false,
|
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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -56,6 +109,7 @@ export default {
|
||||||
.form-check-input {
|
.form-check-input {
|
||||||
border: 1px solid $gray-500;
|
border: 1px solid $gray-500;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
|
min-width: 1rem; // Prevent squish
|
||||||
&:checked {
|
&:checked {
|
||||||
background-size: 125%;
|
background-size: 125%;
|
||||||
border: 1px solid $blue;
|
border: 1px solid $blue;
|
||||||
|
|
|
||||||
|
|
@ -263,49 +263,6 @@ describe("cart.vue", () => {
|
||||||
expect(found).toBe(true);
|
expect(found).toBe(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mobile Fee Cart Item
|
|
||||||
test("if there is mobile fee on the order, a mobile fee cart item should be added to the cart", () => {
|
|
||||||
// Arrange
|
|
||||||
const lineItems = {
|
|
||||||
glassParts: [],
|
|
||||||
supportingItems: [
|
|
||||||
{
|
|
||||||
description: null,
|
|
||||||
id: "9ff98501-03a4-432b-884e-e4e28f884a2f",
|
|
||||||
kitPrice: 0,
|
|
||||||
laborAmount: 34.98,
|
|
||||||
partNumber: "MOBILE FEE",
|
|
||||||
partType: "MOBILE FEE",
|
|
||||||
salesTax: 2.62,
|
|
||||||
sellingPrice: 0,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
vaps: [],
|
|
||||||
promos: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const availableVaps = [];
|
|
||||||
|
|
||||||
// Act
|
|
||||||
const { wrapper } = setupMocks({
|
|
||||||
props: {
|
|
||||||
modelValue: lineItems,
|
|
||||||
availableVaps: availableVaps,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Assert
|
|
||||||
expect(wrapper.vm.mobileFeeCartItem).not.toBeNull();
|
|
||||||
expect(wrapper.vm.mobileFeeCartItem.subTotal).toEqual(34.98);
|
|
||||||
expect(wrapper.vm.mobileFeeCartItem.salesTax).toEqual(2.62);
|
|
||||||
|
|
||||||
const found =
|
|
||||||
wrapper.vm.cartItems.findIndex(
|
|
||||||
(cartItem) => cartItem == wrapper.vm.mobileFeeCartItem
|
|
||||||
) >= 0;
|
|
||||||
expect(found).toBe(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Service package discount Fee Cart Item
|
// Service package discount Fee Cart Item
|
||||||
test("if there is service package discount fee on the order, a service package discount cart item should be added to the cart", () => {
|
test("if there is service package discount fee on the order, a service package discount cart item should be added to the cart", () => {
|
||||||
// Arrange
|
// Arrange
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="cart">
|
<div class="cart">
|
||||||
<div class="px-0">
|
<div class="px-0">
|
||||||
|
<!-- set class to 'expaned' on line 7 so cart is open on page load. This may be temporary -->
|
||||||
<div
|
<div
|
||||||
class="row vin-toggle flex align-items-center pt-4"
|
class="row vin-toggle flex align-items-center pt-4"
|
||||||
:class="[isExpanded ? 'expanded' : '']"
|
:class="[isExpanded ? '' : 'expanded']"
|
||||||
@click="toggleIsExpanded()">
|
@click="toggleIsExpanded()">
|
||||||
<a
|
<a
|
||||||
aria-label="expand cart"
|
aria-label="expand cart"
|
||||||
|
|
@ -376,9 +377,6 @@ export default {
|
||||||
cartItems.push(this.suppliesRepairCartItem);
|
cartItems.push(this.suppliesRepairCartItem);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.mobileFeeCartItem) {
|
|
||||||
cartItems.push(this.mobileFeeCartItem);
|
|
||||||
}
|
|
||||||
if (this.servicePackageDiscountCartItem) {
|
if (this.servicePackageDiscountCartItem) {
|
||||||
cartItems.push(this.servicePackageDiscountCartItem);
|
cartItems.push(this.servicePackageDiscountCartItem);
|
||||||
}
|
}
|
||||||
|
|
@ -669,13 +667,27 @@ export default {
|
||||||
recycleFeeCartItemName() {
|
recycleFeeCartItemName() {
|
||||||
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
||||||
},
|
},
|
||||||
|
requiresRecycleFeeCartItem() {
|
||||||
|
return !this.isRepair;
|
||||||
|
},
|
||||||
recycleFeeCartItem() {
|
recycleFeeCartItem() {
|
||||||
let cartItem = null;
|
let cartItem = null;
|
||||||
|
|
||||||
const recycleFeeLineItem = this.supportingItems.find(
|
let recycleFeeLineItem = this.supportingItems.find(
|
||||||
(supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
|
(supportingItem) => supportingItem.partType == partTypeStrings.REPLACE_FEE
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (!recycleFeeLineItem && this.requiresRecycleFeeCartItem) {
|
||||||
|
recycleFeeLineItem = {
|
||||||
|
partNumber: partTypeStrings.RECYCLE_FEE,
|
||||||
|
partType: partTypeStrings.REPLACE_FEE,
|
||||||
|
laborAmount: 0,
|
||||||
|
kitPrice: 0,
|
||||||
|
sellingPrice: 0,
|
||||||
|
salesTax: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
if (recycleFeeLineItem) {
|
if (recycleFeeLineItem) {
|
||||||
cartItem = {
|
cartItem = {
|
||||||
name: this.recycleFeeCartItemName,
|
name: this.recycleFeeCartItemName,
|
||||||
|
|
@ -744,44 +756,6 @@ export default {
|
||||||
|
|
||||||
return cartItem;
|
return cartItem;
|
||||||
},
|
},
|
||||||
mobileFeeCartItemName() {
|
|
||||||
return this.getCmsContent("MobileServiceTextWidget", "Text");
|
|
||||||
},
|
|
||||||
mobileFeeCartItem() {
|
|
||||||
let cartItem = null;
|
|
||||||
|
|
||||||
const mobileFeeLineItem = this.supportingItems.find(
|
|
||||||
(lineItem) => lineItem.partType == partTypeStrings.MOBILE_FEE
|
|
||||||
);
|
|
||||||
|
|
||||||
if (mobileFeeLineItem) {
|
|
||||||
cartItem = {
|
|
||||||
name: this.mobileFeeCartItemName,
|
|
||||||
category: cartItemCategories.SUPPORTING_ITEMS,
|
|
||||||
cartItemType: cartItemTypes.MOBILE_FEE,
|
|
||||||
isDisplayed: true,
|
|
||||||
isRemovable: false,
|
|
||||||
subTotal: 0,
|
|
||||||
salesTax: 0,
|
|
||||||
lineItems: [],
|
|
||||||
isCoveredByInsurance: cartItemTypesCoveredByInsurance.includes(
|
|
||||||
cartItemTypes.MOBILE_FEE
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
mobileFeeLineItem.cartItemType = cartItem.cartItemType;
|
|
||||||
cartItem.lineItems.push(mobileFeeLineItem);
|
|
||||||
|
|
||||||
cartItem.subTotal +=
|
|
||||||
(mobileFeeLineItem.kitPrice ?? 0) +
|
|
||||||
(mobileFeeLineItem.laborAmount ?? 0) +
|
|
||||||
(mobileFeeLineItem.sellingPrice ?? 0);
|
|
||||||
|
|
||||||
cartItem.salesTax += mobileFeeLineItem.salesTax ?? 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return cartItem;
|
|
||||||
},
|
|
||||||
servicePackageDiscountCartItemName() {
|
servicePackageDiscountCartItemName() {
|
||||||
return this.getCmsContent("ServicePackageDiscountTextWidget", "Text");
|
return this.getCmsContent("ServicePackageDiscountTextWidget", "Text");
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,9 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
|
||||||
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
||||||
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||||
import { storeActions } from "@/constants/store-actions.js";
|
import { storeActions } from "@/constants/store-actions.js";
|
||||||
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
|
import experimentMixin from "@/mixins/experiment-mixin";
|
||||||
|
import { experimentSettings } from "@/constants/experiments";
|
||||||
import { includesWindshieldReplacement } from "@/helpers/damage-helper";
|
import { includesWindshieldReplacement } from "@/helpers/damage-helper";
|
||||||
import store from "@/store";
|
import store from "@/store";
|
||||||
import router from "@/router";
|
import router from "@/router";
|
||||||
|
|
@ -139,7 +142,11 @@ export async function skipVinLookup() {
|
||||||
? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
|
? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
|
||||||
: false;
|
: false;
|
||||||
|
|
||||||
return isVinOptionalVehicle || !includesWindshieldReplacement();
|
return (
|
||||||
|
isVinOptionalVehicle ||
|
||||||
|
!includesWindshieldReplacement() ||
|
||||||
|
experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function skipVinLookupNotRepair() {
|
export async function skipVinLookupNotRepair() {
|
||||||
|
|
@ -151,7 +158,11 @@ export async function skipVinLookupNotRepair() {
|
||||||
? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
|
? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
|
||||||
: false;
|
: false;
|
||||||
|
|
||||||
return isVinOptionalVehicle || !includesWindshieldReplacement();
|
return (
|
||||||
|
isVinOptionalVehicle ||
|
||||||
|
!includesWindshieldReplacement() ||
|
||||||
|
experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
async function getLazyLoadedComponent(pageName) {
|
async function getLazyLoadedComponent(pageName) {
|
||||||
|
|
|
||||||
|
|
@ -115,6 +115,16 @@ describe("getPageToRouteExistingOrderTo", () => {
|
||||||
store.commit(storeMutations.UPDATE_IS_REPAIR, false);
|
store.commit(storeMutations.UPDATE_IS_REPAIR, false);
|
||||||
store.commit(storeMutations.UPDATE_MAKE, "acura");
|
store.commit(storeMutations.UPDATE_MAKE, "acura");
|
||||||
|
|
||||||
|
const mockExperimentsList = [
|
||||||
|
{
|
||||||
|
universeName: "ConceptFunnel",
|
||||||
|
settings: {
|
||||||
|
SuppressVinCapture: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
store.commit(storeMutations.UPDATE_EXPERIMENTS, mockExperimentsList);
|
||||||
|
|
||||||
// Mock out the lazy load calls for all components.
|
// Mock out the lazy load calls for all components.
|
||||||
mockLazyLoadComponentReturnValues({
|
mockLazyLoadComponentReturnValues({
|
||||||
[fmgPageValues.VEHICLE]: true,
|
[fmgPageValues.VEHICLE]: true,
|
||||||
|
|
|
||||||
|
|
@ -108,6 +108,9 @@ describe("Payment Method Question", () => {
|
||||||
function generateDefaultProps() {
|
function generateDefaultProps() {
|
||||||
return {
|
return {
|
||||||
modelValue: "modelValue",
|
modelValue: "modelValue",
|
||||||
|
hasRecal: false,
|
||||||
|
isApplePay: true,
|
||||||
|
isInsurance: false,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,9 @@
|
||||||
:answers="paymentMethodAnswerData"
|
:answers="paymentMethodAnswerData"
|
||||||
isRequired
|
isRequired
|
||||||
:validationRules="validationRules"
|
:validationRules="validationRules"
|
||||||
|
:hasRecal="hasRecal"
|
||||||
|
:isApplePay="isApplePay"
|
||||||
|
:isInsurance="isInsurance"
|
||||||
v-model="selectedMethod"
|
v-model="selectedMethod"
|
||||||
textPosition="text-start" />
|
textPosition="text-start" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -29,6 +32,9 @@ export default {
|
||||||
props: {
|
props: {
|
||||||
modelValue: String,
|
modelValue: String,
|
||||||
validationRules: String,
|
validationRules: String,
|
||||||
|
hasRecal: Boolean,
|
||||||
|
isApplePay: Boolean,
|
||||||
|
isInsurance: Boolean,
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getAnswersNullSafe(widgetName) {
|
getAnswersNullSafe(widgetName) {
|
||||||
|
|
@ -54,7 +60,30 @@ export default {
|
||||||
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
|
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
|
||||||
},
|
},
|
||||||
paymentMethodAnswerData() {
|
paymentMethodAnswerData() {
|
||||||
const cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
|
var cmsData;
|
||||||
|
if (this.hasRecal) {
|
||||||
|
cmsData = this.getAnswersNullSafe("PaymentMethodHasRecalWidget");
|
||||||
|
} else {
|
||||||
|
if (this.isApplePay) {
|
||||||
|
cmsData = this.getAnswersNullSafe("PaymentMethodWidget");
|
||||||
|
} else {
|
||||||
|
cmsData = this.getAnswersNullSafe("PaymentMethodHasRecalWidget");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasRecal || this.isInsurance) {
|
||||||
|
var tempItems = cmsData.map((answer) => {
|
||||||
|
return {
|
||||||
|
buttonLabel: answer.Text,
|
||||||
|
altText: answer.Text,
|
||||||
|
groupName: "payment-method",
|
||||||
|
value: answer.Name,
|
||||||
|
buttonImage: answer.AnswerImageUrl,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return tempItems.filter((a) => a.value != "Insurance");
|
||||||
|
}
|
||||||
|
|
||||||
return cmsData.map((answer) => {
|
return cmsData.map((answer) => {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -47,10 +47,29 @@ describe("payment-method.vue", () => {
|
||||||
function setupMocks() {
|
function setupMocks() {
|
||||||
store.getters = {
|
store.getters = {
|
||||||
damage: {},
|
damage: {},
|
||||||
lineItems: [],
|
lineItems: {
|
||||||
|
glassParts: [],
|
||||||
|
supportingItems: [],
|
||||||
|
vaps: [],
|
||||||
|
promos: [],
|
||||||
|
},
|
||||||
order: {
|
order: {
|
||||||
payment: {
|
payment: {
|
||||||
isPia: false,
|
isPia: false,
|
||||||
|
insuranceCoverage: {
|
||||||
|
isVerified: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
lineItems: {
|
||||||
|
glassParts: [],
|
||||||
|
supportingItems: [],
|
||||||
|
vaps: [],
|
||||||
|
promos: [],
|
||||||
|
},
|
||||||
|
policy: {
|
||||||
|
currentDeductible: 123,
|
||||||
|
isNoComp: false,
|
||||||
|
isItac: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
policy: {
|
policy: {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||||
<loadingModal notFullScreen ref="loadingModal" />
|
<loadingModal notFullScreen ref="loadingModal" />
|
||||||
<div class="container-fluid">
|
<div class="container-fluid payment-method">
|
||||||
<div class="row justify-content-center">
|
<div class="row justify-content-center">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||||
|
|
@ -22,6 +22,7 @@
|
||||||
<hr class="my-0" />
|
<hr class="my-0" />
|
||||||
|
|
||||||
<cart
|
<cart
|
||||||
|
ref="cart"
|
||||||
:damage="damageInfo"
|
:damage="damageInfo"
|
||||||
:availableVaps="availableVaps"
|
:availableVaps="availableVaps"
|
||||||
:allowItemRemoval="true"
|
:allowItemRemoval="true"
|
||||||
|
|
@ -45,13 +46,34 @@
|
||||||
v-bind:isDismissible="false" />
|
v-bind:isDismissible="false" />
|
||||||
</div>
|
</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
|
<paymentMethodQuestion
|
||||||
v-if="!isPiaDisabled"
|
v-if="isPiaEnabled && totalAmountDue > 0"
|
||||||
v-model="paymentMethodInternalModel"
|
v-model="paymentMethodInternalModel"
|
||||||
validationRules="option-required" />
|
:hasRecal="hasRecal"
|
||||||
|
:isApplePay="isApplePay"
|
||||||
|
:isInsurance="isInsurance"
|
||||||
|
validationRules="payment-method-required" />
|
||||||
|
|
||||||
<alert
|
<alert
|
||||||
v-if="isPiaDisabled"
|
v-if="!isPiaEnabled && totalAmountDue > 0"
|
||||||
:isDismissible="false"
|
:isDismissible="false"
|
||||||
alertClass="alert-info"
|
alertClass="alert-info"
|
||||||
cmsWidgetName="NoPiaDisclaimerWidget"
|
cmsWidgetName="NoPiaDisclaimerWidget"
|
||||||
|
|
@ -65,6 +87,11 @@
|
||||||
buttonSize
|
buttonSize
|
||||||
@back-clicked="backButtonAction"
|
@back-clicked="backButtonAction"
|
||||||
@ForwardClicked="forwardButtonAction" />
|
@ForwardClicked="forwardButtonAction" />
|
||||||
|
|
||||||
|
<contentGroupModal
|
||||||
|
ref="RecalModal"
|
||||||
|
cmsWidgetName="RecalModal"
|
||||||
|
class="recal-modal" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -82,13 +109,20 @@ import cart from "@/fmg-components/cart/cart";
|
||||||
import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
|
import reviewDropdown from "@/layouts/payment-method/review-dropdown/review-dropdown";
|
||||||
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
|
import { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
|
||||||
import alert from "@/ux-components/alert/alert";
|
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
|
// Supporting Items
|
||||||
import baseMixin from "@/mixins/base-mixin.js";
|
import baseMixin from "@/mixins/base-mixin.js";
|
||||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||||
import { storeActions } from "@/constants/store-actions";
|
import { storeActions } from "@/constants/store-actions";
|
||||||
import store from "@/store";
|
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 { paymentMethods } from "@/constants/payment-method-constants";
|
||||||
import { experimentSettings } from "@/constants/experiments";
|
import { experimentSettings } from "@/constants/experiments";
|
||||||
import {
|
import {
|
||||||
|
|
@ -115,10 +149,14 @@ import { partTypeStrings } from "@/constants/part-type-strings";
|
||||||
import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
||||||
import { coverageStatus } from "@/constants/insurance";
|
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 {
|
export default {
|
||||||
name: "paymentMethod",
|
name: "paymentMethod",
|
||||||
|
props: {
|
||||||
|
recyclingModalCmsWidgetName: String,
|
||||||
|
},
|
||||||
async beforeRouteEnter(to, from, next) {
|
async beforeRouteEnter(to, from, next) {
|
||||||
// Call APIs
|
// Call APIs
|
||||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||||
|
|
@ -308,9 +346,15 @@ export default {
|
||||||
availableVaps: [],
|
availableVaps: [],
|
||||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||||
inactivePromos: this.getInactivePromosFromStore(),
|
inactivePromos: this.getInactivePromosFromStore(),
|
||||||
|
isRecalAckOptIn: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
doesCopyContainRouterLink,
|
||||||
|
getRouterLinkRouteFromCopy,
|
||||||
|
navigateWithScenario(scenarioName) {
|
||||||
|
this.$router.navigateWithoutSaving(scenarioName, this.$route);
|
||||||
|
},
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
// Service Location
|
// Service Location
|
||||||
const serviceLocation = store.getters.order.serviceLocation;
|
const serviceLocation = store.getters.order.serviceLocation;
|
||||||
|
|
@ -450,14 +494,12 @@ export default {
|
||||||
this.paymentMethod,
|
this.paymentMethod,
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
// save lineitems as they now have salestax added
|
// save lineitems as they now have salestax added
|
||||||
await this.dispatchStoreAction(
|
await this.dispatchStoreAction(
|
||||||
storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
|
storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
|
||||||
this.lineItems.glassParts,
|
this.lineItems.glassParts,
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
await this.dispatchStoreAction(
|
await this.dispatchStoreAction(
|
||||||
storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||||
this.lineItems.supportingItems,
|
this.lineItems.supportingItems,
|
||||||
|
|
@ -472,7 +514,6 @@ export default {
|
||||||
},
|
},
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
|
|
||||||
if (this.paymentMethod == paymentMethods.LATER) {
|
if (this.paymentMethod == paymentMethods.LATER) {
|
||||||
// this creates the final work order
|
// this creates the final work order
|
||||||
await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
|
await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
|
||||||
|
|
@ -480,9 +521,17 @@ export default {
|
||||||
this.navigationScenarios.CLICKED_FORWARD,
|
this.navigationScenarios.CLICKED_FORWARD,
|
||||||
this.$route
|
this.$route
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
if (this.paymentMethod == paymentMethods.INSURANCE) {
|
||||||
|
this.dispatchStoreAction(this.storeActions.SAVE_PAYMENT_TYPE, true, false);
|
||||||
|
this.$router.navigateWithoutSaving(
|
||||||
|
this.navigationScenarios.CLICKED_INSURANCE,
|
||||||
|
this.$route
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
this.setupPia();
|
this.setupPia();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
async setupPia() {
|
async setupPia() {
|
||||||
this.$refs.loadingModal.showModal();
|
this.$refs.loadingModal.showModal();
|
||||||
|
|
@ -512,8 +561,26 @@ export default {
|
||||||
hasSubmittedOrder() {
|
hasSubmittedOrder() {
|
||||||
return this.$store.getters.hasSubmittedOrder;
|
return this.$store.getters.hasSubmittedOrder;
|
||||||
},
|
},
|
||||||
|
openModal(modalName) {
|
||||||
|
this.$refs[modalName].openModal();
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
hasRecal() {
|
||||||
|
const recalLineItem = this.$store.getters.order.lineItems.supportingItems.find(
|
||||||
|
(lineItem) => lineItem.partType == partTypeStrings.RECALIBRATION
|
||||||
|
);
|
||||||
|
if (recalLineItem) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
isApplePay() {
|
||||||
|
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
damageInfo() {
|
damageInfo() {
|
||||||
return this.$store.getters.damage;
|
return this.$store.getters.damage;
|
||||||
},
|
},
|
||||||
|
|
@ -561,6 +628,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:
|
||||||
|
|
@ -571,21 +642,21 @@ export default {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
isPiaDisabled() {
|
totalAmountDue() {
|
||||||
|
return baseMixin.methods.getAmountDue(this.lineItems);
|
||||||
|
},
|
||||||
|
isPiaEnabled() {
|
||||||
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
|
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
|
||||||
const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
|
const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
|
||||||
|
|
||||||
var isEnabled = false;
|
|
||||||
if (this.isInsurance) {
|
if (this.isInsurance) {
|
||||||
isEnabled = piaInsurance === "true" && this.currentDeductible !== 0;
|
return piaInsurance === "true" && this.currentDeductible > 0;
|
||||||
} else {
|
} else {
|
||||||
isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
|
return piaExperience === "PIA Optional" || piaExperience === "PIA Required";
|
||||||
}
|
}
|
||||||
|
|
||||||
return !isEnabled;
|
|
||||||
},
|
},
|
||||||
paymentMethod() {
|
paymentMethod() {
|
||||||
if (this.isPiaDisabled) {
|
if (!this.isPiaEnabled) {
|
||||||
return paymentMethods.LATER;
|
return paymentMethods.LATER;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -652,11 +723,27 @@ export default {
|
||||||
alert,
|
alert,
|
||||||
paymentMethodQuestion,
|
paymentMethodQuestion,
|
||||||
reviewDropdown,
|
reviewDropdown,
|
||||||
|
textBlock,
|
||||||
|
checkboxQuestion,
|
||||||
|
contentGroupModal,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style></style>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.checkbox-group {
|
||||||
|
align-items: start;
|
||||||
|
> * {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.questions-about-service {
|
||||||
|
.service-questions {
|
||||||
|
font-weight: $font-weight-bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
.cart {
|
.cart {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -664,4 +751,22 @@ export default {
|
||||||
color: $gray-550;
|
color: $gray-550;
|
||||||
margin: 0;
|
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>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ export default {
|
||||||
console.log("Error during payment: " + piaError);
|
console.log("Error during payment: " + piaError);
|
||||||
const paymentPageNavScenario =
|
const paymentPageNavScenario =
|
||||||
store.getters.order.payment.piaType === paymentMethods.CREDIT_CARD ||
|
store.getters.order.payment.piaType === paymentMethods.CREDIT_CARD ||
|
||||||
|
store.getters.order.payment.piaType === paymentMethods.APPLE_PAY ||
|
||||||
store.getters.order.payment.piaType === paymentMethods.AFTERPAY;
|
store.getters.order.payment.piaType === paymentMethods.AFTERPAY;
|
||||||
if (paymentPageNavScenario) {
|
if (paymentPageNavScenario) {
|
||||||
this.$router.navigateWithoutSaving(
|
this.$router.navigateWithoutSaving(
|
||||||
|
|
@ -47,13 +48,30 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
switch (store.getters.order.payment.piaType) {
|
switch (store.getters.order.payment.piaType) {
|
||||||
case paymentMethods.CREDIT_CARD:
|
case paymentMethods.CREDIT_CARD:
|
||||||
|
case paymentMethods.APPLE_PAY:
|
||||||
case paymentMethods.AFTERPAY:
|
case paymentMethods.AFTERPAY:
|
||||||
await this.processCreditCardResponse();
|
await this.processCreditCardResponse();
|
||||||
break;
|
break;
|
||||||
case paymentMethods.PAYPAL:
|
case paymentMethods.PAYPAL:
|
||||||
await this.processPaypalResponse();
|
await this.processPaypalResponse();
|
||||||
break;
|
break;
|
||||||
default:
|
default: {
|
||||||
|
// If we're here, the payment-method did not get properly set in
|
||||||
|
// payment.vue method handleIFrameContentWindowMessage, we will look and see if
|
||||||
|
// if we can default it to credit card. The payment method type is most likely still
|
||||||
|
// set to PayNow originally set in payment-method.vue
|
||||||
|
const lastFour = getQuerystringParameter(queryStrings.LAST_FOUR);
|
||||||
|
if (lastFour) {
|
||||||
|
console.log(
|
||||||
|
new Date() + ": Payment method credit card selected by default"
|
||||||
|
);
|
||||||
|
this.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||||
|
paymentMethods.CREDIT_CARD,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
await this.processCreditCardResponse();
|
||||||
|
} else {
|
||||||
var msg = "Unknown Pia type: " + store.getters.order.payment.piaType;
|
var msg = "Unknown Pia type: " + store.getters.order.payment.piaType;
|
||||||
console.log(msg);
|
console.log(msg);
|
||||||
this.$router.navigateWithoutSaving(
|
this.$router.navigateWithoutSaving(
|
||||||
|
|
@ -64,6 +82,8 @@ export default {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
|
|
|
||||||
|
|
@ -40,7 +40,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,6 +193,7 @@
|
||||||
<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>
|
||||||
|
|
||||||
|
|
@ -256,7 +258,6 @@ export default {
|
||||||
piaLineItems: "",
|
piaLineItems: "",
|
||||||
lineItems: [],
|
lineItems: [],
|
||||||
availableVaps: [],
|
availableVaps: [],
|
||||||
|
|
||||||
shouldBlockInteraction: false,
|
shouldBlockInteraction: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
@ -405,6 +406,13 @@ export default {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
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`;
|
||||||
|
|
@ -650,14 +658,26 @@ 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", "*");
|
||||||
|
console.log(new Date() + ": Sent applepay");
|
||||||
|
}
|
||||||
|
|
||||||
if (this.paymentType == "cc") {
|
if (this.paymentType == "cc") {
|
||||||
iframe.contentWindow.postMessage("CreditCardChosen", "*");
|
iframe.contentWindow.postMessage("CreditCardChosen", "*");
|
||||||
|
console.log(new Date() + ": Sent creditcard");
|
||||||
} else if (this.paymentType == "ap") {
|
} else if (this.paymentType == "ap") {
|
||||||
iframe.contentWindow.postMessage("afterpay", "*");
|
iframe.contentWindow.postMessage("afterpay", "*");
|
||||||
|
console.log(new Date() + ": Sent afterpay");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -681,8 +701,38 @@ export default {
|
||||||
this.backButtonAction();
|
this.backButtonAction();
|
||||||
}
|
}
|
||||||
if (event.data.indexOf("creditCardSubmit") > -1) {
|
if (event.data.indexOf("creditCardSubmit") > -1) {
|
||||||
|
console.log(new Date() + ": Payment method credit card selected");
|
||||||
|
this.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||||
|
paymentMethods.CREDIT_CARD,
|
||||||
|
false
|
||||||
|
);
|
||||||
this.setUIBlock(true);
|
this.setUIBlock(true);
|
||||||
}
|
}
|
||||||
|
if (event.data.indexOf("afterpayPaymentReceived") > -1) {
|
||||||
|
console.log(new Date() + ": Payment method afterpay selected");
|
||||||
|
this.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||||
|
paymentMethods.AFTERPAY,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (event.data.indexOf("applepayOpened") > -1) {
|
||||||
|
console.log(new Date() + ": Payment method applepay selected");
|
||||||
|
this.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||||
|
paymentMethods.APPLE_PAY,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (event.data.indexOf("showLoaderForPaypal") > -1) {
|
||||||
|
console.log(new Date() + ": Payment method paypal selected");
|
||||||
|
this.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_PAYMENT_METHOD_CHOICE,
|
||||||
|
paymentMethods.PAYPAL,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
setIFrameListener() {
|
setIFrameListener() {
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,10 @@
|
||||||
cmsWidgetName="CashOrInsuranceQuestionWidget"
|
cmsWidgetName="CashOrInsuranceQuestionWidget"
|
||||||
v-model="isInsuranceSelected"
|
v-model="isInsuranceSelected"
|
||||||
groupName="CashOrInsuranceQuestion" />
|
groupName="CashOrInsuranceQuestion" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-12 col-xl-8">
|
||||||
<servicePackageQuestion
|
<servicePackageQuestion
|
||||||
ref="servicePackage"
|
ref="servicePackage"
|
||||||
cashCmsWidgetName="CashServicePackageQuestionWidget"
|
cashCmsWidgetName="CashServicePackageQuestionWidget"
|
||||||
|
|
@ -35,7 +38,10 @@
|
||||||
v-on="{ 'buttonEvent.openModal': openModalAction }"
|
v-on="{ 'buttonEvent.openModal': openModalAction }"
|
||||||
validationRules="option-required"
|
validationRules="option-required"
|
||||||
isRequired />
|
isRequired />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row justify-content-center">
|
||||||
|
<div class="col-md-6 col-xl-4">
|
||||||
<afterpayModalBanner
|
<afterpayModalBanner
|
||||||
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
|
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
|
||||||
cmsWidgetName="AfterpayModalWidget"
|
cmsWidgetName="AfterpayModalWidget"
|
||||||
|
|
@ -44,14 +50,14 @@
|
||||||
:lineItems="lineItems" />
|
:lineItems="lineItems" />
|
||||||
|
|
||||||
<recalDisclaimer
|
<recalDisclaimer
|
||||||
class="my-5"
|
class="mb-0"
|
||||||
cmsWidgetName="RecalDisclaimerWidget"
|
cmsWidgetName="RecalDisclaimerWidget"
|
||||||
v-if="isRecalibrationOnOrder"
|
v-if="isRecalibrationOnOrder"
|
||||||
v-on="{ textLinkClicked: openModalAction }"
|
v-on="{ textLinkClicked: openModalAction }"
|
||||||
alertClass="alert-info" />
|
alertClass="alert-info" />
|
||||||
|
|
||||||
<promoModalQuestion
|
<promoModalQuestion
|
||||||
class="small mt-4"
|
class="small mt-6 d-md-flex justify-content-md-center"
|
||||||
v-model="lineItems"
|
v-model="lineItems"
|
||||||
:addableVaps="addableVaps"
|
:addableVaps="addableVaps"
|
||||||
pageName="quote"
|
pageName="quote"
|
||||||
|
|
@ -63,7 +69,7 @@
|
||||||
cmsWidgetName="quoteDisclaimer"
|
cmsWidgetName="quoteDisclaimer"
|
||||||
justifyText="left"
|
justifyText="left"
|
||||||
typeStyle="caption"
|
typeStyle="caption"
|
||||||
class="mt-4" />
|
class="mt-6" />
|
||||||
|
|
||||||
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
|
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
|
||||||
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
|
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
|
||||||
|
|
@ -194,6 +200,18 @@ export default {
|
||||||
...servicePackageDiscountPart,
|
...servicePackageDiscountPart,
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// When calling pricing from the quote page, always use the cash parent account
|
||||||
|
baseMixin.methods.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_PARENT_ACCOUNT_NUMBER,
|
||||||
|
applicationConfig.CASH_PARENT_ACCOUNT_NUMBER,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
baseMixin.methods.dispatchStoreAction(
|
||||||
|
storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
|
||||||
|
applicationConfig.CASH_DEFAULT_BILL_TO_ACCOUNT_NUMBER,
|
||||||
|
false
|
||||||
|
);
|
||||||
|
|
||||||
const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
|
const pricingResults = await baseMixin.methods.dispatchStoreActionWithLogging(
|
||||||
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -238,7 +238,7 @@ export default {
|
||||||
getPackagePrice(packageName, { discountedPrice = false, servicePackageDiscount = false }) {
|
getPackagePrice(packageName, { discountedPrice = false, servicePackageDiscount = false }) {
|
||||||
var lineItemsToPrice = [...this.nullSafeAvailableLineItems];
|
var lineItemsToPrice = [...this.nullSafeAvailableLineItems];
|
||||||
if (this.isRecalibrationOnOrder) {
|
if (this.isRecalibrationOnOrder) {
|
||||||
lineItemsToPrice = this.nullSafeAvailableLineItems.filter((item) => {
|
lineItemsToPrice = lineItemsToPrice.filter((item) => {
|
||||||
return item.partType != partTypeStrings.RECALIBRATION;
|
return item.partType != partTypeStrings.RECALIBRATION;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -136,24 +136,26 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<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-main {
|
||||||
.package-wrapper {
|
.package-wrapper {
|
||||||
margin: 0.5rem 0;
|
margin: 0.5rem 0;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
margin: 1rem 0.5rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
display: flex;
|
||||||
|
min-height: 320px;
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
display: flex;
|
||||||
|
min-height: 276px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"] {
|
input[type="radio"] {
|
||||||
|
|
@ -180,7 +182,7 @@ export default {
|
||||||
}
|
}
|
||||||
&.has-text {
|
&.has-text {
|
||||||
border-radius: 0 0 0.5rem 0.5rem;
|
border-radius: 0 0 0.5rem 0.5rem;
|
||||||
border: 1px solid #469d2a !important;
|
border: 1px solid #469d2a; //Temp color
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
|
|
@ -257,23 +259,35 @@ export default {
|
||||||
|
|
||||||
.package-footer {
|
.package-footer {
|
||||||
color: $red;
|
color: $red;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.package-specs {
|
.package-specs {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 0;
|
|
||||||
transition: all 0.5s ease;
|
transition: all 0.5s ease;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
max-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 500;
|
font-weight: 600;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
span {
|
span {
|
||||||
&.pricing-info {
|
&.pricing-info {
|
||||||
color: $green;
|
color: $green;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.75rem;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
color: $gray-500;
|
||||||
|
}
|
||||||
span.strikethrough-price {
|
span.strikethrough-price {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
|
|
@ -291,23 +305,30 @@ export default {
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
&.service-package-discount {
|
&.service-package-discount {
|
||||||
color: #469d2a;
|
color: #469d2a; //Temp color
|
||||||
text-align: end;
|
text-align: end;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
div.strikethrough-discount-price {
|
div.strikethrough-discount-price {
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
font-weight: 500;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 0.875rem;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: $gray-550;
|
color: $gray-500;
|
||||||
padding-right: 2px;
|
padding-right: 2px;
|
||||||
}
|
}
|
||||||
div.discount-price {
|
div.discount-price {
|
||||||
color: #469d2a;
|
color: #469d2a; //Temp color
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 26px;
|
font-size: 1.625rem;
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.75rem;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -318,6 +339,7 @@ export default {
|
||||||
margin-bottom: 0.5rem;
|
margin-bottom: 0.5rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
line-height: 1.714;
|
line-height: 1.714;
|
||||||
|
color: $gray-550;
|
||||||
a {
|
a {
|
||||||
line-height: 1.714;
|
line-height: 1.714;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -337,8 +359,27 @@ export default {
|
||||||
|
|
||||||
.hide-when-closed {
|
.hide-when-closed {
|
||||||
display: none;
|
display: none;
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.discount-text {
|
||||||
|
height: 2rem;
|
||||||
|
display: flex;
|
||||||
|
border-top-right-radius: 0.5rem;
|
||||||
|
border-top-left-radius: 0.5rem;
|
||||||
|
background-color: #469d2a; //Temp color
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -24,11 +24,6 @@
|
||||||
{{ errorMessage }}
|
{{ errorMessage }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<textBlock
|
|
||||||
v-if="mobileFeeApplies"
|
|
||||||
:customText="mobileFeeText"
|
|
||||||
cmsWidgetName="MobileFeeDisclaimerWidget"
|
|
||||||
typeStyle="caption" />
|
|
||||||
</div>
|
</div>
|
||||||
<modal
|
<modal
|
||||||
:ref="modalName"
|
:ref="modalName"
|
||||||
|
|
@ -154,7 +149,6 @@ export default {
|
||||||
alertInvalidZipWidgetName: String,
|
alertInvalidZipWidgetName: String,
|
||||||
customComponentId: String,
|
customComponentId: String,
|
||||||
validationRules: String,
|
validationRules: String,
|
||||||
mobileFeeApplies: Boolean,
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
mobileLocationLinkPromptText() {
|
mobileLocationLinkPromptText() {
|
||||||
|
|
@ -182,21 +176,6 @@ export default {
|
||||||
modalHeaderText() {
|
modalHeaderText() {
|
||||||
return this.getCmsContent(this.modalWidgetName, "HeaderText");
|
return this.getCmsContent(this.modalWidgetName, "HeaderText");
|
||||||
},
|
},
|
||||||
mobileFeeText() {
|
|
||||||
const cmsContentText = this.getCmsContent("MobileFeeDisclaimerWidget", "Text");
|
|
||||||
return cmsContentText.replaceAll("{custom:mobileFee}", this.mobileFee);
|
|
||||||
},
|
|
||||||
mobileFee() {
|
|
||||||
if (!this.mobileFeePart) {
|
|
||||||
return 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
this.mobileFeePart.laborAmount +
|
|
||||||
this.mobileFeePart.sellingPrice +
|
|
||||||
this.mobileFeePart.kitPrice
|
|
||||||
);
|
|
||||||
},
|
|
||||||
modalFooterText() {
|
modalFooterText() {
|
||||||
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -57,6 +57,12 @@
|
||||||
cmsWidgetName="AlertNoShopsWidget"
|
cmsWidgetName="AlertNoShopsWidget"
|
||||||
v-if="displayNoShopsAlert"
|
v-if="displayNoShopsAlert"
|
||||||
alertClass="alert-warning" />
|
alertClass="alert-warning" />
|
||||||
|
<alert
|
||||||
|
ref="alertMobileFeeFree"
|
||||||
|
class="my-5"
|
||||||
|
cmsWidgetName="AlertMobileFeeFreeWidget"
|
||||||
|
v-if="isServiceableMobile && !isInsurance"
|
||||||
|
alertClass="alert-success" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row justify-content-center appointment-type">
|
<div class="row justify-content-center appointment-type">
|
||||||
|
|
@ -81,7 +87,6 @@
|
||||||
v-if="selectedAppointmentType === 'Mobile'"
|
v-if="selectedAppointmentType === 'Mobile'"
|
||||||
v-model="mobileLocationQuestions"
|
v-model="mobileLocationQuestions"
|
||||||
:mobileFeePart="mobileFeePart"
|
:mobileFeePart="mobileFeePart"
|
||||||
:mobileFeeApplies="mobileFeeApplies"
|
|
||||||
@updated-mobile-fee-part="setMobileFeePart"
|
@updated-mobile-fee-part="setMobileFeePart"
|
||||||
@updated-serviceability="setServiceabilityDetails"
|
@updated-serviceability="setServiceabilityDetails"
|
||||||
@updated-contains-military-base="setContainsMilitaryBase"
|
@updated-contains-military-base="setContainsMilitaryBase"
|
||||||
|
|
@ -355,6 +360,9 @@ export default {
|
||||||
recalibrationInformationModal() {
|
recalibrationInformationModal() {
|
||||||
return this.$refs.recalibrationInformationModal;
|
return this.$refs.recalibrationInformationModal;
|
||||||
},
|
},
|
||||||
|
isInsurance() {
|
||||||
|
return store.getters.payment.isInsurance;
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
arePagePrerequisitesValid() {
|
arePagePrerequisitesValid() {
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import router from "@/router";
|
||||||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||||
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
||||||
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
||||||
|
import { experimentSettings } from "../../constants/experiments";
|
||||||
|
|
||||||
// Constants
|
// Constants
|
||||||
|
|
||||||
|
|
@ -23,6 +24,16 @@ let mockCmsContent = {
|
||||||
let mockStoreActionData = {};
|
let mockStoreActionData = {};
|
||||||
|
|
||||||
let mockStoreData = {};
|
let mockStoreData = {};
|
||||||
|
let mockExperimentSettings = {
|
||||||
|
experiments: [
|
||||||
|
{
|
||||||
|
universeName: "ConceptFunnel",
|
||||||
|
settings: {
|
||||||
|
SuppressVinCapture: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
function resetMockStoreData() {
|
function resetMockStoreData() {
|
||||||
mockStoreData = {
|
mockStoreData = {
|
||||||
|
|
@ -163,6 +174,7 @@ function resetMockStoreData() {
|
||||||
|
|
||||||
function applyMockStoreDataToGetters() {
|
function applyMockStoreDataToGetters() {
|
||||||
store.getters = {
|
store.getters = {
|
||||||
|
experimentSettings: mockExperimentSettings,
|
||||||
order: mockStoreData,
|
order: mockStoreData,
|
||||||
damage: mockStoreData.damage,
|
damage: mockStoreData.damage,
|
||||||
payment: mockStoreData.payment,
|
payment: mockStoreData.payment,
|
||||||
|
|
@ -170,6 +182,7 @@ function applyMockStoreDataToGetters() {
|
||||||
leadGenServiceZip: mockStoreData.leadGenServiceZip,
|
leadGenServiceZip: mockStoreData.leadGenServiceZip,
|
||||||
};
|
};
|
||||||
store.state.order = mockStoreData;
|
store.state.order = mockStoreData;
|
||||||
|
store.state.applicationUser.experiments = mockExperimentSettings;
|
||||||
}
|
}
|
||||||
|
|
||||||
async function mockDispatchStoreAction(actionName) {
|
async function mockDispatchStoreAction(actionName) {
|
||||||
|
|
|
||||||
|
|
@ -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,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -1864,6 +1864,8 @@ export const actions = {
|
||||||
order.payment.piaType == paymentMethods.CREDIT_CARD ? true : false,
|
order.payment.piaType == paymentMethods.CREDIT_CARD ? true : false,
|
||||||
isPaypal: order.payment.piaType == paymentMethods.PAYPAL ? true : false,
|
isPaypal: order.payment.piaType == paymentMethods.PAYPAL ? true : false,
|
||||||
isAfterPay: order.payment.piaType == paymentMethods.AFTERPAY ? true : false,
|
isAfterPay: order.payment.piaType == paymentMethods.AFTERPAY ? true : false,
|
||||||
|
isApplePay:
|
||||||
|
order.payment.piaType == paymentMethods.APPLE_PAY ? true : false,
|
||||||
paypalToken: order.payment.paypalToken,
|
paypalToken: order.payment.paypalToken,
|
||||||
nextGenSettledAmount: order.payment.nextGenSettledAmount,
|
nextGenSettledAmount: order.payment.nextGenSettledAmount,
|
||||||
ccToken: {
|
ccToken: {
|
||||||
|
|
|
||||||
|
|
@ -37,6 +37,10 @@ body {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//Quote page max-width for service packages
|
||||||
|
.col-xl-8 {
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
//END set max-width on columns
|
//END set max-width on columns
|
||||||
}
|
}
|
||||||
.pointer {
|
.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_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