SSR-1522 Add Apple Pay
This commit is contained in:
Josh Dassinger
parent
603ca6fe86
commit
0bbb5ff051
16 changed files with 1238 additions and 262 deletions
|
|
@ -21,7 +21,7 @@ body span {
|
|||
line-height: 24px;
|
||||
}
|
||||
body a {
|
||||
color: #1574A1;
|
||||
color: #0070D1;
|
||||
text-decoration: none;
|
||||
}
|
||||
body .form-group {
|
||||
|
|
@ -41,7 +41,7 @@ body select {
|
|||
}
|
||||
body input,
|
||||
body select {
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #8E9292;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
|
|
@ -73,7 +73,7 @@ body select:hover {
|
|||
box-shadow: 0 0 0 4px #9fcee6;
|
||||
}
|
||||
body select {
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #8E9292;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
|
|
@ -128,17 +128,6 @@ body .optional-label:after {
|
|||
}
|
||||
body .buttonContainer {
|
||||
height: 48px;
|
||||
position: relative;
|
||||
}
|
||||
body .buttonContainer:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
body .buttonContainer button {
|
||||
position: relative;
|
||||
|
|
@ -154,6 +143,7 @@ body .buttonContainer button {
|
|||
@media (hover: hover) {
|
||||
body .buttonContainer button {
|
||||
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
body .buttonContainer button:focus {
|
||||
|
|
@ -173,6 +163,7 @@ body .buttonContainer button:disabled {
|
|||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
body .buttonContainer button.has-loader {
|
||||
|
|
@ -213,3 +204,125 @@ body .cc-error-container #alert-message {
|
|||
background-color: #fcbfbb;
|
||||
border: 1px solid #d4281c;
|
||||
}
|
||||
|
||||
#fmg-checkout-shared .form-group .list-group.radio .list-group-item {
|
||||
border-radius: 5px;
|
||||
}
|
||||
#fmg-checkout-shared .form-group .list-group.radio .list-group-item label {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container #paypalParentDiv {
|
||||
padding-left: 10px;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink {
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
background-color: #000000;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label {
|
||||
padding: 0;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink label apple-pay-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink.list-group-item {
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8E9292;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group.paymentSelection #applepayParentLink:host {
|
||||
--apple-pay-button-width: auto;
|
||||
}
|
||||
#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: 50%;
|
||||
}
|
||||
#fmg-checkout-shared #applepay-and-paypal-container .form-group .list-group #paypalParentLink.list-group-item {
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8E9292;
|
||||
}
|
||||
#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#paypalParentDiv {
|
||||
padding-left: 0;
|
||||
}
|
||||
#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: 25%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container label {
|
||||
display: inline-flex;
|
||||
text-align: left;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container label span.paymentOptionText {
|
||||
margin: auto 0;
|
||||
padding-left: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
#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 {
|
||||
margin-bottom: 32px;
|
||||
border: 1px solid #0070D1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv.active > .paymentSelection #creditCardParentLink {
|
||||
border-width: 0 0 2px 0;
|
||||
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 16px;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific > .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container .italicSmall {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#fmg-checkout-shared #other-payments-container .disclaimerContainerv2 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
@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,401 @@
|
|||
.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;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #1574A1;
|
||||
color: #0070D1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -50,7 +50,7 @@ body {
|
|||
|
||||
input,
|
||||
select {
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #8E9292;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
|
|
@ -78,7 +78,7 @@ body {
|
|||
}
|
||||
|
||||
select {
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #8E9292;
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
|
|
@ -139,17 +139,6 @@ body {
|
|||
|
||||
.buttonContainer {
|
||||
height: 48px;
|
||||
position: relative;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
button {
|
||||
position: relative;
|
||||
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||
|
|
@ -162,6 +151,7 @@ body {
|
|||
height: 48px;
|
||||
@media (hover: hover) {
|
||||
background: linear-gradient(270deg, #1574a1 0%, #003d58 100%);
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px #06577c;
|
||||
|
|
@ -182,6 +172,7 @@ body {
|
|||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
pointer-events: all;
|
||||
}
|
||||
&.has-loader {
|
||||
|
|
@ -230,5 +221,199 @@ body {
|
|||
border: 1px solid #d4281c;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#fmg-checkout-shared {
|
||||
.form-group {
|
||||
.list-group {
|
||||
&.radio {
|
||||
.list-group-item {
|
||||
border-radius: 5px;
|
||||
|
||||
label {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#applepay-and-paypal-container {
|
||||
display: inline-flex;
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
#paypalParentDiv {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
.list-group {
|
||||
&.paymentSelection {
|
||||
|
||||
#applepayParentLink {
|
||||
|
||||
margin: 0;
|
||||
padding: 10px 0;
|
||||
background-color: #000000;
|
||||
|
||||
label {
|
||||
padding: 0;
|
||||
|
||||
apple-pay-button {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.list-group-item {
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8E9292;
|
||||
}
|
||||
|
||||
&:host {
|
||||
--apple-pay-button-width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#paypalParentLink {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
|
||||
#paypalImage {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
&.list-group-item {
|
||||
box-shadow: none;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #8E9292;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.no-applepay {
|
||||
.form-group {
|
||||
width: 100%;
|
||||
|
||||
&#applepayParentDiv {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&#paypalParentDiv {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.list-group {
|
||||
&.paymentSelection {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#paypalParentLink {
|
||||
|
||||
#paypalImage {
|
||||
max-width: 25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#other-payments-container {
|
||||
label {
|
||||
display: inline-flex;
|
||||
text-align: left;
|
||||
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
||||
span {
|
||||
&.paymentOptionText {
|
||||
margin: auto 0;
|
||||
padding-left: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#afterpayParentLink {
|
||||
label {
|
||||
> span {
|
||||
&:first-of-type {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#creditCardParentDiv {
|
||||
&.active {
|
||||
margin-bottom: 32px;
|
||||
border: 1px solid #0070D1;
|
||||
border-radius: 10px;
|
||||
|
||||
> .paymentSelection {
|
||||
#creditCardParentLink {
|
||||
border-width: 0 0 2px 0;
|
||||
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 16px;
|
||||
|
||||
> .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.italicSmall {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.disclaimerContainerv2 {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width: 767px) {
|
||||
#applepay-and-paypal-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#other-payments-container {
|
||||
> .form-group {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -116,3 +116,361 @@
|
|||
.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;
|
||||
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
|
@ -1,15 +1,11 @@
|
|||
const hopPaymentMethods = Object.freeze({
|
||||
CREDIT_CARD: 'cc',
|
||||
PAYPAL: 'pp',
|
||||
AFTERPAY: 'ap'
|
||||
});
|
||||
|
||||
const paymentMethods = Object.freeze({
|
||||
NONE: null,
|
||||
PayNow: 'PayNow', // User selected the pay now and hasn't selected their payment method yet
|
||||
PAY_AT_TIME_OF_SERVICE: 'PayAtTimeOfService',
|
||||
CREDIT_CARD: 'CreditCard',
|
||||
PAYPAL: 'Paypal',
|
||||
AFTERPAY: 'Afterpay'
|
||||
AFTERPAY: 'Afterpay',
|
||||
APPLEPAY: 'ApplePay'
|
||||
});
|
||||
|
||||
export { hopPaymentMethods, paymentMethods };
|
||||
export { paymentMethods };
|
||||
|
|
|
|||
3
src/helpers/browser-helper.js
Normal file
3
src/helpers/browser-helper.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export function supportsApplePay() {
|
||||
return !!(window.ApplePaySession && window.ApplePaySession.canMakePayments());
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import coverageStatuses from '@/constants/coverage-statuses';
|
|||
import coverageType from '@/constants/coverage-type';
|
||||
import { deepClone } from '@/helpers/object-helper';
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants';
|
||||
import { paymentMethods } from "@/constants/payment-method-constants";
|
||||
|
||||
jest.mock('@/helpers/layout-helper.js', () => jest.fn());
|
||||
|
||||
|
|
@ -80,7 +81,7 @@ const initialStore = {
|
|||
},
|
||||
payment: {
|
||||
isInsurance: true,
|
||||
isPayInAdvance: false
|
||||
paymentMethod: paymentMethods.PAY_AT_TIME_OF_SERVICE
|
||||
},
|
||||
contactInfo: {
|
||||
firstName: 'Test',
|
||||
|
|
|
|||
|
|
@ -147,7 +147,7 @@ export default {
|
|||
return { mainStore, submittedOrder };
|
||||
},
|
||||
data() {
|
||||
var {
|
||||
const {
|
||||
vehicle,
|
||||
serviceLocation,
|
||||
schedule,
|
||||
|
|
@ -155,8 +155,9 @@ export default {
|
|||
payment,
|
||||
customerPortalLoginToken,
|
||||
damage,
|
||||
referralNumber } = this.submittedOrder;
|
||||
var { issConfig, hasRecalibrationPart } = this.mainStore;
|
||||
referralNumber
|
||||
} = this.submittedOrder;
|
||||
const { issConfig, hasRecalibrationPart } = this.mainStore;
|
||||
return {
|
||||
vehicle,
|
||||
customerEmail: customer?.emailAddress,
|
||||
|
|
@ -179,7 +180,7 @@ export default {
|
|||
mobile: 'MobileWordingWidget',
|
||||
dropOffAndInShop: 'DropOffAndInShopWordingWidget',
|
||||
siteFooter: 'SiteFooterWidget'
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -383,8 +384,7 @@ export default {
|
|||
);
|
||||
|
||||
// Payment
|
||||
const paymentMethodReqs =
|
||||
useMainStore().order.payment.isPayInAdvance === false;
|
||||
const paymentMethodReqs = useMainStore().order.payment.paymentMethod != null;
|
||||
|
||||
return (
|
||||
serviceLocationReqs
|
||||
|
|
|
|||
|
|
@ -72,8 +72,7 @@ describe('payment-method.vue', () => {
|
|||
const store = {
|
||||
order: {
|
||||
payment: {
|
||||
isPayInAdvance: false,
|
||||
payInAdvanceType: null
|
||||
paymentMethod: null
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -91,8 +90,7 @@ describe('payment-method.vue', () => {
|
|||
const store = {
|
||||
order: {
|
||||
payment: {
|
||||
isPayInAdvance: true,
|
||||
payInAdvanceType: payInAdvanceMethod
|
||||
paymentMethod: payInAdvanceMethod
|
||||
},
|
||||
insuranceCoverage: {
|
||||
coverageStatus: coverageStatuses.VERIFIED,
|
||||
|
|
@ -115,8 +113,7 @@ describe('payment-method.vue', () => {
|
|||
const store = {
|
||||
order: {
|
||||
payment: {
|
||||
isPayInAdvance: true,
|
||||
payInAdvanceType: payInAdvanceMethod
|
||||
paymentMethod: payInAdvanceMethod
|
||||
},
|
||||
insuranceCoverage: {
|
||||
coverageStatus: coverageStatuses.VERIFIED,
|
||||
|
|
@ -139,8 +136,7 @@ describe('payment-method.vue', () => {
|
|||
const store = {
|
||||
order: {
|
||||
payment: {
|
||||
isPayInAdvance: true,
|
||||
payInAdvanceType: payInAdvanceMethod
|
||||
paymentMethod: payInAdvanceMethod
|
||||
},
|
||||
insuranceCoverage: {
|
||||
coverageStatus: coverageStatuses.PENDING,
|
||||
|
|
@ -173,8 +169,7 @@ describe('payment-method.vue', () => {
|
|||
const store = {
|
||||
order: {
|
||||
payment: {
|
||||
isPayInAdvance: true,
|
||||
payInAdvanceType: payInAdvanceMethod
|
||||
paymentMethod: payInAdvanceMethod
|
||||
},
|
||||
insuranceCoverage: {
|
||||
coverageStatus: coverageStatuses.VERIFIED,
|
||||
|
|
@ -327,8 +322,7 @@ describe('payment-method.vue', () => {
|
|||
const store = {
|
||||
order: {
|
||||
payment: {
|
||||
isPayInAdvance: false,
|
||||
payInAdvanceType: null
|
||||
paymentMethod: paymentMethods.PAY_AT_TIME_OF_SERVICE
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -43,8 +43,8 @@
|
|||
:isDismissible="false" />
|
||||
<paymentMethodQuestion
|
||||
v-if="!isPayInAdvanceDisabled"
|
||||
v-model="paymentMethodInternalModel"
|
||||
cmsWidgetName="PaymentMethodWidget"
|
||||
v-model="paymentMethod"
|
||||
:cmsWidgetName="paymentMethodWidgetName"
|
||||
:validationRules="rules.optionRequired" />
|
||||
<alert
|
||||
v-if="isPayInAdvanceDisabled"
|
||||
|
|
@ -93,6 +93,7 @@ import { saveSession, submitWorkOrder } from '@/helpers/order-helper.js';
|
|||
import { experimentSettings } from '@/constants/experiments';
|
||||
import submitType from '@/constants/submit-type';
|
||||
import routerParams from '@/router/router-constants/router-params';
|
||||
import { supportsApplePay } from '@/helpers/browser-helper';
|
||||
|
||||
export default {
|
||||
name: 'payment-method',
|
||||
|
|
@ -131,7 +132,11 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
paymentMethodInternalModel: this.getPaymentMethodFromStore(),
|
||||
paymentMethod: this.getPaymentMethodFromStore(),
|
||||
widget: {
|
||||
paymentMethod: 'PaymentMethodWidget',
|
||||
paymentMethodApplePay: 'PaymentMethodWidgetApplePay'
|
||||
},
|
||||
rules: {
|
||||
optionRequired: globalRules.OPTION_REQUIRED
|
||||
}
|
||||
|
|
@ -140,10 +145,8 @@ export default {
|
|||
computed: {
|
||||
customCallToActionButtonCopy() {
|
||||
switch (this.paymentMethod) {
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
case paymentMethods.PayNow:
|
||||
return 'Continue to checkout';
|
||||
case paymentMethods.PAYPAL:
|
||||
return 'Continue to Paypal';
|
||||
case paymentMethods.AFTERPAY:
|
||||
return 'Continue to Afterpay';
|
||||
default:
|
||||
|
|
@ -160,8 +163,8 @@ export default {
|
|||
|
||||
return !isEnabled || useMainStore().isUnverified || (useMainStore().isDeductible && isDeductibleTotalEqualToZero);
|
||||
},
|
||||
paymentMethod() {
|
||||
return this.paymentMethodInternalModel;
|
||||
paymentMethodWidgetName() {
|
||||
return supportsApplePay() ? this.widget.paymentMethodApplePay : this.widget.paymentMethod;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -252,22 +255,17 @@ export default {
|
|||
);
|
||||
},
|
||||
getPaymentMethodFromStore() {
|
||||
const { payInAdvanceType } = useMainStore().order.payment;
|
||||
const isPayInAdvance =
|
||||
useMainStore().order.payment.isPayInAdvance
|
||||
&& !!payInAdvanceType
|
||||
&& !this.isPayInAdvanceDisabled;
|
||||
if (this.isPayInAdvanceDisabled) {
|
||||
return paymentMethods.PAY_AT_TIME_OF_SERVICE;
|
||||
}
|
||||
|
||||
return isPayInAdvance
|
||||
? payInAdvanceType
|
||||
: paymentMethods.PAY_AT_TIME_OF_SERVICE;
|
||||
return useMainStore().order.payment.paymentMethod;
|
||||
},
|
||||
updateFooterButtonText(newValue) {
|
||||
this.$refs.siteFooter.updateButtonText(newValue);
|
||||
},
|
||||
async forwardButtonAction() {
|
||||
useMainStore().savePaymentMethodChoice(this.paymentMethod);
|
||||
|
||||
if (this.paymentMethod === paymentMethods.PAY_AT_TIME_OF_SERVICE) {
|
||||
try {
|
||||
await submitWorkOrder({ submitType: submitType.SAFELITE });
|
||||
|
|
|
|||
|
|
@ -3,11 +3,10 @@ import payment from '@/layouts/payment-page/payment-page.vue';
|
|||
|
||||
// Supporting Files
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { getMountOptions } from '@/helpers/unit-test-helper';
|
||||
import { getEnumName, getMountOptions } from '@/helpers/unit-test-helper';
|
||||
import { useMainStore } from '@/store';
|
||||
import { paymentMethods, hopPaymentMethods } from '@/constants/payment-method-constants.js';
|
||||
import { paymentMethods } from '@/constants/payment-method-constants.js';
|
||||
import queryStrings from '@/constants/query-strings';
|
||||
import CartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
|
||||
import { createTestingPinia } from '@pinia/testing';
|
||||
import settleAllPromises from '@/helpers/layout-helper';
|
||||
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
|
||||
|
|
@ -207,8 +206,7 @@ const defaultOrder = {
|
|||
},
|
||||
payment: {
|
||||
isInsurance: false,
|
||||
isPayInAdvance: true,
|
||||
payInAdvanceType: 'Afterpay',
|
||||
paymentMethod: paymentMethods.AFTERPAY,
|
||||
inactivePromos: []
|
||||
},
|
||||
schedule: {
|
||||
|
|
@ -239,8 +237,7 @@ describe('payment-page.vue', () => {
|
|||
test('Returns false if pia options are not valid', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.isPayInAdvance = null;
|
||||
useMainStore().order.payment.payInAdvanceType = null;
|
||||
useMainStore().order.payment.paymentMethod = null;
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
|
@ -252,8 +249,7 @@ describe('payment-page.vue', () => {
|
|||
test('Returns false if pay at time of service', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.isPayInAdvance = false;
|
||||
useMainStore().order.payment.payInAdvanceType = null;
|
||||
useMainStore().order.payment.paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
|
||||
|
||||
// Act
|
||||
const result = wrapper.vm.arePagePrerequisitesValid();
|
||||
|
|
@ -265,94 +261,6 @@ describe('payment-page.vue', () => {
|
|||
});
|
||||
|
||||
describe('payment type mapping', () => {
|
||||
describe('getPaymentType', () => {
|
||||
test('Maps AFTERPAY -> hopPaymentMethods.AFTERPAY', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.payInAdvanceType = paymentMethods.AFTERPAY;
|
||||
|
||||
// Act
|
||||
const mapped = wrapper.vm.getPaymentType();
|
||||
|
||||
// Assert
|
||||
expect(mapped).toBe(hopPaymentMethods.AFTERPAY);
|
||||
});
|
||||
|
||||
test('Maps CREDIT_CARD -> hopPaymentMethods.CREDIT_CARD', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.payInAdvanceType = paymentMethods.CREDIT_CARD;
|
||||
|
||||
// Act
|
||||
const mapped = wrapper.vm.getPaymentType();
|
||||
|
||||
// Assert
|
||||
expect(mapped).toBe(hopPaymentMethods.CREDIT_CARD);
|
||||
});
|
||||
|
||||
test('Maps PAYPAL -> hopPaymentMethods.PAYPAL', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.payInAdvanceType = paymentMethods.PAYPAL;
|
||||
|
||||
// Act
|
||||
const mapped = wrapper.vm.getPaymentType();
|
||||
|
||||
// Assert
|
||||
expect(mapped).toBe(hopPaymentMethods.PAYPAL);
|
||||
});
|
||||
|
||||
test('Maps other values to self', () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.payInAdvanceType = 'SomeOtherText';
|
||||
|
||||
// Act
|
||||
const mapped = wrapper.vm.getPaymentType();
|
||||
|
||||
// Assert
|
||||
expect(mapped).toBe('SomeOtherText');
|
||||
});
|
||||
});
|
||||
|
||||
describe('cart-dropdown', () => {
|
||||
test('Show cart dropdown if credit card', async () => {
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
wrapper.vm.paymentType = hopPaymentMethods.CREDIT_CARD;
|
||||
|
||||
// Act
|
||||
await wrapper.vm.$nextTick();
|
||||
const cartTable = wrapper.findComponent(CartDropdown);
|
||||
|
||||
// Assert
|
||||
expect(cartTable.exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('show cart dropdown if afterpay', async () => {
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
wrapper.vm.paymentType = hopPaymentMethods.AFTERPAY;
|
||||
|
||||
// Act
|
||||
await wrapper.vm.$nextTick();
|
||||
const cartTable = wrapper.findComponent(CartDropdown);
|
||||
|
||||
// Assert
|
||||
expect(cartTable.exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('Hide cart dropdown if paypal', async () => {
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
wrapper.vm.paymentType = hopPaymentMethods.PAYPAL;
|
||||
|
||||
// Act
|
||||
await wrapper.vm.$nextTick();
|
||||
const cartTable = wrapper.findComponent(CartDropdown);
|
||||
|
||||
// Assert
|
||||
expect(cartTable.exists()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
describe('isPaypal', () => {
|
||||
test('Is responsive if initial data changes', async () => {
|
||||
// Arrange
|
||||
|
|
@ -361,7 +269,7 @@ describe('payment-page.vue', () => {
|
|||
|
||||
// Act
|
||||
const preVal = wrapper.vm.isPaypal;
|
||||
wrapper.vm.paymentType = hopPaymentMethods.PAYPAL;
|
||||
wrapper.vm.paymentType = paymentMethods.PAYPAL;
|
||||
await wrapper.vm.$nextTick();
|
||||
|
||||
const postVal = wrapper.vm.isPaypal;
|
||||
|
|
@ -441,6 +349,7 @@ describe('payment-page.vue', () => {
|
|||
};
|
||||
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.paymentMethod = paymentMethods.PayNow;
|
||||
|
||||
// Act
|
||||
wrapper.vm.handleIFrameContentWindowMessage(event);
|
||||
|
|
@ -522,4 +431,26 @@ describe('payment-page.vue', () => {
|
|||
expect(afterPayErrorAlert.isVisible()).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe.each([
|
||||
[paymentMethods.CREDIT_CARD, { data: 'creditCardSubmit' }],
|
||||
[paymentMethods.AFTERPAY, { data: 'afterpayPaymentReceived' }],
|
||||
[paymentMethods.APPLEPAY, { data: 'applepayOpened' }],
|
||||
[paymentMethods.PAYPAL, { data: 'showLoaderForPaypal' }]
|
||||
])('handleIFrameContentWindowMessage', (expected, event) => {
|
||||
test(`sets paymentMethod to ${getEnumName(paymentMethods, expected)} when data is ${event.data}`, () => {
|
||||
// Arrange
|
||||
const { wrapper } = getMountedComponent(defaultOrder);
|
||||
useMainStore().order.payment.paymentMethod = paymentMethods.PayNow;
|
||||
|
||||
useMainStore().savePaymentMethodChoice = jest.fn().mockImplementation((value) => {useMainStore().order.payment.paymentMethod = value});
|
||||
|
||||
// Act
|
||||
wrapper.vm.handleIFrameContentWindowMessage(event);
|
||||
const result = useMainStore().order.payment.paymentMethod;
|
||||
|
||||
// Assert
|
||||
expect(result).toBe(expected);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -33,12 +33,12 @@
|
|||
class="hop-iframe payment-iframe"
|
||||
name="card-frame"
|
||||
seamless
|
||||
scrolling="no">
|
||||
scrolling="no"
|
||||
allow="payment *; microphone *; geolocation *;">
|
||||
</iframe>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="isCreditCard || isAfterPay"
|
||||
class="px-2">
|
||||
<hr :class="{'my-0': isCreditCard}">
|
||||
<cartDropdown
|
||||
|
|
@ -73,10 +73,6 @@
|
|||
:target="isPaypal ? '_top' : 'card-frame'"
|
||||
method="POST"
|
||||
:action="checkoutUrl">
|
||||
<input
|
||||
type="hidden"
|
||||
name="paymentType"
|
||||
:value="paymentType" />
|
||||
<input
|
||||
type="hidden"
|
||||
name="sgSessionId"
|
||||
|
|
@ -385,6 +381,10 @@
|
|||
type="hidden"
|
||||
name="calling_application"
|
||||
value="ISSNextGen" />
|
||||
|
||||
<input type="hidden"
|
||||
name="parentdomainname"
|
||||
:value="parentNomainName" />
|
||||
</form>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -403,10 +403,7 @@ import { useMainStore } from '@/store';
|
|||
import iframeResize from 'iframe-resizer/js/iframeResizer.js';
|
||||
import externalUrls from '@/router/router-constants/externalUrl-values.js';
|
||||
import widgetFields from '@/constants/cms-widget-fields.js';
|
||||
import {
|
||||
hopPaymentMethods,
|
||||
paymentMethods
|
||||
} from '@/constants/payment-method-constants.js';
|
||||
import { paymentMethods } from '@/constants/payment-method-constants.js';
|
||||
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
|
||||
import queryStrings from '@/constants/query-strings';
|
||||
import alert from '@/ux-components/alert/alert.vue';
|
||||
|
|
@ -440,8 +437,7 @@ export default {
|
|||
// Call APIs
|
||||
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
|
||||
|
||||
const paymentSignaturePromise =
|
||||
await useMainStore().getPaymentSignature();
|
||||
const paymentSignaturePromise = await useMainStore().getPaymentSignature();
|
||||
|
||||
// Settle promises and get results
|
||||
const promiseResultMap = [
|
||||
|
|
@ -478,7 +474,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
checkoutUrl: externalUrls.SAFELITE_HOP,
|
||||
paymentType: this.getPaymentType(),
|
||||
paymentType: useMainStore().order.payment.paymentMethod,
|
||||
authToken: '',
|
||||
authSignature: '',
|
||||
authSignatureStart: '',
|
||||
|
|
@ -503,6 +499,9 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
parentNomainName() {
|
||||
return window.location.hostname;
|
||||
},
|
||||
payInAdvanceResponseUrl() {
|
||||
const { protocol, host } = window.location;
|
||||
return `${protocol}//${host}/?issPage=${issPageValues.PAYMENT_RETURN}&src=iss-nextgen`;
|
||||
|
|
@ -521,10 +520,7 @@ export default {
|
|||
},
|
||||
getHeaderLine1() {
|
||||
if (!this.isPaypal) {
|
||||
return this.getCmsContent(
|
||||
'PayInAdvanceHeaderLine1',
|
||||
widgetFields.TEXT_BLOCK_WIDGET.TEXT
|
||||
);
|
||||
return this.getCmsContent('PayInAdvanceHeaderLine1', widgetFields.TEXT_BLOCK_WIDGET.TEXT);
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
|
@ -538,13 +534,13 @@ export default {
|
|||
return '';
|
||||
},
|
||||
isPaypal() {
|
||||
return this.paymentType === hopPaymentMethods.PAYPAL;
|
||||
return this.paymentType === paymentMethods.PAYPAL;
|
||||
},
|
||||
isCreditCard() {
|
||||
return this.paymentType === hopPaymentMethods.CREDIT_CARD;
|
||||
return this.paymentType === paymentMethods.CREDIT_CARD;
|
||||
},
|
||||
isAfterPay() {
|
||||
return this.paymentType === hopPaymentMethods.AFTERPAY;
|
||||
return this.paymentType === paymentMethods.AFTERPAY;
|
||||
},
|
||||
displayPayInAdvanceCreditCardAlert() {
|
||||
return this.displayPayInAdvanceAlert(paymentMethods.CREDIT_CARD);
|
||||
|
|
@ -605,10 +601,7 @@ export default {
|
|||
&& contactInfo.emailAddress
|
||||
);
|
||||
|
||||
const paymentMethodReqs =
|
||||
useMainStore().order.payment.isPayInAdvance !== null
|
||||
&& (useMainStore().order.payment.isPayInAdvance
|
||||
|| !!useMainStore().order.payment.payInAdvanceType);
|
||||
const paymentMethodReqs = useMainStore().isPayInAdvance;
|
||||
|
||||
return (
|
||||
packageReqs
|
||||
|
|
@ -664,18 +657,6 @@ export default {
|
|||
?? useMainStore().order.serviceLocation.provider.address.zipCode
|
||||
);
|
||||
},
|
||||
getPaymentType() {
|
||||
switch (useMainStore().order.payment.payInAdvanceType) {
|
||||
case paymentMethods.AFTERPAY:
|
||||
return hopPaymentMethods.AFTERPAY;
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
return hopPaymentMethods.CREDIT_CARD;
|
||||
case paymentMethods.PAYPAL:
|
||||
return hopPaymentMethods.PAYPAL;
|
||||
default:
|
||||
return useMainStore().payment.payInAdvanceType;
|
||||
}
|
||||
},
|
||||
getPayInAdvanceLineItems(cartItems) {
|
||||
const { glassParts } = useMainStore().order.lineItems;
|
||||
const lineItems =
|
||||
|
|
@ -724,21 +705,12 @@ export default {
|
|||
if (iframe) {
|
||||
iframe.onload = () => {
|
||||
if (iframe.contentWindow) {
|
||||
if (
|
||||
this.paymentType
|
||||
=== hopPaymentMethods.CREDIT_CARD
|
||||
) {
|
||||
iframe.contentWindow.postMessage(
|
||||
'CreditCardChosen',
|
||||
'*'
|
||||
);
|
||||
} else if (
|
||||
this.paymentType === hopPaymentMethods.AFTERPAY
|
||||
) {
|
||||
iframe.contentWindow.postMessage(
|
||||
'afterpay',
|
||||
'*'
|
||||
);
|
||||
iframe.contentWindow.postMessage('hybrid', '*');
|
||||
|
||||
if (this.isAfterPay) {
|
||||
iframe.contentWindow.postMessage('afterpay', '*');
|
||||
} else {
|
||||
iframe.contentWindow.postMessage('CreditCardChosen', '*');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -746,18 +718,34 @@ export default {
|
|||
});
|
||||
},
|
||||
handleIFrameContentWindowMessage(event) {
|
||||
if (typeof event.data === 'string') {
|
||||
if (event.data.indexOf('afterpayClosed') > -1) {
|
||||
this.backButtonAction();
|
||||
}
|
||||
if (event.data.indexOf('creditCardSubmit') > -1) {
|
||||
this.setUIBlock(true);
|
||||
}
|
||||
if (typeof event.data !== 'string') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.includes('afterpayClosed')) {
|
||||
this.backButtonAction();
|
||||
}
|
||||
|
||||
if (useMainStore().order.payment.paymentMethod !== paymentMethods.PayNow) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.data.includes('creditCardSubmit')) {
|
||||
useMainStore().savePaymentMethodChoice(paymentMethods.CREDIT_CARD);
|
||||
this.setUIBlock(true);
|
||||
}
|
||||
if (event.data.includes('afterpayPaymentReceived')) {
|
||||
useMainStore().savePaymentMethodChoice(paymentMethods.AFTERPAY);
|
||||
}
|
||||
if (event.data.includes('applepayOpened')) {
|
||||
useMainStore().savePaymentMethodChoice(paymentMethods.APPLEPAY);
|
||||
}
|
||||
if (event.data.includes('showLoaderForPaypal')) {
|
||||
useMainStore().savePaymentMethodChoice(paymentMethods.PAYPAL);
|
||||
}
|
||||
},
|
||||
setIFrameListener() {
|
||||
window.addEventListener('message', (event) =>
|
||||
this.handleIFrameContentWindowMessage(event));
|
||||
window.addEventListener('message', this.handleIFrameContentWindowMessage);
|
||||
},
|
||||
setUIBlock(val) {
|
||||
this.shouldBlockInteraction = val;
|
||||
|
|
@ -769,8 +757,7 @@ export default {
|
|||
},
|
||||
displayPayInAdvanceAlert(payMethod) {
|
||||
return (
|
||||
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]
|
||||
=== payMethod
|
||||
this.$route.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT] === payMethod
|
||||
);
|
||||
},
|
||||
paymentFailedPayLater() {
|
||||
|
|
|
|||
|
|
@ -46,18 +46,18 @@ export default {
|
|||
async mounted() {
|
||||
showIssLoadingModal(true);
|
||||
const payInAdvanceError = getQueryStringParameter(queryStrings.ERROR);
|
||||
const { payInAdvanceType } = useMainStore().order.payment;
|
||||
const { paymentMethod } = useMainStore().order.payment;
|
||||
|
||||
if (payInAdvanceError) {
|
||||
console.error(`Error during payment: ${payInAdvanceError}`);
|
||||
const paymentPageNavScenario =
|
||||
payInAdvanceType === paymentMethods.CREDIT_CARD || payInAdvanceType === paymentMethods.AFTERPAY;
|
||||
paymentMethod === paymentMethods.CREDIT_CARD || paymentMethod === paymentMethods.AFTERPAY;
|
||||
if (paymentPageNavScenario) {
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.PAY_IN_ADVANCE_CREDIT_CARD_ERROR,
|
||||
this.$route,
|
||||
{
|
||||
[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: payInAdvanceType
|
||||
[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]: paymentMethod
|
||||
}
|
||||
);
|
||||
} else {
|
||||
|
|
@ -70,16 +70,17 @@ export default {
|
|||
);
|
||||
}
|
||||
} else {
|
||||
switch (payInAdvanceType) {
|
||||
switch (paymentMethod) {
|
||||
case paymentMethods.CREDIT_CARD:
|
||||
case paymentMethods.AFTERPAY:
|
||||
case paymentMethods.APPLEPAY:
|
||||
await this.processCreditCardResponse();
|
||||
break;
|
||||
case paymentMethods.PAYPAL:
|
||||
await this.processPaypalResponse();
|
||||
break;
|
||||
default:
|
||||
console.log(`Unknown pay in advance type: ${payInAdvanceType}`);
|
||||
console.log(`Unknown payment method: ${paymentMethod}`);
|
||||
this.$router.navigate(
|
||||
this.navigationScenarios.PAY_IN_ADVANCE_ERROR,
|
||||
this.$route,
|
||||
|
|
|
|||
|
|
@ -169,9 +169,8 @@ export const getDefaultState = () => ({
|
|||
},
|
||||
payment: {
|
||||
parentAccountNumber: 0,
|
||||
isPayInAdvance: null,
|
||||
nextGenSettledAmount: 0,
|
||||
payInAdvanceType: null,
|
||||
paymentMethod: null,
|
||||
paypalToken: null,
|
||||
creditCardToken: {
|
||||
subscriptionId: null,
|
||||
|
|
@ -305,6 +304,7 @@ export const useMainStore = defineStore({
|
|||
isUnverified: (s) => s.order.insuranceCoverage.coverageStatus !== coverageStatuses.VERIFIED,
|
||||
isVerified: (state) => state.order.insuranceCoverage.coverageStatus === coverageStatuses.VERIFIED,
|
||||
isPendingClaimRegistration: (state) => state.order.insuranceCoverage.coverageStatus === coverageStatuses.PENDING,
|
||||
isPayInAdvance: (state) => state.order.payment.paymentMethod != null && state.order.payment.paymentMethod !== paymentMethods.PAY_AT_TIME_OF_SERVICE,
|
||||
providerNumber: (state) => state.order.serviceLocation.provider.providerNumber || state.order.serviceLocation.defaultProviderNumber,
|
||||
hasOemEndorsement: (state) => state.order.policy.endorsements?.indexOf('OEM Approved') !== -1 ?? false,
|
||||
eventBusItem: (state) => (eventCategory, eventSubCategory) => {
|
||||
|
|
@ -1436,7 +1436,7 @@ export const useMainStore = defineStore({
|
|||
payment: {
|
||||
parentAccountNumber: this.issConfig.parentAccountNumber,
|
||||
paypalToken: payment.paypalToken,
|
||||
paymentMethod: payment.payInAdvanceType,
|
||||
paymentMethod: payment.paymentMethod === paymentMethods.PayNow ? null : payment.paymentMethod,
|
||||
nextGenSettledAmount: payment.nextGenSettledAmount,
|
||||
CCToken: payment.creditCardToken
|
||||
},
|
||||
|
|
@ -2022,6 +2022,25 @@ export const useMainStore = defineStore({
|
|||
this.order.policy.deductible.replace = null;
|
||||
},
|
||||
|
||||
resetPayment() {
|
||||
this.order.payment.parentAccountNumber = 0;
|
||||
this.order.payment.nextGenSettledAmount = 0;
|
||||
this.order.payment.paymentMethod = null;
|
||||
this.order.payment.paypalToken = null;
|
||||
this.order.payment.creditCardToken.subscriptionId = null;
|
||||
this.order.payment.creditCardToken.expMonth = null;
|
||||
this.order.payment.creditCardToken.expYear = null;
|
||||
this.order.payment.creditCardToken.cardType = null;
|
||||
this.order.payment.creditCardToken.billToPostalCode = null;
|
||||
this.order.payment.creditCardToken.billToFirstName = null;
|
||||
this.order.payment.creditCardToken.billToLastName = null;
|
||||
this.order.payment.creditCardToken.referenceNumber = null;
|
||||
this.order.payment.creditCardToken.authCode = null;
|
||||
this.order.payment.creditCardToken.transactionId = null;
|
||||
this.order.payment.creditCardToken.transReferenceNumber = null;
|
||||
this.order.payment.creditCardToken.lastFour = null;
|
||||
},
|
||||
|
||||
resetCustomer() {
|
||||
this.order.customer.emailAddress = null;
|
||||
this.order.customer.firstName = null;
|
||||
|
|
@ -2765,6 +2784,7 @@ export const useMainStore = defineStore({
|
|||
this.resetOrder();
|
||||
this.resetCustomer();
|
||||
this.resetPolicy();
|
||||
this.resetPayment();
|
||||
this.resetContactInfo();
|
||||
this.resetVehicleState();
|
||||
this.resetDamageState();
|
||||
|
|
@ -2776,9 +2796,7 @@ export const useMainStore = defineStore({
|
|||
this.resetSubmittedOrder();
|
||||
},
|
||||
savePaymentMethodChoice(paymentMethod) {
|
||||
const isPayInAdvance = paymentMethod !== paymentMethods.PAY_AT_TIME_OF_SERVICE;
|
||||
this.order.payment.isPayInAdvance = isPayInAdvance;
|
||||
this.order.payment.payInAdvanceType = isPayInAdvance ? paymentMethod : null;
|
||||
this.order.payment.paymentMethod = paymentMethod;
|
||||
},
|
||||
|
||||
getPaymentSignature() {
|
||||
|
|
@ -2807,6 +2825,7 @@ export const useMainStore = defineStore({
|
|||
submittedOrder.isUnverified = this.isUnverified;
|
||||
submittedOrder.isVerified = this.isVerified;
|
||||
submittedOrder.submitType = submitType;
|
||||
submittedOrder.payment.isPayInAdvance = this.isPayInAdvance;
|
||||
|
||||
// set to local storage
|
||||
window.sessionStorage.setItem(webStorageConstants.SUBMITTED_ORDER, JSON.stringify(submittedOrder));
|
||||
|
|
|
|||
|
|
@ -2048,28 +2048,20 @@ describe('Store', () => {
|
|||
});
|
||||
});
|
||||
|
||||
describe('savePaymentMethodChoice method', () => {
|
||||
it('isPayInAdvance saved as false when choice is to pay at time of servce', () => {
|
||||
describe.each([
|
||||
[paymentMethods.CREDIT_CARD],
|
||||
[paymentMethods.AFTERPAY],
|
||||
[paymentMethods.APPLEPAY],
|
||||
[paymentMethods.PAYPAL]
|
||||
])('savePaymentMethodChoice method', (expected) => {
|
||||
test(`sets paymentMethod to ${getEnumName(paymentMethods, expected)} when value is ${getEnumName(paymentMethods, expected)}`, () => {
|
||||
// Arrange
|
||||
const paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
|
||||
|
||||
// Act
|
||||
store.savePaymentMethodChoice(paymentMethod);
|
||||
store.savePaymentMethodChoice(expected);
|
||||
|
||||
// Assert
|
||||
expect(store.order.payment.isPayInAdvance).toEqual(false);
|
||||
expect(store.order.payment.payInAdvanceType).toEqual(null);
|
||||
});
|
||||
it('isPayInAdvance saved as true when choice is other than to pay at time of servce', () => {
|
||||
// Arrange
|
||||
const paymentMethod = paymentMethods.CREDIT_CARD;
|
||||
|
||||
// Act
|
||||
store.savePaymentMethodChoice(paymentMethod);
|
||||
|
||||
// Assert
|
||||
expect(store.order.payment.isPayInAdvance).toEqual(true);
|
||||
expect(store.order.payment.payInAdvanceType).toEqual(paymentMethod);
|
||||
expect(store.order.payment.paymentMethod).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ process.env.VUE_APP_CONSUMER_CF_DISTRO = 'https://digitalapi.dev.safelite.io';
|
|||
process.env.VUE_APP_CURRENT_ENVIRONMENT = 'Localhost';
|
||||
process.env.VUE_APP_CUSTOMER_PORTAL_URL = 'https://myaccountdev.safelite.com/';
|
||||
process.env.VUE_APP_GOOGLE_PLACES_API_KEY = 'AIzaSyCuLhQcDdZTTb4JzpUFms1OCch2dk5lHF0';
|
||||
process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-dev.safelite.net/fmgCheckoutEmbedded.aspx';
|
||||
process.env.VUE_APP_SAFELITE_HOP = 'https://iss-hop-sys.glassclaim.com/fmgCheckoutShared.aspx';
|
||||
|
||||
// GA & GTM
|
||||
// NOTE: Using the old ISS site GTM Cotnainer ID for now, will create a new one soon.
|
||||
|
|
|
|||
Loading…
Reference in a new issue