Merge branch 'develop' into feature/kroell/INSR-8523

This commit is contained in:
Katie Kroell 2026-03-09 09:16:44 -04:00
commit 88669d4b55
23 changed files with 517 additions and 380 deletions

32
package-lock.json generated
View file

@ -4125,14 +4125,6 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/@trysound/sax": {
"version": "0.2.0",
"dev": true,
"license": "ISC",
"engines": {
"node": ">=10.13.0"
}
},
"node_modules/@types/aria-query": { "node_modules/@types/aria-query": {
"version": "5.0.1", "version": "5.0.1",
"dev": true, "dev": true,
@ -11372,7 +11364,9 @@
} }
}, },
"node_modules/immutable": { "node_modules/immutable": {
"version": "4.1.0", "version": "4.3.8",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.8.tgz",
"integrity": "sha512-d/Ld9aLbKpNwyl0KiM2CT1WYvkitQ1TSvmRtkcV8FKStiDoA7Slzgjmb/1G2yhKM1p0XeNOieaTbFZmU1d3Xuw==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -18309,6 +18303,16 @@
"node": ">=16.13.2" "node": ">=16.13.2"
} }
}, },
"node_modules/sax": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.5.0.tgz",
"integrity": "sha512-21IYA3Q5cQf089Z6tgaUTr7lDAyzoTPx5HRtbhsME8Udispad8dC/+sziTNugOEx54ilvatQ9YCzl4KQLPcRHA==",
"dev": true,
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=11.0.0"
}
},
"node_modules/saxes": { "node_modules/saxes": {
"version": "6.0.0", "version": "6.0.0",
"dev": true, "dev": true,
@ -19295,16 +19299,18 @@
"dev": true "dev": true
}, },
"node_modules/svgo": { "node_modules/svgo": {
"version": "2.8.0", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.2.tgz",
"integrity": "sha512-TyzE4NVGLUFy+H/Uy4N6c3G0HEeprsVfge6Lmq+0FdQQ/zqoVYB62IsBZORsiL+o96s6ff/V6/3UQo/C0cgCAA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@trysound/sax": "0.2.0",
"commander": "^7.2.0", "commander": "^7.2.0",
"css-select": "^4.1.3", "css-select": "^4.1.3",
"css-tree": "^1.1.3", "css-tree": "^1.1.3",
"csso": "^4.2.0", "csso": "^4.2.0",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"sax": "^1.5.0",
"stable": "^0.1.8" "stable": "^0.1.8"
}, },
"bin": { "bin": {
@ -20117,7 +20123,9 @@
} }
}, },
"node_modules/underscore": { "node_modules/underscore": {
"version": "1.13.6", "version": "1.13.8",
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.8.tgz",
"integrity": "sha512-DXtD3ZtEQzc7M8m4cXotyHR+FAS18C64asBYY5vqZexfYryNNnDc02W4hKg3rdQuqOYas1jkseX0+nZXjTXnvQ==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },

View file

@ -171,23 +171,38 @@ body .buttonContainer .btn-success:focus, body .buttonContainer .btn-success:act
background-color: #0c7e47; background-color: #0c7e47;
box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px #0c7e47; box-shadow: 0 0 0 3px #ffffff, 0 0 0 5.5px #0c7e47;
} }
body .has-error input, body .has-error input.form-control,
body .has-error select { body .has-error select.form-control {
border-color: #db0020; border-color: #db0020;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
body .has-error input.form-control:focus,
body .has-error select.form-control:focus {
box-shadow: none;
} }
body .has-error select { body .has-error select {
background-image: url(/icons/select-error.png); background-image: url(/icons/select-error.png);
} }
body .has-error small { body .has-error small {
font-size: 1rem;
line-height: 1.56;
margin-bottom: 0.3125rem; margin-bottom: 0.3125rem;
color: #db0020; color: #db0020;
} }
body .has-success input, body .has-success .control-label {
body .has-success select { color: #4d4e53;
}
body .has-success input.form-control,
body .has-success select.form-control {
border-color: #0c7e47; border-color: #0c7e47;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
body .has-success input.form-control:focus,
body .has-success select.form-control:focus {
box-shadow: none;
} }
body .has-success select { body .has-success select {
background-image: url(/icons/select-error.png); background-image: url(/icons/select-success.png);
} }
body .cc-error-container #alert-message { body .cc-error-container #alert-message {
background-color: #fcbfbb; background-color: #fcbfbb;
@ -337,17 +352,6 @@ body .cc-error-container #alert-message {
} }
} }
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: Glyphicons Halflings;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.form-control-feedback { .form-control-feedback {
position: absolute; position: absolute;
top: 0; top: 0;
@ -361,11 +365,12 @@ body .cc-error-container #alert-message {
pointer-events: none; pointer-events: none;
top: 27px; top: 27px;
} }
.form-control-feedback.glyphicon {
.glyphicon-remove:before { display: none;
}
.form-control-feedback.glyphicon-remove:before {
content: "\e014"; content: "\e014";
} }
.form-control-feedback.glyphicon-ok:before {
.glyphicon-ok:before {
content: "\e013"; content: "\e013";
} }

View file

@ -4,95 +4,12 @@
/* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */ /* IMPORTANT: READ README.md in this folder! Do not edit .css file directly! */
/* Style the modal when PayPal button is selected */ /* Style the modal when PayPal button is selected */
#pageLoadingModal { #pageLoadingModal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
display: flex;
}
#pageLoadingModal .modal-content {
margin: auto auto;
}
#pageLoadingModal p {
margin: 0;
text-transform: uppercase;
font-size: 14px;
}
#pageLoadingModal .modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
-webkit-overflow-scrolling: touch;
outline: 0;
}
#pageLoadingModal .modal-content {
position: relative;
background-color: #fff;
border-radius: 8px;
background-clip: padding-box;
outline: 0;
width: 176px;
height: 136px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
}
#pageLoadingModal .modal-content:after {
content: "";
border-radius: 50%;
position: absolute;
width: 5.5rem;
height: 5.5rem;
border: 0.45em solid #d4281c;
border-right-color: transparent;
animation: spinnerrotate 0.75s linear infinite;
}
@keyframes spinnerrotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
#pageLoadingModal .modal-content p {
display: none;
}
#pageLoadingModal .modal-backdrop {
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #000000;
}
#pageLoadingModal .modal-backdrop.fade {
opacity: 0;
filter: alpha(opacity=0);
}
#pageLoadingModal.hide {
display: none; display: none;
} }
.buy-backdrop { .buy-backdrop {
background-color: rgba(0, 0, 0, 0.8) !important; background-color: rgba(0, 0, 0, 0.8) !important;
} }
.buy-backdrop #afterpay__iframe-checkout-container {
width: 100%;
}
.buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe { .buy-backdrop #afterpay__iframe-checkout-container .style_closeWrapper__lIHJe {
display: none; display: none;
} }

View file

@ -198,12 +198,20 @@ body {
.has-error { .has-error {
input, input,
select { select {
border-color: #db0020; &.form-control {
border-color: #db0020;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
&:focus {
box-shadow: none;
}
}
} }
select { select {
background-image: url(/icons/select-error.png); background-image: url(/icons/select-error.png);
} }
small { small {
font-size: 1rem;
line-height: 1.56;
margin-bottom: .3125rem; margin-bottom: .3125rem;
color: #db0020; color: #db0020;
} }
@ -211,9 +219,18 @@ body {
.has-success { .has-success {
.control-label {
color: #4d4e53
}
input, input,
select { select {
border-color: #0c7e47; &.form-control {
border-color: #0c7e47;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
&:focus {
box-shadow: none;
}
}
} }
select { select {
background-image: url(/icons/select-success.png); background-image: url(/icons/select-success.png);
@ -442,17 +459,6 @@ body {
} }
} }
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: Glyphicons Halflings;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.form-control-feedback { .form-control-feedback {
position: absolute; position: absolute;
top: 0; top: 0;
@ -465,10 +471,13 @@ body {
text-align: center; text-align: center;
pointer-events: none; pointer-events: none;
top: 27px; top: 27px;
} &.glyphicon {
.glyphicon-remove:before { display: none;
content: "\e014"; }
} &.glyphicon-remove:before {
.glyphicon-ok:before { content: "\e014";
content: "\e013"; }
&.glyphicon-ok:before {
content: "\e013";
}
} }

View file

@ -5,89 +5,7 @@
/* Style the modal when PayPal button is selected */ /* Style the modal when PayPal button is selected */
#pageLoadingModal { #pageLoadingModal {
position: fixed; display: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.40);
display: flex;
.modal-content {
margin: auto auto;
}
p {
margin: 0;
text-transform: uppercase;
font-size: 14px;
}
.modal {
display: none;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal-content {
position: relative;
background-color: #fff;
border-radius: 8px;
background-clip: padding-box;
outline: 0;
width: 176px;
height: 136px;
display: flex;
justify-content: center;
align-items: center;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 84 32'%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' fill='%23fff'/%3e%3cpath d='M22.39 27.313a3.53 3.53 0 0 0 7.058 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' fill='%23fff'/%3e%3cpath d='M54.459 27.313a3.527 3.527 0 0 0 7.054 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06.8c8.08 0 11.89.935 11.89.935 3.58.576 5.696 7.207 5.696 7.207h.727c0-2.427 1.302-2.397 2.341-2 .723.292 1.363.76 1.86 1.361 1.319 1.547.465 1.674.465 1.674h-5.067l3.846 3.01v12.016c0 2.41-2.029 2.31-2.029 2.31H22.338s-2.029.1-2.029-2.31V12.996l3.84-3.009H19.07s-.853-.127.466-1.674a4.693 4.693 0 0 1 1.86-1.361c1.032-.397 2.341-.427 2.341 2h.736s2.117-6.64 5.696-7.21c0 0 3.81-.942 11.89-.942Z' fill='%23fff' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M42.06 8.847c7.924 0 14.685.511 14.685.511 0-2.585-2.38-6.011-2.38-6.011S50.4 2.519 42.06 2.519s-12.303.828-12.303.828-2.38 3.426-2.38 6.011c0 0 6.76-.51 14.683-.51Z' fill='%23DA291C' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3cpath d='M35.277 16.523a62.558 62.558 0 0 1 13.277 0m3.276-.439s2.384-2.257 8.608-2.257c0 0 1.179 2.657-2.54 3.37m-25.894-1.113s-2.387-2.257-8.611-2.257c0 0-1.16 2.579 2.543 3.37m-3.546 5.856s21.52 3.647 39.123 0' stroke='%23000' stroke-width='.75' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center center;
background-size: 96px;
&:after {
content: '';
border-radius: 50%;
position: absolute;
width: 5.5rem;
height: 5.5rem;
border: 0.45em solid #d4281c;
border-right-color: transparent;
animation: spinnerrotate 0.75s linear infinite;
}
@keyframes spinnerrotate {
0% { transform: rotate(0)}
100% { transform: rotate(360deg)}
}
p {
display: none;
}
}
.modal-backdrop {
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #000000;
&.fade {
opacity: 0;
filter: alpha(opacity=0);
}
}
&.hide {
display: none;
}
} }
// AfterPay Styles // AfterPay Styles
@ -95,7 +13,6 @@
.buy-backdrop { .buy-backdrop {
background-color: rgba(0,0,0,.8)!important; background-color: rgba(0,0,0,.8)!important;
#afterpay__iframe-checkout-container { #afterpay__iframe-checkout-container {
width: 100%;
.style_closeWrapper__lIHJe { .style_closeWrapper__lIHJe {
display: none; display: none;
} }

View file

@ -9,7 +9,3 @@ export const dropdownVariants = Object.freeze({
primary: 'primary', primary: 'primary',
compact: 'compact' compact: 'compact'
}); });
export const modalPositions = Object.freeze({
center: 'center',
edge: 'edge'
});

View file

@ -11,10 +11,7 @@
'hidden.bs.modal': onModalClosed, 'hidden.bs.modal': onModalClosed,
'shown.bs.modal': onModalOpened 'shown.bs.modal': onModalOpened
}"> }">
<div class="modal-dialog" <div class="modal-dialog">
:class="{
'modal-dialog-centered': modalPosition === modalPositions.center
}">
<div <div
class="modal-content" class="modal-content"
role="dialog" role="dialog"
@ -55,7 +52,7 @@
v-if="displayCloseLink" v-if="displayCloseLink"
class="mt-4 mb-0" class="mt-4 mb-0"
linkType="text" linkType="text"
text="Close window" :text="closeLinkText"
href="#!" href="#!"
@click="closeModal" /> @click="closeModal" />
</div> </div>
@ -68,7 +65,6 @@
import ButtonMain from '@/ux-components/button-main/button-main.vue'; import ButtonMain from '@/ux-components/button-main/button-main.vue';
import { Modal } from 'bootstrap'; import { Modal } from 'bootstrap';
import { useForm } from 'vee-validate'; import { useForm } from 'vee-validate';
import { modalPositions } from '@/constants/component-variants';
import textLink from '@/ux-components/text-link/text-link.vue'; import textLink from '@/ux-components/text-link/text-link.vue';
export default { export default {
@ -92,10 +88,6 @@ export default {
type: String, type: String,
default: 'success' default: 'success'
}, },
modalPosition: {
type: String,
default: modalPositions.center
},
allowInvalidSubmit: { allowInvalidSubmit: {
type: Boolean, type: Boolean,
default: false default: false
@ -111,6 +103,10 @@ export default {
displayCloseLink: { displayCloseLink: {
type: Boolean, type: Boolean,
default: false default: false
},
closeLinkText: {
type: String,
default: 'Close window'
} }
}, },
emits: ['footer-button-event', 'isModalOpened'], emits: ['footer-button-event', 'isModalOpened'],
@ -127,8 +123,7 @@ export default {
modalId, modalId,
meta, meta,
validate, validate,
resetForm, resetForm
modalPositions
}; };
}, },
computed: { computed: {
@ -186,6 +181,7 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
padding-right: 1rem;
h5, h5,
strong, strong,
.subheader-text { .subheader-text {
@ -231,7 +227,8 @@ export default {
&.modal-component { &.modal-component {
.modal-dialog { .modal-dialog {
display: flex; display: flex;
max-width: 37.5rem; width: 37.5rem;
max-width: unset;
min-height: auto; min-height: auto;
.modal-content { .modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25); box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
@ -240,7 +237,7 @@ export default {
overflow: auto; overflow: auto;
} }
.modal-content { .modal-content {
margin: 1.5rem auto 0 auto; margin: 0 auto;
.modal-body { .modal-body {
padding: 0 1.5rem 0 1.5rem; padding: 0 1.5rem 0 1.5rem;
.col { .col {
@ -272,18 +269,10 @@ export default {
} }
} }
} }
&.modal-dialog-centered {
.modal-content {
box-shadow: 0px 1rem 3rem -1rem rgba(0, 0, 0, 0.25);
border: 1px solid;
border-radius: 5px;
overflow: auto;
}
}
} }
.modal-footer { .modal-footer {
border-top: none; border-top: none;
padding: 10px 1.5rem 1.5rem 1.5rem; padding: .625rem 1.5rem 1.5rem 1.5rem;
button { button {
margin: 0; margin: 0;
@ -303,6 +292,15 @@ export default {
transition: opacity 0.25s linear; transition: opacity 0.25s linear;
} }
} }
@include media-breakpoint-down(md) {
&.modal-component {
.modal-dialog {
width: auto;
max-width: unset;
margin: .625rem;
}
}
}
} }
body { body {
.modal-backdrop { .modal-backdrop {

View file

@ -8,10 +8,6 @@ Object {
"firstName": "Frederick", "firstName": "Frederick",
"isModalOpened": false, "isModalOpened": false,
"lastName": "Taylor", "lastName": "Taylor",
"modalPositions": Object {
"center": "center",
"edge": "edge",
},
"phoneNumber": "606-009-2943", "phoneNumber": "606-009-2943",
"rules": Object { "rules": Object {
"emailAddress": "email-required|email-address-format", "emailAddress": "email-required|email-address-format",

View file

@ -1,15 +1,16 @@
<template> <template>
<modal <modal
:ref="modalName" :ref="modalName"
:modalPosition="modalPositions.center"
:headerText="headerText" :headerText="headerText"
:footerButtonText="footerButtonText" :footerButtonText="footerButtonText"
:onModalClosedCallback="resetFormValues" :onModalClosedCallback="resetFormValues"
:displayCloseLink="true"
:closeLinkText="closeLinkText"
class="contact-details-drawer" class="contact-details-drawer"
@isModalOpened="setModalStatus" @isModalOpened="setModalStatus"
@footerButtonEvent="clickFooterButtonEvent"> @footerButtonEvent="clickFooterButtonEvent">
<template v-if="isModalOpened"> <template v-if="isModalOpened">
<span class="name-section-label">{{ nameSectionLabel }}</span> <div class="name-section-label">{{ nameSectionLabel }}</div>
<div class="row form-group"> <div class="row form-group">
<textboxQuestion <textboxQuestion
class="col-lg-6" class="col-lg-6"
@ -71,7 +72,6 @@ import { useMainStore } from '@/store';
import globalRules from '@/constants/global-rules.js'; import globalRules from '@/constants/global-rules.js';
import MaskaFormattedMasks from '@/constants/maska-masks'; import MaskaFormattedMasks from '@/constants/maska-masks';
import widgetFields from '@/constants/cms-widget-fields.js'; import widgetFields from '@/constants/cms-widget-fields.js';
import { modalPositions } from '@/constants/component-variants';
export default { export default {
name: 'contact-details-drawer', name: 'contact-details-drawer',
@ -109,7 +109,6 @@ export default {
phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`, phoneNumber: `${globalRules.PHONE_NUMBER_REQUIRED}|${globalRules.PHONE_NUMBER_FORMAT}`,
extension: `${globalRules.EXTENSION_FORMAT}` extension: `${globalRules.EXTENSION_FORMAT}`
}, },
modalPositions,
detailsSaved: false detailsSaved: false
}; };
}, },
@ -132,6 +131,9 @@ export default {
nameSectionLabel() { nameSectionLabel() {
return this.getCmsContent(this.widget.firstNameQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT); return this.getCmsContent(this.widget.firstNameQuestion, widgetFields.INPUT_QUESTION_WIDGET.QUESTION_TEXT);
}, },
closeLinkText() {
return this.getCmsContent(this.widget.drawerFooter, widgetFields.FOOTER_WIDGET.BACK_BUTTON_TEXT);
}
}, },
methods: { methods: {
setModalStatus(isOpened) { setModalStatus(isOpened) {
@ -203,5 +205,58 @@ export default {
margin-top: .625rem; margin-top: .625rem;
} }
} }
:deep(.modal-dialog) {
.modal-content {
padding: 1.25rem 1.25rem 0;
.modal-header {
padding: 0;
.modal-title {
padding: 0;
font-size: 1rem;
}
}
.modal-body {
padding: 0;
overflow: hidden;
}
.modal-footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
padding: 0rem;
button {
background-color: $heritage-blue-primary;
color: $white;
font-weight: 600;
width: 10.75rem;
margin-bottom: 1.25rem;
&:hover {
background-color: #00559e;
}
}
a {
margin: .5rem 0 0;
font-weight: $font-weight-normal;
}
@include media-breakpoint-down(lg) {
align-items: center;
flex-direction: column;
button {
width: 100%;
}
}
}
}
}
} }
</style> </style>

View file

@ -8,18 +8,23 @@
:headerText="modalHeaderText" :headerText="modalHeaderText"
:footerButtonText="modalFooterText" :footerButtonText="modalFooterText"
buttonVariant="primary" buttonVariant="primary"
:displayCloseButton="false"
@isModalOpened="setModalStatus" @isModalOpened="setModalStatus"
@footerButtonEvent="startNewReferral"> @footerButtonEvent="startNewReferral">
<p class="mb-2 subheader-text text-center"> <p class="continue-subheader">
{{ modalSubHeaderText }} {{ modalSubHeaderText }}
</p> </p>
<buttonMain <buttonMain
id="btnContinueReferral" id="btnContinueReferral"
variant="success" variant="success"
class="mt-2 w-100" class="continue-btn w-100"
:buttonText="modalBodyText" :buttonText="modalBodyText"
@click-event="continueReferral"> @click-event="continueReferral">
</buttonMain> </buttonMain>
<div class="or-container">
<hr/>
<span>or</span>
</div>
</modal> </modal>
</div> </div>
</transition> </transition>
@ -58,7 +63,7 @@ export default {
}, },
modalSubHeaderText() { modalSubHeaderText() {
return this.getCmsContent('ContinueReferralModalWidget', 'SubheaderText') return this.getCmsContent('ContinueReferralModalWidget', 'SubheaderText')
.replaceAll('{custom:mmFound}', this.getMakeModelString); .replaceAll('{custom:mmFound}', this.getMakeModelString.toUpperCase());
} }
}, },
methods: { methods: {
@ -82,5 +87,64 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.continue-modal-container {
.continue-subheader {
margin-bottom: 1.25rem;
}
.continue-btn {
background-color: #098649;
}
.or-container {
position: relative;
hr {
margin: 1.875rem 0 1.25rem;
}
span {
position: absolute;
top: -0.75rem;
left: 50%;
margin-left: -1.625rem;
padding: 0 1.125rem;
background-color: white;
}
}
:deep(.modal) {
.modal-dialog {
.modal-content {
.modal-header {
padding: 1.25rem 1rem .625rem;
.modal-title {
padding: 0;
}
}
.modal-body {
padding: 0rem 1rem;
}
.modal-footer {
padding: 0rem 1rem 1rem;
button {
background-color: $heritage-blue-primary;
color: $white;
font-weight: 600;
margin-bottom: 1.25rem;
&:hover {
background-color: #00559e;
}
}
}
}
@include media-breakpoint-down(md) {
margin: 1.625rem 1rem 0;
}
}
}
}
</style> </style>

View file

@ -124,13 +124,7 @@ export default {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@include media-breakpoint-up(xs) { padding: 2rem;
padding-top: 5rem;
}
@include media-breakpoint-up(md) {
padding-top: 7rem;
}
.modal-loader-content-container { .modal-loader-content-container {
min-width: 15rem; // 240px min-width: 15rem; // 240px

View file

@ -10,11 +10,69 @@ import { getRandomString, getRandomInt, getRandomBoolean } from '@/helpers/data-
import navigationScenarios from '@/router/router-constants/navigation-scenarios.js'; import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
import { useMainStore } from '@/store/index.js'; import { useMainStore } from '@/store/index.js';
/** @ignore */
function setupMocks({
storeData,
props
}) {
const mountOptions = getMountOptions({
router: {
navigate: jest.fn(),
navigateWithSpinner: jest.fn()
},
loadScript: jest.fn().mockResolvedValue()
});
if (storeData) mountOptions.global.plugins = [createTestingPinia({
initialState: {
main: storeData
}
})];
window.google = {
maps: {
event: {
addListener: jest
.fn()
.mockImplementation((element, eventName, callbackFunction) => {
/** @ignore */
function interceptedCallbackFunction(e) {
callbackFunction(e.detail);
}
// selectedPlace = "Woogly";
element.addEventListener(eventName, interceptedCallbackFunction);
}),
removeListener: jest.fn(),
clearInstanceListeners: jest.fn()
},
places: {
Autocomplete: jest.fn().mockImplementation((el) => el),
AutocompleteService: jest.fn().mockImplementation(() => {
return {
getPlacePredictions: (request, callback) => {
// Throwing an error here guarantees that the function that calls it finishes
throw new Error();
}
};
}),
PlacesService: jest.fn().mockImplementation(() => {}),
AutocompleteSessionToken: jest.fn().mockImplementation(() => {})
}
}
};
if (props) mountOptions.propsData = props;
const wrapper = shallowMount(contactDetails, mountOptions);
return { wrapper };
}
describe('contactDetails.vue', () => { describe('contactDetails.vue', () => {
describe('Rendering', () => { describe('Rendering', () => {
test('Should render site header', () => { test('Should render site header', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const siteHeader = wrapper.findComponent({ ref: 'siteHeader' }); const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
@ -24,7 +82,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render sub title', () => { test('Should render sub title', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' }); const siteSubHeader = wrapper.findComponent({ ref: 'siteSubHeader' });
@ -34,7 +92,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render appointment information alert', () => { test('Should render appointment information alert', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const appointmentInformationAlert = wrapper.findComponent({ ref: 'appointmentInformationAlert' }); const appointmentInformationAlert = wrapper.findComponent({ ref: 'appointmentInformationAlert' });
@ -44,8 +102,6 @@ describe('contactDetails.vue', () => {
}); });
test('Should render same as policy address question subcomponent if service zip is same as customer zip', async () => { test('Should render same as policy address question subcomponent if service zip is same as customer zip', async () => {
// Arrange // Arrange
const mountOptions = getMountOptions();
const customerStreetAddress = getRandomString(10, 50); const customerStreetAddress = getRandomString(10, 50);
const customerStreetAddress2 = getRandomString(0, 50); const customerStreetAddress2 = getRandomString(0, 50);
const customerCity = getRandomString(4, 20); const customerCity = getRandomString(4, 20);
@ -55,7 +111,7 @@ describe('contactDetails.vue', () => {
const serviceCity = getRandomString(4, 20); const serviceCity = getRandomString(4, 20);
const serviceState = getRandomString(2, 2); const serviceState = getRandomString(2, 2);
const zipCode = getRandomInt(10000, 99999).toString(); const zipCode = getRandomInt(10000, 99999).toString();
const mainInitialState = { const storeData = {
order: { order: {
customer: { customer: {
address: { address: {
@ -75,12 +131,7 @@ describe('contactDetails.vue', () => {
} }
} }
}; };
mountOptions.global.plugins = [createTestingPinia({ const { wrapper } = setupMocks({ storeData });
initialState: {
main: mainInitialState
}
})];
const wrapper = shallowMount(contactDetails, mountOptions);
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
@ -92,8 +143,6 @@ describe('contactDetails.vue', () => {
}); });
test('Should not render same as policy address question subcomponent if service zip is different from customer zip', () => { test('Should not render same as policy address question subcomponent if service zip is different from customer zip', () => {
// Arrange // Arrange
const mountOptions = getMountOptions();
const firstName = getRandomString(4, 15); const firstName = getRandomString(4, 15);
const lastName = getRandomString(4, 15); const lastName = getRandomString(4, 15);
const emailAddress = getRandomString(10, 20); const emailAddress = getRandomString(10, 20);
@ -101,7 +150,7 @@ describe('contactDetails.vue', () => {
const testZipCode = getRandomInt(10000, 99999); const testZipCode = getRandomInt(10000, 99999);
const customerZipCode = testZipCode.toString(); const customerZipCode = testZipCode.toString();
const serviceZipCode = (testZipCode + 1).toString(); const serviceZipCode = (testZipCode + 1).toString();
const mainInitialState = { const storeData = {
order: { order: {
customer: { customer: {
firstName, firstName,
@ -119,12 +168,7 @@ describe('contactDetails.vue', () => {
} }
} }
}; };
mountOptions.global.plugins = [createTestingPinia({ const { wrapper } = setupMocks({ storeData });
initialState: {
main: mainInitialState
}
})];
const wrapper = shallowMount(contactDetails, mountOptions);
// Act // Act
const sameAsPolicyAddressQuestion = wrapper.findComponent({ ref: 'sameAsPolicyAddressQuestion' }); const sameAsPolicyAddressQuestion = wrapper.findComponent({ ref: 'sameAsPolicyAddressQuestion' });
@ -134,7 +178,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render address question subcomponent', () => { test('Should render address question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const addressQuestion = wrapper.findComponent({ ref: 'addressQuestion' }); const addressQuestion = wrapper.findComponent({ ref: 'addressQuestion' });
@ -144,7 +188,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render apartment question subcomponent', () => { test('Should render apartment question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const address2Question = wrapper.findComponent({ ref: 'address2Question' }); const address2Question = wrapper.findComponent({ ref: 'address2Question' });
@ -154,7 +198,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render city question subcomponent', () => { test('Should render city question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const cityQuestion = wrapper.findComponent({ ref: 'cityQuestion' }); const cityQuestion = wrapper.findComponent({ ref: 'cityQuestion' });
@ -164,7 +208,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render state question subcomponent', () => { test('Should render state question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const stateQuestion = wrapper.findComponent({ ref: 'stateQuestion' }); const stateQuestion = wrapper.findComponent({ ref: 'stateQuestion' });
@ -174,7 +218,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render zip code question subcomponent', () => { test('Should render zip code question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const zipCodeQuestion = wrapper.findComponent({ ref: 'zipCodeQuestion' }); const zipCodeQuestion = wrapper.findComponent({ ref: 'zipCodeQuestion' });
@ -184,7 +228,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render change zip code alert', () => { test('Should render change zip code alert', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const changeZipCodeAlert = wrapper.findComponent({ ref: 'changeZipCodeAlert' }); const changeZipCodeAlert = wrapper.findComponent({ ref: 'changeZipCodeAlert' });
@ -194,7 +238,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render vehicle protected question subcomponent', () => { test('Should render vehicle protected question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const vehicleProtectedQuestion = wrapper.findComponent({ ref: 'vehicleProtectedQuestion' }); const vehicleProtectedQuestion = wrapper.findComponent({ ref: 'vehicleProtectedQuestion' });
@ -204,7 +248,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render technician notes textarea question subcomponent', () => { test('Should render technician notes textarea question subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const notesQuestion = wrapper.findComponent({ ref: 'notesQuestion' }); const notesQuestion = wrapper.findComponent({ ref: 'notesQuestion' });
@ -214,7 +258,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render clearance text subcomponent', () => { test('Should render clearance text subcomponent', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const clearanceText = wrapper.findComponent({ ref: 'clearanceText' }); const clearanceText = wrapper.findComponent({ ref: 'clearanceText' });
@ -224,7 +268,7 @@ describe('contactDetails.vue', () => {
}); });
test('Should render site footer', () => { test('Should render site footer', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions()); const { wrapper } = setupMocks({});
// Act // Act
const footer = wrapper.findComponent({ ref: 'siteFooter' }); const footer = wrapper.findComponent({ ref: 'siteFooter' });
@ -234,8 +278,6 @@ describe('contactDetails.vue', () => {
}); });
test('Mocked store yields expected data', () => { test('Mocked store yields expected data', () => {
// Arrange // Arrange
const mountOptions = getMountOptions();
const address = getRandomString(10, 50); const address = getRandomString(10, 50);
const address2 = getRandomString(0, 50); const address2 = getRandomString(0, 50);
const city = getRandomString(4, 20); const city = getRandomString(4, 20);
@ -243,7 +285,7 @@ describe('contactDetails.vue', () => {
const zipCode = getRandomInt(10000, 99999).toString(); const zipCode = getRandomInt(10000, 99999).toString();
const notesForTechnician = getRandomString(1, 100); const notesForTechnician = getRandomString(1, 100);
const isVehicleProtected = getRandomBoolean(); const isVehicleProtected = getRandomBoolean();
const mainInitialState = { const storeData = {
order: { order: {
serviceLocation: { serviceLocation: {
address, address,
@ -258,13 +300,8 @@ describe('contactDetails.vue', () => {
} }
} }
}; };
mountOptions.global.plugins = [createTestingPinia({
initialState: {
main: mainInitialState
}
})];
const wrapper = shallowMount(contactDetails, mountOptions); const { wrapper } = setupMocks({ storeData });
// Assert // Assert
expect(wrapper.vm.address).toBe(address); expect(wrapper.vm.address).toBe(address);
@ -280,11 +317,7 @@ describe('contactDetails.vue', () => {
describe('Navigation', () => { describe('Navigation', () => {
test('Back button clicked triggers navigation', () => { test('Back button clicked triggers navigation', () => {
// Arrange // Arrange
const wrapper = shallowMount(contactDetails, getMountOptions({ const { wrapper } = setupMocks({});
router: {
navigateWithSpinner: jest.fn()
}
}));
wrapper.vm.navigateBack = baseMixin.methods.navigateBack; wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
// Act // Act
@ -295,41 +328,25 @@ describe('contactDetails.vue', () => {
expect(wrapper.vm.$router.navigateWithSpinner) expect(wrapper.vm.$router.navigateWithSpinner)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined); .toHaveBeenCalledWith(navigationScenarios.CLICKED_BACK, undefined);
}); });
test('Forward button clicked triggers appropriate navigation', () => { test('Forward button clicked triggers appropriate navigation', async () => {
// Arrange // Arrange
const mountOptions = getMountOptions({ const storeData = {
router: {
navigate: jest.fn()
},
navigationScenarios
});
const mainInitialState = {
order: { order: {
serviceLocation: { IsSafeliteProvider: true } serviceLocation: { IsSafeliteProvider: true }
} }
}; };
mountOptions.global.plugins = [createTestingPinia({ const { wrapper } = setupMocks({ storeData });
initialState: {
main: mainInitialState
}
})];
const wrapper = shallowMount(contactDetails, mountOptions);
// Act // Act
wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
// Assert // Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
expect(wrapper.vm.$router.navigate) expect(wrapper.vm.$router.navigate)
.toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined); .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
}); });
test('Forward button click updates service location info', () => { test('Forward button click updates service location info', async () => {
// Arrange // Arrange
const mountOptions = getMountOptions({
router: {
navigate: jest.fn()
}
});
const provider = { const provider = {
address: { address: {
city: getRandomString(4, 20), city: getRandomString(4, 20),
@ -342,19 +359,14 @@ describe('contactDetails.vue', () => {
phoneNumber: getRandomInt(1000000000, 9999999999).toString(), phoneNumber: getRandomInt(1000000000, 9999999999).toString(),
providerNumber: getRandomInt(100000, 999999).toString() providerNumber: getRandomInt(100000, 999999).toString()
} }
const mainInitialState = { const storeData = {
order: { order: {
serviceLocation: { serviceLocation: {
provider provider
} }
} }
}; };
mountOptions.global.plugins = [createTestingPinia({ const { wrapper } = setupMocks({ storeData });
initialState: {
main: mainInitialState
}
})];
const wrapper = shallowMount(contactDetails, mountOptions);
const address = getRandomString(10, 50); const address = getRandomString(10, 50);
const address2 = getRandomString(0, 50); const address2 = getRandomString(0, 50);
const city = getRandomString(4, 20); const city = getRandomString(4, 20);
@ -371,7 +383,7 @@ describe('contactDetails.vue', () => {
}); });
// Act // Act
wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
// Assert // Assert
expect(useMainStore().updateServiceLocation).toHaveBeenCalledWith({ expect(useMainStore().updateServiceLocation).toHaveBeenCalledWith({
@ -383,21 +395,16 @@ describe('contactDetails.vue', () => {
}); });
}); });
test('Forward button click updates notes for technician', () => { test('Forward button click updates notes for technician', async () => {
// Arrange // Arrange
const mountOptions = getMountOptions({ const { wrapper } = setupMocks({});
router: {
navigate: jest.fn()
}
});
const wrapper = shallowMount(contactDetails, mountOptions);
const notesForTechnician = getRandomString(1, 100); const notesForTechnician = getRandomString(1, 100);
wrapper.setData({ wrapper.setData({
notesForTechnician notesForTechnician
}); });
// Act // Act
wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
// Assert // Assert
expect(useMainStore().updateContactInfo).toHaveBeenCalledWith({ expect(useMainStore().updateContactInfo).toHaveBeenCalledWith({

View file

@ -133,6 +133,7 @@ import errorMessages from '@/constants/error-messages';
import { required } from '@/helpers/validation-rules'; import { required } from '@/helpers/validation-rules';
import widgetFields from '@/constants/cms-widget-fields'; import widgetFields from '@/constants/cms-widget-fields';
import states from '@/constants/states'; import states from '@/constants/states';
import applicationConfig from '@/constants/application-config';
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule('street-address-required', required(errorMessages.SERVICE_ADDRESS_REQUIRED)); defineRule('street-address-required', required(errorMessages.SERVICE_ADDRESS_REQUIRED));
@ -157,8 +158,9 @@ export default {
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
const cmsContent = await fetchCmsContentForPage(to.query.issPage); const cmsContent = await fetchCmsContentForPage(to.query.issPage);
next((vm) => { next(async (vm) => {
vm.setCmsContent(cmsContent); vm.setCmsContent(cmsContent);
await vm.setupAddressLookup();
}); });
}, },
data() { data() {
@ -239,7 +241,7 @@ export default {
/** /**
* @summary Steps to perform when forward button clicked. * @summary Steps to perform when forward button clicked.
*/ */
forwardButtonAction() { async forwardButtonAction() {
const contactInfo = { const contactInfo = {
notesForTechnician: this.notesForTechnician notesForTechnician: this.notesForTechnician
}; };
@ -247,6 +249,8 @@ export default {
const provider = useMainStore().serviceLocation.provider; const provider = useMainStore().serviceLocation.provider;
await this.geocodeAddress();
useMainStore().updateServiceLocation({ useMainStore().updateServiceLocation({
address: this.address, address: this.address,
address2: this.address2, address2: this.address2,
@ -267,7 +271,100 @@ export default {
this.address = ''; this.address = '';
this.address2 = ''; this.address2 = '';
this.city = ''; this.city = '';
} },
async setupAddressLookup() {
const apiKey = applicationConfig.GOOGLE_PLACES_API_KEY;
await this.$loadScript(`https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=Function.prototype`)
.catch(() => {
// Failed to fetch script
window.console.warn('Unable to load Google Places API script');
});
},
geocodeAddress() {
const autoCompletePromise = new Promise((resolve, reject) => {
try {
// Get Autocomplete Service
const acService = new window.google.maps.places.AutocompleteService();
// Get Places Service, needs pseudo element (or a map)
const placeService = new window.google.maps.places.PlacesService(document.createElement('div'));
// Create Autocomplete Session token, multiple requests one pricing hit
const acSessionToken = new window.google.maps.places.AutocompleteSessionToken();
const addressValue = `${this.address}, ${this.city}, ${this.state} ${this.zipCode}`;
acService.getPlacePredictions(
{
input: addressValue,
type: ['geocode'],
componentRestrictions: { country: ['us'] },
sessionToken: acSessionToken
},
(predictions) => {
if (predictions && predictions.length > 0) {
const firstPrediction = predictions[0];
if (firstPrediction.place_id) {
placeService.getDetails(
{
placeId: firstPrediction.place_id,
fields: ['address_components'],
sessionToken: acSessionToken
},
(details) => {
this.fillInAddress(details);
resolve();
}
);
} else {
resolve();
}
} else {
resolve();
}
}
);
} catch (error) {
window.console.warn('Error initializing Google Places API services', error);
resolve();
}
});
return autoCompletePromise;
},
async fillInAddress(googlePlace) {
let processedStreetAddress = false;
let processedRoute = false;
for (const component of googlePlace.address_components) {
const componentType = component.types[0];
switch (componentType) {
case 'street_number': {
if (processedRoute) {
this.address = `${component.long_name} ${this.address}`;
} else {
this.address = component.long_name;
}
processedStreetAddress = true;
break;
}
case 'route': {
if (processedStreetAddress) {
this.address += ` ${component.short_name}`;
} else {
this.address = component.short_name;
}
processedRoute = true;
break;
}
case 'locality': {
this.city = component.long_name;
break;
}
default:
}
}
},
} }
}; };
</script> </script>

View file

@ -389,7 +389,6 @@ export default {
} }
this.smsPhoneNumber = this.getSMSPhoneFromStore(); this.smsPhoneNumber = this.getSMSPhoneFromStore();
if (this.isPayInAdvanceDisabled) { if (this.isPayInAdvanceDisabled) {
console.log('Pay in Advance is disabled, defaulting to Pay at Time of Service');
this.paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE; this.paymentMethod = paymentMethods.PAY_AT_TIME_OF_SERVICE;
} }
}, },
@ -442,8 +441,11 @@ export default {
handleEditClicked(section) { handleEditClicked(section) {
switch (section) { switch (section) {
case 'location': case 'location':
const scenario = this.mainStore.isMobileAppointment
? this.navigationScenarios.EDIT_SERVICE_LOCATION_MOBILE
: this.navigationScenarios.EDIT_SERVICE_LOCATION_INSHOP;
this.$router.navigateWithSpinner( this.$router.navigateWithSpinner(
this.navigationScenarios.EDIT_SERVICE_LOCATION, scenario,
this.$route this.$route
); );
break; break;

View file

@ -470,7 +470,7 @@ export default {
const paymentType = useMainStore().order.payment.paymentMethod; const paymentType = useMainStore().order.payment.paymentMethod;
const alertToDisplay = to.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT]; const alertToDisplay = to.query[queryStrings.DISPLAY_PAY_IN_ADVANCE_ALERT];
if (paymentType === paymentMethods.PAYPAL || alertToDisplay) { if (paymentType === paymentMethods.PAYPAL || alertToDisplay) {
useMainStore().savePaymentMethodChoice(paymentMethods.CREDIT_CARD); useMainStore().savePaymentMethodChoice(paymentMethods.PayNow);
} }
// Call APIs // Call APIs
@ -535,7 +535,9 @@ export default {
displayAmount: this.getDisplayAmountDue(), displayAmount: this.getDisplayAmountDue(),
payInAdvanceLineItems: '', payInAdvanceLineItems: '',
shouldBlockInteraction: false, shouldBlockInteraction: false,
afterpayModalOpen: false afterpayModalOpen: false,
iframeLoaded: false,
iframeResizerLoaded: false
}; };
}, },
computed: { computed: {
@ -776,6 +778,7 @@ export default {
} else { } else {
iframe.contentWindow.postMessage('CreditCardChosen', '*'); iframe.contentWindow.postMessage('CreditCardChosen', '*');
} }
this.iframeLoaded = true;
} }
}; };
} }
@ -788,6 +791,7 @@ export default {
} }
if (event.data.includes('afterpayClosed')) { if (event.data.includes('afterpayClosed')) {
this.allowIFrameResize(iframe);
if (this.isAfterPay) { if (this.isAfterPay) {
this.backButtonAction(); this.backButtonAction();
} else { } else {
@ -810,7 +814,6 @@ export default {
useMainStore().savePaymentMethodChoice(paymentMethods.AFTERPAY); useMainStore().savePaymentMethodChoice(paymentMethods.AFTERPAY);
} }
if (event.data.includes('applepayOpened')) { if (event.data.includes('applepayOpened')) {
this.showIssLoadingModal(true);
useMainStore().savePaymentMethodChoice(paymentMethods.APPLEPAY); useMainStore().savePaymentMethodChoice(paymentMethods.APPLEPAY);
} }
if (event.data.includes('showLoaderForPaypal')) { if (event.data.includes('showLoaderForPaypal')) {
@ -855,17 +858,28 @@ export default {
}, },
submitPaymentAction() { submitPaymentAction() {
const iframe = this.$refs.paymentFrame; const iframe = this.$refs.paymentFrame;
if (iframe && iframe.contentWindow) { if (iframe && iframe.contentWindow && this.iframeLoaded) {
iframe.contentWindow.postMessage('submitPayment', '*'); iframe.contentWindow.postMessage('submitPayment', '*');
} }
}, },
switchToAfterPay() { switchToAfterPay() {
const iframe = this.$refs.paymentFrame; const iframe = this.$refs.paymentFrame;
if (iframe && iframe.contentWindow) { if (iframe && iframe.contentWindow && this.iframeLoaded) {
this.afterpayModalOpen = true; this.afterpayModalOpen = true;
this.lockIFrameSize(iframe);
iframe.contentWindow.postMessage('afterpay-switch', '*'); iframe.contentWindow.postMessage('afterpay-switch', '*');
} }
}, },
lockIFrameSize(iframe) {
if (iframe && iframe.iFrameResizer) {
iframe.iFrameResizer.removeListeners();
}
},
allowIFrameResize(iframe) {
if (iframe) {
iframeResize({ checkOrigin: false }, iframe);
}
},
showIssLoadingModal showIssLoadingModal
} }
}; };

View file

@ -9,7 +9,7 @@
:displayCloseButton="false" :displayCloseButton="false"
:displayCloseLink="true"> :displayCloseLink="true">
<div class="form-test-invalid"> <div class="form-test-invalid">
<h5 class="text-center mb-4"> <h5>
{{ ModalHeadline }} {{ ModalHeadline }}
</h5> </h5>
<div> <div>
@ -158,6 +158,10 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.modal) { :deep(.modal) {
h5 {
font-size: 1.625rem;
margin-bottom: .625rem;
}
.modal-body { .modal-body {
color: #4d4e53; color: #4d4e53;
} }

View file

@ -15,7 +15,6 @@
:onModalOpenedCallback="onModalOpened" :onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed" :onModalClosedCallback="onModalClosed"
:footerButtonText="modalFooterText" :footerButtonText="modalFooterText"
:modalPosition="'center'"
@footerButtonEvent="setZipCode"> @footerButtonEvent="setZipCode">
<serviceZipQuestion <serviceZipQuestion
ref="serviceZipCodeQuestion" ref="serviceZipCodeQuestion"

View file

@ -43,7 +43,8 @@
:headerText="modalHeaderText" :headerText="modalHeaderText"
:onModalOpenedCallback="onModalOpened" :onModalOpenedCallback="onModalOpened"
:footerButtonText="modalFooterText" :footerButtonText="modalFooterText"
:modalPosition="modalPositions.center" :closeLinkText="modalCloseText"
:displayCloseLink="true"
:allowInvalidSubmit="true" :allowInvalidSubmit="true"
@footerButtonEvent="updateSelectedProvider"> @footerButtonEvent="updateSelectedProvider">
<googleMap <googleMap
@ -88,6 +89,7 @@
class="d-inline-flex mt-0" class="d-inline-flex mt-0"
role="alert">{{ errorMessage }}</span> role="alert">{{ errorMessage }}</span>
</div> </div>
<hr />
</modal> </modal>
</div> </div>
</transition> </transition>
@ -111,7 +113,7 @@ import { toTitleCase } from '@/helpers/text-helper.js';
import { markRaw } from 'vue'; import { markRaw } from 'vue';
import { useMainStore } from '@/store'; import { useMainStore } from '@/store';
import widgetFields from '@/constants/cms-widget-fields'; import widgetFields from '@/constants/cms-widget-fields';
import { dropdownVariants, modalPositions } from '@/constants/component-variants'; import { dropdownVariants } from '@/constants/component-variants';
import errorMessages from '@/constants/error-messages'; import errorMessages from '@/constants/error-messages';
import { defineRule } from 'vee-validate'; import { defineRule } from 'vee-validate';
import { required } from '@/helpers/validation-rules'; import { required } from '@/helpers/validation-rules';
@ -155,7 +157,6 @@ export default {
shopListButton: markRaw(shopListButton), shopListButton: markRaw(shopListButton),
searchRadiusInMiles: '25', searchRadiusInMiles: '25',
nearbyShops: [], nearbyShops: [],
modalPositions,
dropdownVariants, dropdownVariants,
renderServiceZip: true, renderServiceZip: true,
errorMessage: '', errorMessage: '',
@ -182,6 +183,9 @@ export default {
modalFooterText() { modalFooterText() {
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT); return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.FOOTER_TEXT);
}, },
modalCloseText() {
return this.getCmsContent(this.modalWidgetName, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT);
},
modalName() { modalName() {
return this.modalWidgetName; return this.modalWidgetName;
}, },
@ -411,5 +415,33 @@ export default {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
} }
:deep(.modal-dialog) {
.modal-content {
hr {
margin: 1.375rem 0;
}
.modal-footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-start;
button {
background-color: $green;
color: $white;
font-weight: 600;
width: 10.75rem;
&:hover {
background-color: darken($green, 10%);
}
}
a {
margin: .5rem 0 0;
}
}
}
}
} }
</style> </style>

View file

@ -2,10 +2,6 @@
exports[`tpa-submit returns the initial data 1`] = ` exports[`tpa-submit returns the initial data 1`] = `
Object { Object {
"modalPositions": Object {
"center": "center",
"edge": "edge",
},
"sections": Array [], "sections": Array [],
"widget": Object { "widget": Object {
"alertIncomplete": "AlertIncompleteWidget", "alertIncomplete": "AlertIncompleteWidget",

View file

@ -35,19 +35,18 @@
<modal <modal
ref="recalModal" ref="recalModal"
class="recal-modal" class="recal-modal"
:modalPosition="modalPositions.center"
:headerText="recalModalContent.headerText" :headerText="recalModalContent.headerText"
:footerButtonText="recalModalContent.footerButtonText" :footerButtonText="recalModalContent.footerButtonText"
@footerButtonEvent="closeRecalModal"> @footerButtonEvent="closeRecalModal">
<div class="recal-modal-subheader"> <div class="recal-modal-subheader">
{{ recalModalContent.subHeaderText }} {{ recalModalContent.subHeaderText }}
</div> </div>
<img <img
class="recal-modal-image" class="recal-modal-image"
:src="recalModalContent.image" /> :src="recalModalContent.image" />
<div <div
class="recal-modal-body" class="recal-modal-body"
v-html="recalModalContent.bodyText"></div> v-html="recalModalContent.bodyText"></div>
</modal> </modal>
<hr /> <hr />
<div id="serviceSummarySection"> <div id="serviceSummarySection">
@ -122,7 +121,6 @@ import {
import { submitWorkOrder } from '@/helpers/order-helper.js'; import { submitWorkOrder } from '@/helpers/order-helper.js';
import bailoutMessage from '@/constants/bailoutMessage'; import bailoutMessage from '@/constants/bailoutMessage';
import submitType from '@/constants/submit-type'; import submitType from '@/constants/submit-type';
import { modalPositions } from '@/constants/component-variants';
const VERIFYING_COVERAGE = 'Verifying coverage'; const VERIFYING_COVERAGE = 'Verifying coverage';
@ -159,8 +157,7 @@ export default {
alertRecalWarning: 'AlertRecalWarningWidget', alertRecalWarning: 'AlertRecalWarningWidget',
editShopLinkText: 'EditShopLinkTextWidget', editShopLinkText: 'EditShopLinkTextWidget',
contactDetails: 'ContactDetailsSectionWidget' contactDetails: 'ContactDetailsSectionWidget'
}, }
modalPositions
}; };
}, },
computed: { computed: {
@ -345,7 +342,7 @@ export default {
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.iss-heritage-container-width { .iss-heritage-container-width {
.tpa-submit-container { .tpa-submit-container {
position: relative; position: relative;
@ -392,7 +389,7 @@ export default {
margin-bottom: .625rem; margin-bottom: .625rem;
} }
.modal.recal-modal .modal-dialog { :deep(.modal.recal-modal .modal-dialog) {
.modal-header { .modal-header {
justify-content: start; justify-content: start;
margin: 0rem; margin: 0rem;
@ -403,6 +400,7 @@ export default {
line-height: 1.25rem; line-height: 1.25rem;
text-align: start; text-align: start;
justify-content: start; justify-content: start;
padding-left: 0rem;
} }
.btn-close { .btn-close {
display: none; display: none;
@ -419,7 +417,29 @@ export default {
color: $black; color: $black;
} }
.recal-modal-image { .recal-modal-image {
margin: 1.25rem 0rem width: 100%;
height: auto;
margin: 1.25rem 0rem;
@include media-breakpoint-up(sm) {
width: 16.5rem;
}
@include media-breakpoint-up(md) {
width: 23.5rem;
}
}
.modal-footer {
padding-top: 0;
button {
background-color: $green;
color: $white;
font-weight: 600;
&:hover {
background-color: darken($green, 10%);
}
}
} }
} }
} }

View file

@ -426,6 +426,8 @@ export default {
async loadReferralFromCookie() { async loadReferralFromCookie() {
const issCookie = getISSCookie(); const issCookie = getISSCookie();
if (issCookie) { if (issCookie) {
this.$refs.continueModal.closeModal();
showIssLoadingModal(true);
const cookieReferral = { const cookieReferral = {
referralNumber: issCookie.ReferralNumber, referralNumber: issCookie.ReferralNumber,
responseDate: issCookie.ReferralDate, responseDate: issCookie.ReferralDate,
@ -447,7 +449,7 @@ export default {
console.error(`Error on loading session from cookie ${error}`); console.error(`Error on loading session from cookie ${error}`);
this.startNewReferral(); this.startNewReferral();
} finally { } finally {
this.$refs.continueModal.closeModal(); showIssLoadingModal(false);
} }
} }
}, },

View file

@ -105,7 +105,8 @@ const navigationScenarios = Object.freeze({
PAY_IN_ADVANCE_ERROR: 'PAY_IN_ADVANCE_ERROR', PAY_IN_ADVANCE_ERROR: 'PAY_IN_ADVANCE_ERROR',
PAY_IN_ADVANCE_CREDIT_CARD_ERROR: 'PAY_IN_ADVANCE_CREDIT_CARD_ERROR', PAY_IN_ADVANCE_CREDIT_CARD_ERROR: 'PAY_IN_ADVANCE_CREDIT_CARD_ERROR',
PAY_IN_ADVANCE_SUCCESS: 'PAY_IN_ADVANCE_SUCCESS', PAY_IN_ADVANCE_SUCCESS: 'PAY_IN_ADVANCE_SUCCESS',
EDIT_SERVICE_LOCATION: 'EDIT_SERVICE_LOCATION', EDIT_SERVICE_LOCATION_INSHOP: 'EDIT_SERVICE_LOCATION_INSHOP',
EDIT_SERVICE_LOCATION_MOBILE: 'EDIT_SERVICE_LOCATION_MOBILE',
EDIT_SCHEDULE: 'EDIT_SCHEDULE', EDIT_SCHEDULE: 'EDIT_SCHEDULE',
EDIT_WIPERS: 'EDIT_WIPERS', EDIT_WIPERS: 'EDIT_WIPERS',

View file

@ -642,9 +642,13 @@ const routingTable = () => [
destinationIssPageValue: issPageValues.PAYMENT_PAGE destinationIssPageValue: issPageValues.PAYMENT_PAGE
}, },
{ {
scenario: navigationScenarios.EDIT_SERVICE_LOCATION, scenario: navigationScenarios.EDIT_SERVICE_LOCATION_INSHOP,
destinationIssPageValue: issPageValues.SCHEDULE_PAGE destinationIssPageValue: issPageValues.SCHEDULE_PAGE
}, },
{
scenario: navigationScenarios.EDIT_SERVICE_LOCATION_MOBILE,
destinationIssPageValue: issPageValues.CONTACT_DETAILS
},
{ {
scenario: navigationScenarios.EDIT_SCHEDULE, scenario: navigationScenarios.EDIT_SCHEDULE,
destinationIssPageValue: issPageValues.SCHEDULE_PAGE destinationIssPageValue: issPageValues.SCHEDULE_PAGE