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:
|
||||
|
||||
```bash
|
||||
sass --no-source-map --watch scss:css
|
||||
sass --watch scss:css
|
||||
```
|
||||
This will compile and output .css files (into the public/css folder) that can be consumed by the Payment page.
|
||||
|
||||
# Do not use the .css files on their own. You must use the .scss files and have Sass compile them to .css files.
|
||||
|
||||
From a windows machine, I ran an install for sass even though it is listed in node_modules. It would not run unless I did an install:
|
||||
npm install -g sass
|
||||
sass --no-source-map --watch scss:css
|
||||
|
||||
Then committed the css files and reverted the package.json file so I didn't commit an upgraded version of sass
|
||||
|
|
@ -203,3 +203,111 @@ body .cc-error-container #alert-message {
|
|||
background-color: #fcbfbb;
|
||||
border: 1px solid #d4281c;
|
||||
}
|
||||
|
||||
#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
|
||||
border-radius: 5px;
|
||||
}
|
||||
#fmg-checkout-shared .form-group .list-group.radio .list-group-item label {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
#fmg-checkout-shared #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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item .checkbox .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .checkbox.list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group .list-group-item label {
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.list-group.radio .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.list-group.radio .list-group-item .radio .list-group,
|
||||
.list-group.radio .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item {
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item input[type=radio] {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
|
||||
border-radius: 48px;
|
||||
}
|
||||
|
||||
.row > .form-group > .glyphicon {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group .control-label {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.form-group .form-control {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.form-group {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.form-group {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
.list-group {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.list-group-item:first-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
a.list-group-item {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
a.list-group-item .list-group-item-heading {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
a.list-group-item:hover,
|
||||
a.list-group-item:focus {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.list-group-item.disabled,
|
||||
.list-group-item.disabled:hover,
|
||||
.list-group-item.disabled:focus {
|
||||
background-color: #f0f1f2;
|
||||
color: #9aa1a3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.list-group-item.disabled .list-group-item-heading,
|
||||
.list-group-item.disabled:hover .list-group-item-heading,
|
||||
.list-group-item.disabled:focus .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.list-group-item.disabled .list-group-item-text,
|
||||
.list-group-item.disabled:hover .list-group-item-text,
|
||||
.list-group-item.disabled:focus .list-group-item-text {
|
||||
color: #9aa1a3;
|
||||
}
|
||||
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
z-index: 2;
|
||||
color: #ffffff;
|
||||
background-color: #167cac;
|
||||
border-color: #167cac;
|
||||
}
|
||||
|
||||
.list-group-item.active .list-group-item-heading,
|
||||
.list-group-item.active:hover .list-group-item-heading,
|
||||
.list-group-item.active:focus .list-group-item-heading,
|
||||
.list-group-item.active .list-group-item-heading > small,
|
||||
.list-group-item.active:hover .list-group-item-heading > small,
|
||||
.list-group-item.active:focus .list-group-item-heading > small,
|
||||
.list-group-item.active .list-group-item-heading > .small,
|
||||
.list-group-item.active:hover .list-group-item-heading > .small,
|
||||
.list-group-item.active:focus .list-group-item-heading > .small {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.list-group-item.active .list-group-item-text,
|
||||
.list-group-item.active:hover .list-group-item-text,
|
||||
.list-group-item.active:focus .list-group-item-text {
|
||||
color: #9cd7f2;
|
||||
}
|
||||
|
||||
.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
background-color: #e6f2ec;
|
||||
}
|
||||
|
||||
a.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
}
|
||||
|
||||
a.list-group-item-success .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-success:hover,
|
||||
a.list-group-item-success:focus {
|
||||
color: #cacbcc;
|
||||
background-color: #d5e9df;
|
||||
}
|
||||
|
||||
a.list-group-item-success.active,
|
||||
a.list-group-item-success.active:hover,
|
||||
a.list-group-item-success.active:focus {
|
||||
color: #fff;
|
||||
background-color: #cacbcc;
|
||||
border-color: #cacbcc;
|
||||
}
|
||||
|
||||
.list-group-item-info {
|
||||
color: #125b7e;
|
||||
background-color: #e7f1f6;
|
||||
}
|
||||
|
||||
a.list-group-item-info {
|
||||
color: #125b7e;
|
||||
}
|
||||
|
||||
a.list-group-item-info .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-info:hover,
|
||||
a.list-group-item-info:focus {
|
||||
color: #125b7e;
|
||||
background-color: #d4e6ef;
|
||||
}
|
||||
|
||||
a.list-group-item-info.active,
|
||||
a.list-group-item-info.active:hover,
|
||||
a.list-group-item-info.active:focus {
|
||||
color: #fff;
|
||||
background-color: #125b7e;
|
||||
border-color: #125b7e;
|
||||
}
|
||||
|
||||
.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
background-color: #fef6e8;
|
||||
}
|
||||
|
||||
a.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
}
|
||||
|
||||
a.list-group-item-warning .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-warning:hover,
|
||||
a.list-group-item-warning:focus {
|
||||
color: #f8af1c;
|
||||
background-color: #fdecd0;
|
||||
}
|
||||
|
||||
a.list-group-item-warning.active,
|
||||
a.list-group-item-warning.active:hover,
|
||||
a.list-group-item-warning.active:focus {
|
||||
color: #fff;
|
||||
background-color: #f8af1c;
|
||||
border-color: #f8af1c;
|
||||
}
|
||||
|
||||
.list-group-item-danger {
|
||||
color: #da291c;
|
||||
background-color: #fbe9e8;
|
||||
}
|
||||
|
||||
a.list-group-item-danger {
|
||||
color: #da291c;
|
||||
}
|
||||
|
||||
a.list-group-item-danger .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a.list-group-item-danger:hover,
|
||||
a.list-group-item-danger:focus {
|
||||
color: #da291c;
|
||||
background-color: #f7d4d2;
|
||||
}
|
||||
|
||||
a.list-group-item-danger.active,
|
||||
a.list-group-item-danger.active:hover,
|
||||
a.list-group-item-danger.active:focus {
|
||||
color: #fff;
|
||||
background-color: #da291c;
|
||||
border-color: #da291c;
|
||||
}
|
||||
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.radio .list-group.paymentSelection, .radio.list-group.paymentSelection {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (max-width: 33.9em) {
|
||||
.radio .list-group.paymentSelection label, .radio .list-group.paymentSelection a, .radio.list-group.paymentSelection label, .radio.list-group.paymentSelection a {
|
||||
max-height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.checkbox.list-group,
|
||||
.checkbox.list-group,
|
||||
.radio.list-group,
|
||||
.radio.list-group {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item > label,
|
||||
.form-group.radio .list-group .list-group-item > label,
|
||||
.checkbox.list-group .list-group-item > label,
|
||||
.radio.list-group .list-group-item > label {
|
||||
margin-bottom: initial;
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
padding: 12px 27px 12px 33px;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item,
|
||||
.form-group.radio .list-group .list-group-item,
|
||||
.checkbox.list-group .list-group-item,
|
||||
.radio.list-group .list-group-item {
|
||||
margin-bottom: 12px;
|
||||
border-width: 1px;
|
||||
/* border-color: #cacbcc; */
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item.active,
|
||||
.form-group.radio .list-group .list-group-item.active,
|
||||
.checkbox.list-group .list-group-item.active,
|
||||
.radio.list-group .list-group-item.active {
|
||||
background-color: #e7f1f6;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
min-height: 23px;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#paypalParentLink label,
|
||||
#afterpayParentLink label,
|
||||
#creditCardParentLink label {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
#paypalParentLink label .paymentOptionText,
|
||||
#creditCardParentLink label .paymentOptionText {
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
html #creditCardParentLink.list-group-item {
|
||||
border-radius: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
window.dataLayer = [{}];
|
||||
</script>
|
||||
<script><%= process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY %></script>
|
||||
<script src="https://applepay.cdn-apple.com/jsapi/v1.1.0/apple-pay-sdk.js"></script>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
|
|
|
|||
|
|
@ -220,5 +220,181 @@ body {
|
|||
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 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*:before,
|
||||
*:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-group.radio .list-group .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
.form-group.radio .list-group .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
.form-group.radio .list-group .list-group-item .checkbox .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio .list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .checkbox.list-group .list-group-item label,
|
||||
.form-group.radio .list-group .list-group-item .radio.list-group .list-group-item label {
|
||||
padding-left: 55px;
|
||||
}
|
||||
.list-group.radio .list-group-item {
|
||||
border-radius: 22px;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.list-group.radio .list-group-item .radio .list-group,
|
||||
.list-group.radio .list-group-item .radio.list-group {
|
||||
margin: 0 0 22px 0;
|
||||
}
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 10px 32px 10px 32px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item {
|
||||
text-align: left;
|
||||
border-radius: 0;
|
||||
}
|
||||
html .list-group .list-group-item .list-group.radio .list-group-item input[type="radio"] {
|
||||
visibility: visible;
|
||||
}
|
||||
html .in-shop.vspacing .list-group.radio.vspacing .list-group-item {
|
||||
border-radius: 48px;
|
||||
}
|
||||
.row > .form-group > .glyphicon {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group .control-label {
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.form-group .form-control {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.form-group {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 800px) {
|
||||
.form-group {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: -1px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.list-group-item:first-child {
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
.list-group-item:last-child {
|
||||
margin-bottom: 0;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
}
|
||||
a.list-group-item {
|
||||
color: #555555;
|
||||
}
|
||||
a.list-group-item .list-group-item-heading {
|
||||
color: #333333;
|
||||
}
|
||||
a.list-group-item:hover,
|
||||
a.list-group-item:focus {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.list-group-item.disabled,
|
||||
.list-group-item.disabled:hover,
|
||||
.list-group-item.disabled:focus {
|
||||
background-color: #f0f1f2;
|
||||
color: #9aa1a3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.list-group-item.disabled .list-group-item-heading,
|
||||
.list-group-item.disabled:hover .list-group-item-heading,
|
||||
.list-group-item.disabled:focus .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item.disabled .list-group-item-text,
|
||||
.list-group-item.disabled:hover .list-group-item-text,
|
||||
.list-group-item.disabled:focus .list-group-item-text {
|
||||
color: #9aa1a3;
|
||||
}
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
z-index: 2;
|
||||
color: #ffffff;
|
||||
background-color: #167cac;
|
||||
border-color: #167cac;
|
||||
}
|
||||
.list-group-item.active .list-group-item-heading,
|
||||
.list-group-item.active:hover .list-group-item-heading,
|
||||
.list-group-item.active:focus .list-group-item-heading,
|
||||
.list-group-item.active .list-group-item-heading > small,
|
||||
.list-group-item.active:hover .list-group-item-heading > small,
|
||||
.list-group-item.active:focus .list-group-item-heading > small,
|
||||
.list-group-item.active .list-group-item-heading > .small,
|
||||
.list-group-item.active:hover .list-group-item-heading > .small,
|
||||
.list-group-item.active:focus .list-group-item-heading > .small {
|
||||
color: inherit;
|
||||
}
|
||||
.list-group-item.active .list-group-item-text,
|
||||
.list-group-item.active:hover .list-group-item-text,
|
||||
.list-group-item.active:focus .list-group-item-text {
|
||||
color: #9cd7f2;
|
||||
}
|
||||
.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
background-color: #e6f2ec;
|
||||
}
|
||||
a.list-group-item-success {
|
||||
color: #cacbcc;
|
||||
}
|
||||
a.list-group-item-success .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-success:hover,
|
||||
a.list-group-item-success:focus {
|
||||
color: #cacbcc;
|
||||
background-color: #d5e9df;
|
||||
}
|
||||
a.list-group-item-success.active,
|
||||
a.list-group-item-success.active:hover,
|
||||
a.list-group-item-success.active:focus {
|
||||
color: #fff;
|
||||
background-color: #cacbcc;
|
||||
border-color: #cacbcc;
|
||||
}
|
||||
.list-group-item-info {
|
||||
color: #125b7e;
|
||||
background-color: #e7f1f6;
|
||||
}
|
||||
a.list-group-item-info {
|
||||
color: #125b7e;
|
||||
}
|
||||
a.list-group-item-info .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-info:hover,
|
||||
a.list-group-item-info:focus {
|
||||
color: #125b7e;
|
||||
background-color: #d4e6ef;
|
||||
}
|
||||
a.list-group-item-info.active,
|
||||
a.list-group-item-info.active:hover,
|
||||
a.list-group-item-info.active:focus {
|
||||
color: #fff;
|
||||
background-color: #125b7e;
|
||||
border-color: #125b7e;
|
||||
}
|
||||
.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
background-color: #fef6e8;
|
||||
}
|
||||
a.list-group-item-warning {
|
||||
color: #f8af1c;
|
||||
}
|
||||
a.list-group-item-warning .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-warning:hover,
|
||||
a.list-group-item-warning:focus {
|
||||
color: #f8af1c;
|
||||
background-color: #fdecd0;
|
||||
}
|
||||
a.list-group-item-warning.active,
|
||||
a.list-group-item-warning.active:hover,
|
||||
a.list-group-item-warning.active:focus {
|
||||
color: #fff;
|
||||
background-color: #f8af1c;
|
||||
border-color: #f8af1c;
|
||||
}
|
||||
.list-group-item-danger {
|
||||
color: #da291c;
|
||||
background-color: #fbe9e8;
|
||||
}
|
||||
a.list-group-item-danger {
|
||||
color: #da291c;
|
||||
}
|
||||
a.list-group-item-danger .list-group-item-heading {
|
||||
color: inherit;
|
||||
}
|
||||
a.list-group-item-danger:hover,
|
||||
a.list-group-item-danger:focus {
|
||||
color: #da291c;
|
||||
background-color: #f7d4d2;
|
||||
}
|
||||
a.list-group-item-danger.active,
|
||||
a.list-group-item-danger.active:hover,
|
||||
a.list-group-item-danger.active:focus {
|
||||
color: #fff;
|
||||
background-color: #da291c;
|
||||
border-color: #da291c;
|
||||
}
|
||||
.list-group-item-heading {
|
||||
margin-top: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
|
||||
.radio .list-group.paymentSelection, .radio.list-group.paymentSelection {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 33.9em) {
|
||||
label, a {
|
||||
max-height: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio,
|
||||
.checkbox,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.checkbox .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.form-group.radio .list-group,
|
||||
.checkbox.list-group,
|
||||
.checkbox.list-group,
|
||||
.radio.list-group,
|
||||
.radio.list-group {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item > label,
|
||||
.form-group.radio .list-group .list-group-item > label,
|
||||
.checkbox.list-group .list-group-item > label,
|
||||
.radio.list-group .list-group-item > label {
|
||||
margin-bottom: initial;
|
||||
width: 100%;
|
||||
font-weight: normal;
|
||||
padding: 12px 27px 12px 33px;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item,
|
||||
.form-group.radio .list-group .list-group-item,
|
||||
.checkbox.list-group .list-group-item,
|
||||
.radio.list-group .list-group-item {
|
||||
margin-bottom: 12px;
|
||||
border-width: 1px;
|
||||
/* border-color: #cacbcc; */
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-group.checkbox .list-group .list-group-item.active,
|
||||
.form-group.radio .list-group .list-group-item.active,
|
||||
.checkbox.list-group .list-group-item.active,
|
||||
.radio.list-group .list-group-item.active {
|
||||
background-color: #e7f1f6;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.radio label,
|
||||
.checkbox label {
|
||||
min-height: 23px;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #525656;
|
||||
}
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#paypalParentLink label,
|
||||
#afterpayParentLink label,
|
||||
#creditCardParentLink label {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
#paypalParentLink label .paymentOptionText,
|
||||
#creditCardParentLink label .paymentOptionText {
|
||||
padding-left: 20px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
html #creditCardParentLink.list-group-item {
|
||||
border-radius: 48px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.list-group.radio .list-group-item > label {
|
||||
padding: 12px 20px 12px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 500;
|
||||
color: #000000;
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ const applicationConfig = {
|
|||
SAVED_SESSION_TIMEOUT_DAYS: 45,
|
||||
COOKIE_PATH: "/",
|
||||
CURRENT_ENVIRONMENT: process.env.VUE_APP_CURRENT_ENVIRONMENT, // "Localhost", "Dev", "QA", and "Prod"
|
||||
HERITAGE_FUNNEL: process.env.VUE_APP_HERITAGE_FUNNEL,
|
||||
APPLICATION_NAME: "FixMyGlass",
|
||||
ANALYTICS_APPLICATION_NAME: "FixMyGlassNextGen",
|
||||
APPLICATION_ABBREVIATION: "fmg",
|
||||
|
|
|
|||
|
|
@ -33,15 +33,15 @@ const endpoints = {
|
|||
method: "GET",
|
||||
},
|
||||
LookupVehicleByVin: {
|
||||
url: "/vehicle/api/v1/vehicle/Lookup",
|
||||
url: "/vehicle/api/v1/vehicle/lookup",
|
||||
method: "POST",
|
||||
},
|
||||
LookupVinByPlate: {
|
||||
url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
|
||||
url: "/vehicle/api/v1/vehicle/lookup-by-plate",
|
||||
method: "POST",
|
||||
},
|
||||
LookupVinByAddress: {
|
||||
url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
|
||||
url: "/vehicle/api/v1/vehicle/lookup-by-address",
|
||||
method: "POST",
|
||||
},
|
||||
LookupVinByImage: {
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@ const errorMessages = {
|
|||
VIN_FORMAT:
|
||||
"Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
|
||||
OPTION_REQUIRED: "Please select an option",
|
||||
RECAL_ACK_REQUIRED: "Please acknowledge recalibration alert",
|
||||
VEHICLE_REQUIRED: "Please select a vehicle",
|
||||
MOBILE_LOCATION_REQUIRED: "Please enter your service address",
|
||||
DATE_REQUIRED: "Please select a date",
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ const experimentUniverses = {
|
|||
|
||||
const experimentSettings = {
|
||||
GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
|
||||
SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
|
||||
DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
|
||||
PIA_EXPERIENCE: "PIA Experience",
|
||||
PIA_INSURANCE: "DisplayPIAInsurance",
|
||||
|
|
|
|||
|
|
@ -4,4 +4,7 @@ export const paymentMethods = {
|
|||
CREDIT_CARD: "CreditCard",
|
||||
PAYPAL: "Paypal",
|
||||
AFTERPAY: "Afterpay",
|
||||
PAY_NOW: "PayNow",
|
||||
INSURANCE: "Insurance",
|
||||
APPLE_PAY: "ApplePay",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@ export default {
|
|||
classes = "ui-checkbox d-flex";
|
||||
break;
|
||||
case "servicePackageRadio":
|
||||
classes = "package-main";
|
||||
classes = "package-main d-md-flex justify-content-md-center";
|
||||
break;
|
||||
}
|
||||
return classes;
|
||||
|
|
@ -226,7 +226,7 @@ export default {
|
|||
if (this.buttonTypeString == "radio") {
|
||||
classes += " radio-button-container";
|
||||
} else if (this.buttonTypeString == "servicePackageRadio") {
|
||||
classes = "package-wrapper";
|
||||
classes = "package-wrapper col-md-4";
|
||||
}
|
||||
|
||||
if (this.buttonTypeString == "listCard" && this.buttonsInfo.length > 2) {
|
||||
|
|
@ -255,7 +255,7 @@ export default {
|
|||
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
|
||||
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
|
||||
buttonImageId: answer.buttonImageId ?? answer.ImageId,
|
||||
additionalButtonData: answer.additionalButtonData,
|
||||
additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
|
||||
groupName: this.formatString(this.groupName),
|
||||
value:
|
||||
answer.value ??
|
||||
|
|
|
|||
|
|
@ -29,11 +29,25 @@ describe("checkbox-question.vue", () => {
|
|||
expect(input.attributes().name).toEqual("Checkbox");
|
||||
});
|
||||
|
||||
it("Should return checkbox id", async () => {
|
||||
it("Should return default id when no custom id is specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
||||
// Assert
|
||||
const input = wrapper.find("input");
|
||||
|
||||
// Expect
|
||||
expect(input.attributes().id).not.toBeFalsy();
|
||||
});
|
||||
|
||||
it("Should return custom id when specified", async () => {
|
||||
// Act
|
||||
const wrapper = shallowMount(checkboxQuestion, {
|
||||
propsData: {
|
||||
buttonID: "Checkbox ID",
|
||||
customInputId: "Checkbox ID",
|
||||
},
|
||||
mixins: [mockMixin],
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,32 +10,67 @@
|
|||
type="checkbox"
|
||||
aria-checked="false"
|
||||
:name="checkboxName"
|
||||
:id="buttonID"
|
||||
:validationRules="validationRules"
|
||||
:id="inputId"
|
||||
:tabindex="tabIndex"
|
||||
:aria-required="isRequired" />
|
||||
<p v-html="checkboxLabelCopy" class="m-0"></p>
|
||||
<textBlock
|
||||
class="m-0"
|
||||
:customText="checkboxLabelCopy"
|
||||
marginTopSizeOverride="0"
|
||||
typeStyle="small"
|
||||
@text-link-clicked="bubbleTextBlockClick" />
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">{{ screenReaderOnlyText }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useField, validate } from "vee-validate";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
|
||||
export default {
|
||||
name: "checkboxQuestion",
|
||||
computed: {
|
||||
checkboxLabelCopy() {
|
||||
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
|
||||
},
|
||||
value: {
|
||||
get: function () {
|
||||
return this.modelValue;
|
||||
},
|
||||
set: function (newValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const uuid = uuidv4();
|
||||
const inputId = !props.customInputId ? `input-${uuid}` : props.customInputId;
|
||||
|
||||
const fieldOptions = {
|
||||
initialValue: props.modelValue,
|
||||
};
|
||||
|
||||
const {
|
||||
value,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
validate,
|
||||
errors,
|
||||
resetField,
|
||||
} = useField(inputId, props.validationRules, fieldOptions);
|
||||
|
||||
return {
|
||||
value,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
validate,
|
||||
meta,
|
||||
errors,
|
||||
resetField,
|
||||
inputId,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
customInputId: String,
|
||||
validationRules: String,
|
||||
cmsWidgetName: String,
|
||||
checkboxName: String,
|
||||
buttonID: String,
|
||||
|
|
@ -48,6 +83,24 @@ export default {
|
|||
default: false,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
bubbleTextBlockClick(event) {
|
||||
this.$emit("textLinkClicked", event);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelValue(newValue, oldValue) {
|
||||
if (this.value !== newValue) {
|
||||
this.value = newValue;
|
||||
}
|
||||
},
|
||||
value(newValue, oldValue) {
|
||||
this.$emit("update:modelValue", newValue);
|
||||
},
|
||||
},
|
||||
components: {
|
||||
textBlock,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -56,6 +109,7 @@ export default {
|
|||
.form-check-input {
|
||||
border: 1px solid $gray-500;
|
||||
border-radius: 2px;
|
||||
min-width: 1rem; // Prevent squish
|
||||
&:checked {
|
||||
background-size: 125%;
|
||||
border: 1px solid $blue;
|
||||
|
|
|
|||
|
|
@ -263,49 +263,6 @@ describe("cart.vue", () => {
|
|||
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
|
||||
test("if there is service package discount fee on the order, a service package discount cart item should be added to the cart", () => {
|
||||
// Arrange
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="cart">
|
||||
<div class="px-0">
|
||||
<!-- set class to 'expaned' on line 7 so cart is open on page load. This may be temporary -->
|
||||
<div
|
||||
class="row vin-toggle flex align-items-center pt-4"
|
||||
:class="[isExpanded ? 'expanded' : '']"
|
||||
:class="[isExpanded ? '' : 'expanded']"
|
||||
@click="toggleIsExpanded()">
|
||||
<a
|
||||
aria-label="expand cart"
|
||||
|
|
@ -376,9 +377,6 @@ export default {
|
|||
cartItems.push(this.suppliesRepairCartItem);
|
||||
}
|
||||
|
||||
if (this.mobileFeeCartItem) {
|
||||
cartItems.push(this.mobileFeeCartItem);
|
||||
}
|
||||
if (this.servicePackageDiscountCartItem) {
|
||||
cartItems.push(this.servicePackageDiscountCartItem);
|
||||
}
|
||||
|
|
@ -669,13 +667,27 @@ export default {
|
|||
recycleFeeCartItemName() {
|
||||
return this.getCmsContent("RecycleFeeTextWidget", "Text");
|
||||
},
|
||||
requiresRecycleFeeCartItem() {
|
||||
return !this.isRepair;
|
||||
},
|
||||
recycleFeeCartItem() {
|
||||
let cartItem = null;
|
||||
|
||||
const recycleFeeLineItem = this.supportingItems.find(
|
||||
let recycleFeeLineItem = this.supportingItems.find(
|
||||
(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) {
|
||||
cartItem = {
|
||||
name: this.recycleFeeCartItemName,
|
||||
|
|
@ -744,44 +756,6 @@ export default {
|
|||
|
||||
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() {
|
||||
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 { fmgPageValues } from "@/router/router-constants/fmgPage-values";
|
||||
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 store from "@/store";
|
||||
import router from "@/router";
|
||||
|
|
@ -139,7 +142,11 @@ export async function skipVinLookup() {
|
|||
? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
|
||||
: false;
|
||||
|
||||
return isVinOptionalVehicle || !includesWindshieldReplacement();
|
||||
return (
|
||||
isVinOptionalVehicle ||
|
||||
!includesWindshieldReplacement() ||
|
||||
experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
|
||||
);
|
||||
}
|
||||
|
||||
export async function skipVinLookupNotRepair() {
|
||||
|
|
@ -151,7 +158,11 @@ export async function skipVinLookupNotRepair() {
|
|||
? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
|
||||
: false;
|
||||
|
||||
return isVinOptionalVehicle || !includesWindshieldReplacement();
|
||||
return (
|
||||
isVinOptionalVehicle ||
|
||||
!includesWindshieldReplacement() ||
|
||||
experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
|
||||
);
|
||||
}
|
||||
|
||||
async function getLazyLoadedComponent(pageName) {
|
||||
|
|
|
|||
|
|
@ -115,6 +115,16 @@ describe("getPageToRouteExistingOrderTo", () => {
|
|||
store.commit(storeMutations.UPDATE_IS_REPAIR, false);
|
||||
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.
|
||||
mockLazyLoadComponentReturnValues({
|
||||
[fmgPageValues.VEHICLE]: true,
|
||||
|
|
|
|||
|
|
@ -108,6 +108,9 @@ describe("Payment Method Question", () => {
|
|||
function generateDefaultProps() {
|
||||
return {
|
||||
modelValue: "modelValue",
|
||||
hasRecal: false,
|
||||
isApplePay: true,
|
||||
isInsurance: false,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@
|
|||
:answers="paymentMethodAnswerData"
|
||||
isRequired
|
||||
:validationRules="validationRules"
|
||||
:hasRecal="hasRecal"
|
||||
:isApplePay="isApplePay"
|
||||
:isInsurance="isInsurance"
|
||||
v-model="selectedMethod"
|
||||
textPosition="text-start" />
|
||||
</div>
|
||||
|
|
@ -29,6 +32,9 @@ export default {
|
|||
props: {
|
||||
modelValue: String,
|
||||
validationRules: String,
|
||||
hasRecal: Boolean,
|
||||
isApplePay: Boolean,
|
||||
isInsurance: Boolean,
|
||||
},
|
||||
methods: {
|
||||
getAnswersNullSafe(widgetName) {
|
||||
|
|
@ -54,7 +60,30 @@ export default {
|
|||
return this.getCmsContent("PaymentMethodWidget", "QuestionText");
|
||||
},
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -47,10 +47,29 @@ describe("payment-method.vue", () => {
|
|||
function setupMocks() {
|
||||
store.getters = {
|
||||
damage: {},
|
||||
lineItems: [],
|
||||
lineItems: {
|
||||
glassParts: [],
|
||||
supportingItems: [],
|
||||
vaps: [],
|
||||
promos: [],
|
||||
},
|
||||
order: {
|
||||
payment: {
|
||||
isPia: false,
|
||||
insuranceCoverage: {
|
||||
isVerified: true,
|
||||
},
|
||||
},
|
||||
lineItems: {
|
||||
glassParts: [],
|
||||
supportingItems: [],
|
||||
vaps: [],
|
||||
promos: [],
|
||||
},
|
||||
policy: {
|
||||
currentDeductible: 123,
|
||||
isNoComp: false,
|
||||
isItac: false,
|
||||
},
|
||||
},
|
||||
policy: {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
|
||||
<loadingModal notFullScreen ref="loadingModal" />
|
||||
<div class="container-fluid">
|
||||
<div class="container-fluid payment-method">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6">
|
||||
<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
|
||||
|
|
@ -22,6 +22,7 @@
|
|||
<hr class="my-0" />
|
||||
|
||||
<cart
|
||||
ref="cart"
|
||||
:damage="damageInfo"
|
||||
:availableVaps="availableVaps"
|
||||
:allowItemRemoval="true"
|
||||
|
|
@ -45,13 +46,34 @@
|
|||
v-bind:isDismissible="false" />
|
||||
</div>
|
||||
|
||||
<div v-if="hasRecal && !isInsurance" class="questions-about-service my-5">
|
||||
<textBlock
|
||||
cmsWidgetName="QuestionsAboutYourServiceWidget"
|
||||
justifyText="left"
|
||||
class="service-questions" />
|
||||
<textBlock cmsWidgetName="CallOrTextWidget" justifyText="left" />
|
||||
<hr class="my-5" />
|
||||
<div class="d-flex flex-row checkbox-group">
|
||||
<checkboxQuestion
|
||||
cmsWidgetName="RecalConfirmWidget"
|
||||
class="mb-5"
|
||||
isRequired="true"
|
||||
v-model="isRecalAckOptIn"
|
||||
validationRules="recal-ack-required"
|
||||
@text-link-clicked="openModal('RecalModal')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<paymentMethodQuestion
|
||||
v-if="!isPiaDisabled"
|
||||
v-if="isPiaEnabled && totalAmountDue > 0"
|
||||
v-model="paymentMethodInternalModel"
|
||||
validationRules="option-required" />
|
||||
:hasRecal="hasRecal"
|
||||
:isApplePay="isApplePay"
|
||||
:isInsurance="isInsurance"
|
||||
validationRules="payment-method-required" />
|
||||
|
||||
<alert
|
||||
v-if="isPiaDisabled"
|
||||
v-if="!isPiaEnabled && totalAmountDue > 0"
|
||||
:isDismissible="false"
|
||||
alertClass="alert-info"
|
||||
cmsWidgetName="NoPiaDisclaimerWidget"
|
||||
|
|
@ -65,6 +87,11 @@
|
|||
buttonSize
|
||||
@back-clicked="backButtonAction"
|
||||
@ForwardClicked="forwardButtonAction" />
|
||||
|
||||
<contentGroupModal
|
||||
ref="RecalModal"
|
||||
cmsWidgetName="RecalModal"
|
||||
class="recal-modal" />
|
||||
</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 { submitWorkOrder } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import alert from "@/ux-components/alert/alert";
|
||||
import textBlock from "@/digital-components/text-block/text-block";
|
||||
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
|
||||
import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
|
||||
|
||||
// Supporting Items
|
||||
import baseMixin from "@/mixins/base-mixin.js";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
import { storeActions } from "@/constants/store-actions";
|
||||
import store from "@/store";
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import {
|
||||
fetchCmsContentForPage,
|
||||
doesCopyContainRouterLink,
|
||||
getRouterLinkRouteFromCopy,
|
||||
} from "@/helpers/cms-content-helper";
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
import { experimentSettings } from "@/constants/experiments";
|
||||
import {
|
||||
|
|
@ -115,10 +149,14 @@ import { partTypeStrings } from "@/constants/part-type-strings";
|
|||
import { mapTaxedLineItemsToStoreFormat } from "../../store";
|
||||
import { coverageStatus } from "@/constants/insurance";
|
||||
|
||||
defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("payment-method-required", required(errorMessages.OPTION_REQUIRED));
|
||||
defineRule("recal-ack-required", required(errorMessages.RECAL_ACK_REQUIRED));
|
||||
|
||||
export default {
|
||||
name: "paymentMethod",
|
||||
props: {
|
||||
recyclingModalCmsWidgetName: String,
|
||||
},
|
||||
async beforeRouteEnter(to, from, next) {
|
||||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
|
||||
|
|
@ -308,9 +346,15 @@ export default {
|
|||
availableVaps: [],
|
||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||
inactivePromos: this.getInactivePromosFromStore(),
|
||||
isRecalAckOptIn: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
doesCopyContainRouterLink,
|
||||
getRouterLinkRouteFromCopy,
|
||||
navigateWithScenario(scenarioName) {
|
||||
this.$router.navigateWithoutSaving(scenarioName, this.$route);
|
||||
},
|
||||
arePagePrerequisitesValid() {
|
||||
// Service Location
|
||||
const serviceLocation = store.getters.order.serviceLocation;
|
||||
|
|
@ -450,14 +494,12 @@ export default {
|
|||
this.paymentMethod,
|
||||
false
|
||||
);
|
||||
|
||||
// save lineitems as they now have salestax added
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_GLASS_PARTS_SUPPRESSING_STATE_RESETTING,
|
||||
this.lineItems.glassParts,
|
||||
false
|
||||
);
|
||||
|
||||
await this.dispatchStoreAction(
|
||||
storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
|
||||
this.lineItems.supportingItems,
|
||||
|
|
@ -472,7 +514,6 @@ export default {
|
|||
},
|
||||
false
|
||||
);
|
||||
|
||||
if (this.paymentMethod == paymentMethods.LATER) {
|
||||
// this creates the final work order
|
||||
await submitWorkOrder({ pageNameToLog: "payment-method", submitAfterSave: true });
|
||||
|
|
@ -481,7 +522,15 @@ export default {
|
|||
this.$route
|
||||
);
|
||||
} else {
|
||||
this.setupPia();
|
||||
if (this.paymentMethod == paymentMethods.INSURANCE) {
|
||||
this.dispatchStoreAction(this.storeActions.SAVE_PAYMENT_TYPE, true, false);
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.CLICKED_INSURANCE,
|
||||
this.$route
|
||||
);
|
||||
} else {
|
||||
this.setupPia();
|
||||
}
|
||||
}
|
||||
},
|
||||
async setupPia() {
|
||||
|
|
@ -512,8 +561,26 @@ export default {
|
|||
hasSubmittedOrder() {
|
||||
return this.$store.getters.hasSubmittedOrder;
|
||||
},
|
||||
openModal(modalName) {
|
||||
this.$refs[modalName].openModal();
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
hasRecal() {
|
||||
const recalLineItem = this.$store.getters.order.lineItems.supportingItems.find(
|
||||
(lineItem) => lineItem.partType == partTypeStrings.RECALIBRATION
|
||||
);
|
||||
if (recalLineItem) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
isApplePay() {
|
||||
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
damageInfo() {
|
||||
return this.$store.getters.damage;
|
||||
},
|
||||
|
|
@ -561,6 +628,10 @@ export default {
|
|||
},
|
||||
customCtaCopy() {
|
||||
switch (this.paymentMethod) {
|
||||
case paymentMethods.PAY_NOW:
|
||||
return "Continue to checkout";
|
||||
case paymentMethods.INSURANCE:
|
||||
return "Continue to insurance";
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
return "Continue to checkout";
|
||||
case paymentMethods.PAYPAL:
|
||||
|
|
@ -571,21 +642,21 @@ export default {
|
|||
return null;
|
||||
}
|
||||
},
|
||||
isPiaDisabled() {
|
||||
totalAmountDue() {
|
||||
return baseMixin.methods.getAmountDue(this.lineItems);
|
||||
},
|
||||
isPiaEnabled() {
|
||||
const piaExperience = this.getSettingValue(experimentSettings.PIA_EXPERIENCE);
|
||||
const piaInsurance = this.getSettingValue(experimentSettings.PIA_INSURANCE);
|
||||
|
||||
var isEnabled = false;
|
||||
if (this.isInsurance) {
|
||||
isEnabled = piaInsurance === "true" && this.currentDeductible !== 0;
|
||||
return piaInsurance === "true" && this.currentDeductible > 0;
|
||||
} else {
|
||||
isEnabled = piaExperience === "PIA Optional" || piaExperience === "PIA Required";
|
||||
return piaExperience === "PIA Optional" || piaExperience === "PIA Required";
|
||||
}
|
||||
|
||||
return !isEnabled;
|
||||
},
|
||||
paymentMethod() {
|
||||
if (this.isPiaDisabled) {
|
||||
if (!this.isPiaEnabled) {
|
||||
return paymentMethods.LATER;
|
||||
}
|
||||
|
||||
|
|
@ -652,11 +723,27 @@ export default {
|
|||
alert,
|
||||
paymentMethodQuestion,
|
||||
reviewDropdown,
|
||||
textBlock,
|
||||
checkboxQuestion,
|
||||
contentGroupModal,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.checkbox-group {
|
||||
align-items: start;
|
||||
> * {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.questions-about-service {
|
||||
.service-questions {
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
.cart {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -664,4 +751,22 @@ export default {
|
|||
color: $gray-550;
|
||||
margin: 0;
|
||||
}
|
||||
.payment-method {
|
||||
.recal-modal {
|
||||
:deep(.modal-body) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h5 {
|
||||
text-align: center;
|
||||
order: 1;
|
||||
}
|
||||
p {
|
||||
order: 3;
|
||||
}
|
||||
img {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export default {
|
|||
console.log("Error during payment: " + piaError);
|
||||
const paymentPageNavScenario =
|
||||
store.getters.order.payment.piaType === paymentMethods.CREDIT_CARD ||
|
||||
store.getters.order.payment.piaType === paymentMethods.APPLE_PAY ||
|
||||
store.getters.order.payment.piaType === paymentMethods.AFTERPAY;
|
||||
if (paymentPageNavScenario) {
|
||||
this.$router.navigateWithoutSaving(
|
||||
|
|
@ -47,21 +48,40 @@ export default {
|
|||
} else {
|
||||
switch (store.getters.order.payment.piaType) {
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
case paymentMethods.APPLE_PAY:
|
||||
case paymentMethods.AFTERPAY:
|
||||
await this.processCreditCardResponse();
|
||||
break;
|
||||
case paymentMethods.PAYPAL:
|
||||
await this.processPaypalResponse();
|
||||
break;
|
||||
default:
|
||||
var msg = "Unknown Pia type: " + store.getters.order.payment.piaType;
|
||||
console.log(msg);
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.PIA_ERROR,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_PIA_ALERT]: true }
|
||||
);
|
||||
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;
|
||||
console.log(msg);
|
||||
this.$router.navigateWithoutSaving(
|
||||
this.navigationScenarios.PIA_ERROR,
|
||||
this.$route,
|
||||
{},
|
||||
{ [routerParams.DISPLAY_PIA_ALERT]: true }
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -40,7 +40,8 @@
|
|||
name="card-frame"
|
||||
id="card-frame"
|
||||
seamless
|
||||
scrolling="no">
|
||||
scrolling="no"
|
||||
allow="payment *; microphone *; geolocation *;">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
|
|
@ -192,6 +193,7 @@
|
|||
<input type="hidden" name="ship_to_phone" :value="phoneNumber" />
|
||||
|
||||
<input type="hidden" name="calling_application" value="NextGen" />
|
||||
<input type="hidden" name="parentdomainname" :value="parentNomainName" />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
|
|
@ -256,7 +258,6 @@ export default {
|
|||
piaLineItems: "",
|
||||
lineItems: [],
|
||||
availableVaps: [],
|
||||
|
||||
shouldBlockInteraction: false,
|
||||
};
|
||||
},
|
||||
|
|
@ -405,6 +406,13 @@ export default {
|
|||
});
|
||||
},
|
||||
computed: {
|
||||
parentNomainName() {
|
||||
var a = document.createElement("a");
|
||||
a.href = applicationConfig.HERITAGE_FUNNEL;
|
||||
|
||||
const protocol = window.location.protocol;
|
||||
return `${protocol}//${a.hostname}`;
|
||||
},
|
||||
dynamicCSSUrl() {
|
||||
const { protocol, hostname, port } = window.location;
|
||||
return `${protocol}//${hostname}:${port}/fmg/css/site-2020Styling.css`;
|
||||
|
|
@ -650,14 +658,26 @@ export default {
|
|||
this.$nextTick(() => {
|
||||
this.$refs.hopForm.submit();
|
||||
|
||||
var isApplePayAvailable = false;
|
||||
if (window.ApplePaySession && window.ApplePaySession.canMakePayments()) {
|
||||
isApplePayAvailable = true;
|
||||
}
|
||||
|
||||
const iframe = this.$refs.paymentFrame;
|
||||
if (iframe) {
|
||||
iframe.onload = () => {
|
||||
if (iframe.contentWindow) {
|
||||
if (isApplePayAvailable) {
|
||||
iframe.contentWindow.postMessage("hybrid-with-applepay", "*");
|
||||
console.log(new Date() + ": Sent applepay");
|
||||
}
|
||||
|
||||
if (this.paymentType == "cc") {
|
||||
iframe.contentWindow.postMessage("CreditCardChosen", "*");
|
||||
console.log(new Date() + ": Sent creditcard");
|
||||
} else if (this.paymentType == "ap") {
|
||||
iframe.contentWindow.postMessage("afterpay", "*");
|
||||
console.log(new Date() + ": Sent afterpay");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -681,8 +701,38 @@ export default {
|
|||
this.backButtonAction();
|
||||
}
|
||||
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);
|
||||
}
|
||||
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() {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,10 @@
|
|||
cmsWidgetName="CashOrInsuranceQuestionWidget"
|
||||
v-model="isInsuranceSelected"
|
||||
groupName="CashOrInsuranceQuestion" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-12 col-xl-8">
|
||||
<servicePackageQuestion
|
||||
ref="servicePackage"
|
||||
cashCmsWidgetName="CashServicePackageQuestionWidget"
|
||||
|
|
@ -35,7 +38,10 @@
|
|||
v-on="{ 'buttonEvent.openModal': openModalAction }"
|
||||
validationRules="option-required"
|
||||
isRequired />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-xl-4">
|
||||
<afterpayModalBanner
|
||||
v-if="!isInsuranceSelected && !isRecalibrationOnOrder"
|
||||
cmsWidgetName="AfterpayModalWidget"
|
||||
|
|
@ -44,14 +50,14 @@
|
|||
:lineItems="lineItems" />
|
||||
|
||||
<recalDisclaimer
|
||||
class="my-5"
|
||||
class="mb-0"
|
||||
cmsWidgetName="RecalDisclaimerWidget"
|
||||
v-if="isRecalibrationOnOrder"
|
||||
v-on="{ textLinkClicked: openModalAction }"
|
||||
alertClass="alert-info" />
|
||||
|
||||
<promoModalQuestion
|
||||
class="small mt-4"
|
||||
class="small mt-6 d-md-flex justify-content-md-center"
|
||||
v-model="lineItems"
|
||||
:addableVaps="addableVaps"
|
||||
pageName="quote"
|
||||
|
|
@ -63,7 +69,7 @@
|
|||
cmsWidgetName="quoteDisclaimer"
|
||||
justifyText="left"
|
||||
typeStyle="caption"
|
||||
class="mt-4" />
|
||||
class="mt-6" />
|
||||
|
||||
<contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
|
||||
<contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />
|
||||
|
|
@ -194,6 +200,18 @@ export default {
|
|||
...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(
|
||||
storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
|
||||
{
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ export default {
|
|||
getPackagePrice(packageName, { discountedPrice = false, servicePackageDiscount = false }) {
|
||||
var lineItemsToPrice = [...this.nullSafeAvailableLineItems];
|
||||
if (this.isRecalibrationOnOrder) {
|
||||
lineItemsToPrice = this.nullSafeAvailableLineItems.filter((item) => {
|
||||
lineItemsToPrice = lineItemsToPrice.filter((item) => {
|
||||
return item.partType != partTypeStrings.RECALIBRATION;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,24 +136,26 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.discount-text {
|
||||
line-height: 36px;
|
||||
display: flex;
|
||||
border-top-right-radius: 0.5rem;
|
||||
border-top-left-radius: 0.5rem;
|
||||
background-color: #469d2a;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
.package-main {
|
||||
.package-wrapper {
|
||||
margin: 0.5rem 0;
|
||||
@include media-breakpoint-up(md) {
|
||||
margin: 1rem 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
label {
|
||||
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"] {
|
||||
|
|
@ -180,7 +182,7 @@ export default {
|
|||
}
|
||||
&.has-text {
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
border: 1px solid #469d2a !important;
|
||||
border: 1px solid #469d2a; //Temp color
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -257,23 +259,35 @@ export default {
|
|||
|
||||
.package-footer {
|
||||
color: $red;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.package-specs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
transition: all 0.5s ease;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
&.pricing-info {
|
||||
color: $green;
|
||||
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 {
|
||||
text-decoration: line-through;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -291,23 +305,30 @@ export default {
|
|||
}
|
||||
span {
|
||||
&.service-package-discount {
|
||||
color: #469d2a;
|
||||
color: #469d2a; //Temp color
|
||||
text-align: end;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
div.strikethrough-discount-price {
|
||||
text-decoration: line-through;
|
||||
margin-right: 0;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
font-size: 0.875rem;
|
||||
line-height: 20px;
|
||||
color: $gray-550;
|
||||
color: $gray-500;
|
||||
padding-right: 2px;
|
||||
}
|
||||
div.discount-price {
|
||||
color: #469d2a;
|
||||
color: #469d2a; //Temp color
|
||||
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;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.714;
|
||||
color: $gray-550;
|
||||
a {
|
||||
line-height: 1.714;
|
||||
padding: 0;
|
||||
|
|
@ -337,8 +359,27 @@ export default {
|
|||
|
||||
.hide-when-closed {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -24,11 +24,6 @@
|
|||
{{ errorMessage }}
|
||||
</span>
|
||||
</div>
|
||||
<textBlock
|
||||
v-if="mobileFeeApplies"
|
||||
:customText="mobileFeeText"
|
||||
cmsWidgetName="MobileFeeDisclaimerWidget"
|
||||
typeStyle="caption" />
|
||||
</div>
|
||||
<modal
|
||||
:ref="modalName"
|
||||
|
|
@ -154,7 +149,6 @@ export default {
|
|||
alertInvalidZipWidgetName: String,
|
||||
customComponentId: String,
|
||||
validationRules: String,
|
||||
mobileFeeApplies: Boolean,
|
||||
},
|
||||
computed: {
|
||||
mobileLocationLinkPromptText() {
|
||||
|
|
@ -182,21 +176,6 @@ export default {
|
|||
modalHeaderText() {
|
||||
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() {
|
||||
return this.getCmsContent(this.modalWidgetName, "FooterText");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -57,6 +57,12 @@
|
|||
cmsWidgetName="AlertNoShopsWidget"
|
||||
v-if="displayNoShopsAlert"
|
||||
alertClass="alert-warning" />
|
||||
<alert
|
||||
ref="alertMobileFeeFree"
|
||||
class="my-5"
|
||||
cmsWidgetName="AlertMobileFeeFreeWidget"
|
||||
v-if="isServiceableMobile && !isInsurance"
|
||||
alertClass="alert-success" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center appointment-type">
|
||||
|
|
@ -81,7 +87,6 @@
|
|||
v-if="selectedAppointmentType === 'Mobile'"
|
||||
v-model="mobileLocationQuestions"
|
||||
:mobileFeePart="mobileFeePart"
|
||||
:mobileFeeApplies="mobileFeeApplies"
|
||||
@updated-mobile-fee-part="setMobileFeePart"
|
||||
@updated-serviceability="setServiceabilityDetails"
|
||||
@updated-contains-military-base="setContainsMilitaryBase"
|
||||
|
|
@ -355,6 +360,9 @@ export default {
|
|||
recalibrationInformationModal() {
|
||||
return this.$refs.recalibrationInformationModal;
|
||||
},
|
||||
isInsurance() {
|
||||
return store.getters.payment.isInsurance;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
arePagePrerequisitesValid() {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import router from "@/router";
|
|||
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
|
||||
import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
|
||||
import vinPagesMixin from "@/mixins/vin-pages-mixin";
|
||||
import { experimentSettings } from "../../constants/experiments";
|
||||
|
||||
// Constants
|
||||
|
||||
|
|
@ -23,6 +24,16 @@ let mockCmsContent = {
|
|||
let mockStoreActionData = {};
|
||||
|
||||
let mockStoreData = {};
|
||||
let mockExperimentSettings = {
|
||||
experiments: [
|
||||
{
|
||||
universeName: "ConceptFunnel",
|
||||
settings: {
|
||||
SuppressVinCapture: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function resetMockStoreData() {
|
||||
mockStoreData = {
|
||||
|
|
@ -163,6 +174,7 @@ function resetMockStoreData() {
|
|||
|
||||
function applyMockStoreDataToGetters() {
|
||||
store.getters = {
|
||||
experimentSettings: mockExperimentSettings,
|
||||
order: mockStoreData,
|
||||
damage: mockStoreData.damage,
|
||||
payment: mockStoreData.payment,
|
||||
|
|
@ -170,6 +182,7 @@ function applyMockStoreDataToGetters() {
|
|||
leadGenServiceZip: mockStoreData.leadGenServiceZip,
|
||||
};
|
||||
store.state.order = mockStoreData;
|
||||
store.state.applicationUser.experiments = mockExperimentSettings;
|
||||
}
|
||||
|
||||
async function mockDispatchStoreAction(actionName) {
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@ const navigationScenarios = {
|
|||
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
|
||||
|
||||
// Payment
|
||||
CLICKED_INSURANCE: "CLICKED_INSURANCE",
|
||||
CLICKED_PAY_NOW: "CLICKED_PAY_NOW",
|
||||
PIA_ERROR: "PIA_ERROR",
|
||||
PIA_CC_ERROR: "PIA_CC_ERROR",
|
||||
|
|
|
|||
|
|
@ -487,6 +487,10 @@ const routingTable = function (store) {
|
|||
scenario: navigationScenarios.CLICKED_PAY_NOW,
|
||||
destinationFmgPageValue: fmgPageValues.PAYMENT,
|
||||
},
|
||||
{
|
||||
scenario: navigationScenarios.CLICKED_INSURANCE,
|
||||
destinationFmgPageValue: fmgPageValues.INSURANCE_COMPANY,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1864,6 +1864,8 @@ export const actions = {
|
|||
order.payment.piaType == paymentMethods.CREDIT_CARD ? true : false,
|
||||
isPaypal: order.payment.piaType == paymentMethods.PAYPAL ? true : false,
|
||||
isAfterPay: order.payment.piaType == paymentMethods.AFTERPAY ? true : false,
|
||||
isApplePay:
|
||||
order.payment.piaType == paymentMethods.APPLE_PAY ? true : false,
|
||||
paypalToken: order.payment.paypalToken,
|
||||
nextGenSettledAmount: order.payment.nextGenSettledAmount,
|
||||
ccToken: {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,10 @@ body {
|
|||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
//Quote page max-width for service packages
|
||||
.col-xl-8 {
|
||||
max-width: 1200px;
|
||||
}
|
||||
//END set max-width on columns
|
||||
}
|
||||
.pointer {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@ process.env.VUE_APP_GOOGLE_PLACES_API_KEY = "AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4M
|
|||
process.env.VUE_APP_CURRENT_ENVIRONMENT = "Localhost";
|
||||
process.env.VUE_APP_MY_ACCOUNT = "https://myaccountdev.safelite.com/";
|
||||
|
||||
//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutEmbedded.aspx";
|
||||
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutEmbedded.aspx";
|
||||
//process.env.VUE_APP_SAFELITE_HOP = "http://localhost:60966/fmgCheckoutShared.aspx";
|
||||
process.env.VUE_APP_SAFELITE_HOP = "https://sv2-safelitehop-sys.safelite.com/fmgCheckoutShared.aspx";
|
||||
|
||||
// GA & GTM
|
||||
process.env.VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY =
|
||||
|
|
|
|||
Loading…
Reference in a new issue