jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'develop' of https://github.com/Safelite/DigitalConsumer.FixMyGlass into develop

Browse source
This commit is contained in:
Leah Schumann 2023-09-01 07:17:30 -04:00
commit 023efe360f
13 changed files with 191 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -26,7 +26,7 @@
{{ value }} {{ value }}
</option> </option>
</select> </select>
<div v-show="errorMessage" class="row mt-2 form-test-error"> <div v-show="errorMessage && this.disableValidation" class="row mt-2 form-test-error">
<span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span> <span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
</div> </div>
</div> </div>
@ -56,6 +56,11 @@ export default {
required: false, required: false,
default: false, default: false,
}, },
disableValidationIfElementDisabled: {
type: Boolean,
required: false,
default: false,
},
}, },
setup(props) { setup(props) {
const uuid = uuidv4(); const uuid = uuidv4();
@ -110,6 +115,9 @@ export default {
this.$emit("update:modelValue", newValue); this.$emit("update:modelValue", newValue);
}, },
}, },
disableValidation() {
return this.disableValidationIfElementDisabled ? !this.isDisabled : true;
},
}, },
watch: { watch: {
selectedOption(newValue) { selectedOption(newValue) {

16
src/digital-components/text-block/text-block.vue
View file

@ -2,13 +2,12 @@
<div class="text-block w-100" :class="[justifyText, typeStyle, fontWeight, marginTopClass]"> <div class="text-block w-100" :class="[justifyText, typeStyle, fontWeight, marginTopClass]">
<span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy"> <span v-for="copy in splitCopyOnCMSPlaceHolder(this.textBlockCopy)" :key="copy">
<span v-if="doesCopyContainRouterLink(copy)"> <span v-if="doesCopyContainRouterLink(copy)">
<router-link <textLink
:to="{ linkType="text"
query: { [pageQueryString]: `${getRouterLinkRouteFromCopy(copy)}` }, :text="getRouterLinkDisplayTextFromCopy(copy)"
name: 'root', href="javascript:void(0)"
}" useLoadingModal
>{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link @click-event="navigateWithScenario(getRouterLinkRouteFromCopy(copy))" />
>
</span> </span>
<span v-else-if="doesCopyContainTextLink(copy)"> <span v-else-if="doesCopyContainTextLink(copy)">
<textLink <textLink
@ -55,6 +54,9 @@ export default {
getRouterLinkRouteFromCopy, getRouterLinkRouteFromCopy,
getRouterLinkDisplayTextFromCopy, getRouterLinkDisplayTextFromCopy,
getExternalLink, getExternalLink,
navigateWithScenario(scenarioName) {
this.$router.navigateWithoutSaving(scenarioName, this.$route);
},
}, },
computed: { computed: {
pageQueryString() { pageQueryString() {

1
src/fmg-components/funnel-footer/funnel-footer.vue
View file

@ -20,6 +20,7 @@
<textLink <textLink
linkType="navigation" linkType="navigation"
:text="backLink" :text="backLink"
useLoadingModal
@click-event="linkClick" @click-event="linkClick"
href="javascript:void(0)" href="javascript:void(0)"
data-bs-target="#footerModal" data-bs-target="#footerModal"

129
src/fmg-components/loading-modal/loading-modal.vue
View file

@ -1,47 +1,50 @@
<template> <template>
<div v-if="isModalVisible" class="container-fluid modal-loader"> <div v-if="isModalVisible">
<div class="row g-2 h-100 d-flex align-items-center"> <div class="dimmer-overlay"></div>
<div class="container-fluid overflow-hidden"> <div class="container-fluid modal-loader" :class="layoutClass">
<div class="row h-100"> <div class="row g-2 h-100 d-flex align-items-center">
<div class="col text-center tagbg mb-4"> <div class="container-fluid overflow-hidden">
<div class="spinner-border text-danger" role="status"> <div class="row h-100">
<span class="visually-hidden">Loading...</span> <div class="col text-center tagbg mb-4">
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div> </div>
</div> </div>
</div> <div class="row">
<div class="row"> <div class="col">
<div class="col"> <div class="text-container slide">
<div class="text-container slide"> <p>
<p> Tidying up the shop
Tidying up the shop <span class="dot-1">.</span>
<span class="dot-1">.</span> <span class="dot-2">.</span>
<span class="dot-2">.</span> <span class="dot-3">.</span>
<span class="dot-3">.</span> </p>
</p> <p>
<p> Getting all the glass shined up
Getting all the glass shined up <span class="dot-1">.</span>
<span class="dot-1">.</span> <span class="dot-2">.</span>
<span class="dot-2">.</span> <span class="dot-3">.</span>
<span class="dot-3">.</span> </p>
</p> <p>
<p> Planning your new view of the road
Planning your new view of the road <span class="dot-1">.</span>
<span class="dot-1">.</span> <span class="dot-2">.</span>
<span class="dot-2">.</span> <span class="dot-3">.</span>
<span class="dot-3">.</span> </p>
</p> <p>
<p> Nearly there
Nearly there <span class="dot-1">.</span>
<span class="dot-1">.</span> <span class="dot-2">.</span>
<span class="dot-2">.</span> <span class="dot-3">.</span>
<span class="dot-3">.</span> </p>
</p> <p>
<p> Finishing up
Finishing up <span class="dot-1">.</span>
<span class="dot-1">.</span> <span class="dot-2">.</span>
<span class="dot-2">.</span> <span class="dot-3">.</span>
<span class="dot-3">.</span> </p>
</p> </div>
</div> </div>
</div> </div>
</div> </div>
@ -58,6 +61,17 @@ export default {
isModalVisible: false, isModalVisible: false,
}; };
}, },
props: {
notFullScreen: {
type: Boolean,
default: false,
},
},
computed: {
layoutClass() {
return this.notFullScreen ? "card-layout" : "full-screen";
},
},
methods: { methods: {
showModal() { showModal() {
//Display modal //Display modal
@ -80,20 +94,43 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.modal-loader { .dimmer-overlay {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0;
bottom: 0;
z-index: 1057;
width: 100%;
height: 100%; height: 100%;
width: 100%;
background-color: $black;
opacity: 0.4;
z-index: 1056;
}
.modal-loader {
position: fixed;
z-index: 1057;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
outline: 0; outline: 0;
background: $gray-100; background: $gray-100;
&.full-screen {
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
&.card-layout {
height: 186px;
width: calc(100% - 3rem);
border-radius: 0.5rem;
position: absolute;
top: calc(50% - 93px);
left: 1.5rem;
}
.tagbg { .tagbg {
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-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-repeat: no-repeat;

1
src/layouts/review/review-block/review-block.vue
View file

@ -10,6 +10,7 @@
linkType="textSmall" linkType="textSmall"
text="Edit" text="Edit"
class="ml-auto" class="ml-auto"
useLoadingModal
@click-event="linkClicked" @click-event="linkClicked"
href="javascript:void(0)" /> href="javascript:void(0)" />
</div> </div>

15
src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
View file

@ -21,7 +21,7 @@
<div <div
v-if="!isLoaderDisplayed" v-if="!isLoaderDisplayed"
class="availability-badge" class="availability-badge"
:class="availabilityRating == 'high' ? 'green' : 'red'"></div> :class="availabilityRating == 'high' ? 'green' : 'orange'"></div>
<span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{ <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
badgeText badgeText
}}</span> }}</span>
@ -88,7 +88,7 @@ export default {
if (this.availabilityRating == null) { if (this.availabilityRating == null) {
return "gray"; return "gray";
} else { } else {
return this.availabilityRating == "high" ? "green" : "Orange"; return this.availabilityRating == "high" ? "green" : "orange";
} }
}, },
badgeText() { badgeText() {
@ -187,11 +187,10 @@ export default {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Cpath d='M5.697 7.95252C5.5927 7.95252 5.49289 7.91102 5.41999 7.837L3.90597 6.32299C3.75233 6.16934 3.75233 5.92149 3.90597 5.76785C4.05962 5.6142 4.30747 5.6142 4.46111 5.76785L5.69812 7.00373L8.53999 4.16186C8.69364 4.00822 8.94149 4.00822 9.09513 4.16186C9.24878 4.31551 9.24878 4.56336 9.09513 4.717L5.97626 7.83588C5.90224 7.9099 5.80242 7.9514 5.69925 7.9514L5.697 7.95252Z' fill='%23006A36'/%3E%3C/svg%3E%0A");
} }
&.red { &.orange {
background-image: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 12C3.19159 12 0.5 9.30841 0.5 6C0.5 2.69159 3.19159 0 6.5 0C9.80841 0 12.5 2.69159 12.5 6C12.5 9.30841 9.80841 12 6.5 12ZM6.5 0.785047C3.62449 0.785047 1.28505 3.12449 1.28505 6C1.28505 8.87551 3.62449 11.215 6.5 11.215C9.37551 11.215 11.715 8.87551 11.715 6C11.715 3.12449 9.37551 0.785047 6.5 0.785047Z' fill='%23006A36'/%3E%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23AC160B'/%3E%3C/svg%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 0C9.81368 0 12.5 2.68632 12.5 6C12.5 9.31368 9.81368 12 6.5 12C3.18632 12 0.5 9.31368 0.5 6C0.5 2.68632 3.18632 0 6.5 0ZM6.5 0.84C3.6548 0.84 1.34 3.1548 1.34 6C1.34 8.8452 3.6548 11.16 6.5 11.16C9.3452 11.16 11.66 8.8452 11.66 6C11.66 3.1548 9.3452 0.84 6.5 0.84ZM7.90018 4.00596C8.06422 3.84204 8.33002 3.84192 8.49406 4.00596C8.6581 4.17 8.6581 4.43592 8.49406 4.59996L7.0939 6L8.49406 7.40004C8.6581 7.56408 8.6581 7.83 8.49406 7.99404C8.4121 8.076 8.30458 8.11704 8.19706 8.11704C8.08966 8.11704 7.98214 8.076 7.90018 7.99404L6.50002 6.594L5.09986 7.99404C5.01778 8.076 4.91038 8.11704 4.80286 8.11704C4.69546 8.11704 4.58794 8.076 4.50598 7.99404C4.34182 7.83 4.34182 7.56408 4.50598 7.40004L5.90614 6L4.50598 4.59996C4.34182 4.43592 4.34182 4.17 4.50598 4.00596C4.66978 3.84192 4.93582 3.84204 5.09986 4.00596L6.50002 5.406L7.90018 4.00596Z' fill='%23E86421'/%3E%3C/svg%3E%0A");
} }
} }
.button-auxillary-copy { .button-auxillary-copy {
box-sizing: border-box; box-sizing: border-box;
justify-content: right; justify-content: right;
@ -218,9 +217,9 @@ export default {
background-color: $green-100; background-color: $green-100;
} }
&.red { &.orange {
color: $red-600; color: $orange-600;
background-color: $red-100; background-color: $orange-100;
} }
&.gray { &.gray {

6
src/layouts/vehicle/vehicle-question/vehicle-question.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" /> <dropdownQuestion
disableAutoFill
v-model="selectedValue"
:valueAsKey="true"
:disableValidationIfElementDisabled="true" />
</template> </template>
<script> <script>

49
src/layouts/vehicle/vehicle.vue
View file

@ -112,17 +112,17 @@ export default {
selectedMake: this.selectedMakefromStore(), selectedMake: this.selectedMakefromStore(),
selectedModel: this.selectedModelfromStore(), selectedModel: this.selectedModelfromStore(),
selectedStyle: this.selectedStylefromStore(), selectedStyle: this.selectedStylefromStore(),
carId: null, carId: this.getCarIdFromStore(),
category: null, category: null,
imageUrl: null, imageUrl: this.getImagefromStore(),
imageVifNumber: null, imageVifNumber: null,
imageVifColor: null, imageVifColor: null,
yearOptions: [], yearOptions: [],
makeOptions: [], makeOptions: [],
modelOptions: [], modelOptions: [],
styleOptions: [], styleOptions: [],
displayGeneric: this.displayGenericFromStore(), //flag to check getVehicle action in progress
unmatchedVehicleIcon: false, vehicleInProgress: false,
}; };
}, },
@ -242,6 +242,9 @@ export default {
} }
} else { } else {
this.makeOptions = []; this.makeOptions = [];
this.selectedMake = null;
this.selectedModel = null;
this.selectedStyle = null;
} }
}, },
async selectedMake(make) { async selectedMake(make) {
@ -255,6 +258,8 @@ export default {
} }
} else { } else {
this.modelOptions = []; this.modelOptions = [];
this.selectedModel = null;
this.selectedStyle = null;
} }
}, },
async selectedModel(model) { async selectedModel(model) {
@ -271,32 +276,41 @@ export default {
} }
} else { } else {
this.styleOptions = []; this.styleOptions = [];
this.selectedStyle = null;
} }
}, },
async selectedStyle(style) { async selectedStyle(style) {
if (style) { if (style) {
this.vehicleInProgress = true;
const result = await this.getVehicle( const result = await this.getVehicle(
this.selectedYear, this.selectedYear,
this.selectedMake, this.selectedMake,
this.selectedModel, this.selectedModel,
style style
); );
this.vehicleInProgress = false;
this.carId = result?.data.carId; this.carId = result?.data.carId;
this.category = result?.data.category; this.category = result?.data.category;
this.imageUrl = result?.data.imageUrl; this.imageUrl = result?.data.imageUrl;
this.imageVifNumber = result?.data.imageVifNumber; this.imageVifNumber = result?.data.imageVifNumber;
this.imageVifColor = result?.data.imageVifColor; this.imageVifColor = result?.data.imageVifColor;
if (this.imageUrl == null) {
this.displayGeneric = false;
this.unmatchedVehicleIcon = true;
} else this.unmatchedVehicleIcon = false;
} else { } else {
this.imageUrl = null; this.imageUrl = null;
this.displayGeneric = true;
} }
}, },
}, },
computed: {
unmatchedVehicleIcon() {
if (this.imageUrl == null) return true;
else return false;
},
displayGeneric() {
if (!this.selectedStyle) return true;
else if (this.vehicleInProgress) return true;
else if (this.imageUrl == null && this.carId !== null) return false;
else return true;
},
},
methods: { methods: {
getVehicle(year, make, model, style) { getVehicle(year, make, model, style) {
return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, { return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
@ -306,15 +320,6 @@ export default {
style: style, style: style,
}); });
}, },
displayGenericFromStore() {
if (store.getters.vehicle.imageUrl !== null) return false;
else if (
store.getters.vehicle.imageUrl === null &&
store.getters.vehicle.carId !== null
)
return false;
else return true;
},
arePagePrerequisitesValid() { arePagePrerequisitesValid() {
return true; return true;
}, },
@ -377,6 +382,12 @@ export default {
model: model, model: model,
}); });
}, },
getImagefromStore() {
return store.getters.vehicle.imageUrl;
},
getCarIdFromStore() {
return store.getters.vehicle.carId;
},
}, },
components: { components: {

4
src/router/router-constants/navigation-scenarios.js
View file

@ -26,6 +26,7 @@ const navigationScenarios = {
SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE", SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS", SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS", CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS",
CLICKED_VIN_RETRY: "CLICKED_VIN_RETRY",
// Part selection // Part selection
CLICKED_FORWARD_WITH_PART_QUESTIONS: "CLICKED_FORWARD_WITH_PART_QUESTIONS", CLICKED_FORWARD_WITH_PART_QUESTIONS: "CLICKED_FORWARD_WITH_PART_QUESTIONS",
@ -40,6 +41,9 @@ const navigationScenarios = {
CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS", CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS: "CLICKED_BACK_WITH_VIN_AND_NO_MORE_QUESTIONS",
CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS", CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS: "CLICKED_BACK_WITH_NO_VIN_NOR_QUESTIONS",
// Schedule
CLICKED_CHANGE_LOCATION: "CLICKED_CHANGE_LOCATION",
// Review // Review
CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT", CLICKED_VEHICLE_EDIT: "CLICKED_VEHICLE_EDIT",
CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT", CLICKED_DAMAGE_EDIT: "CLICKED_DAMAGE_EDIT",

20
src/router/router-constants/routing-table.js
View file

@ -76,6 +76,10 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS, scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE, destinationFmgPageValue: fmgPageValues.QUOTE,
}, },
{
scenario: navigationScenarios.CLICKED_VIN_RETRY,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
], ],
}, },
{ {
@ -109,6 +113,10 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS, scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE, destinationFmgPageValue: fmgPageValues.QUOTE,
}, },
{
scenario: navigationScenarios.CLICKED_VIN_RETRY,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
], ],
}, },
{ {
@ -146,6 +154,10 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS, scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE, destinationFmgPageValue: fmgPageValues.QUOTE,
}, },
{
scenario: navigationScenarios.CLICKED_VIN_RETRY,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
], ],
}, },
{ {
@ -179,6 +191,10 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS, scenario: navigationScenarios.CLICKED_FORWARD_WITH_NO_MORE_QUESTIONS,
destinationFmgPageValue: fmgPageValues.QUOTE, destinationFmgPageValue: fmgPageValues.QUOTE,
}, },
{
scenario: navigationScenarios.CLICKED_VIN_RETRY,
destinationFmgPageValue: fmgPageValues.ESTIMATE,
},
], ],
}, },
{ {
@ -399,6 +415,10 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_FORWARD, scenario: navigationScenarios.CLICKED_FORWARD,
destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS, destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
}, },
{
scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
destinationFmgPageValue: fmgPageValues.SERVICE_LOCATION,
},
], ],
}, },
{ {

11
src/store/index.js
View file

@ -336,8 +336,6 @@ export const mutations = {
}, },
resetRegistrationState(state) { resetRegistrationState(state) {
state.order.vehicle.registration.licensePlate = null; state.order.vehicle.registration.licensePlate = null;
state.order.customer.firstName = null;
state.order.customer.lastName = null;
}, },
resetGlassPartsState(state) { resetGlassPartsState(state) {
state.order.lineItems.glassParts = null; state.order.lineItems.glassParts = null;
@ -481,7 +479,7 @@ export const mutations = {
state.order.customer.emailAddress = sessionInformation.order.customer.emailAddress; state.order.customer.emailAddress = sessionInformation.order.customer.emailAddress;
state.order.customer.firstName = sessionInformation.order.customer.firstName; state.order.customer.firstName = sessionInformation.order.customer.firstName;
state.order.customer.lastName = sessionInformation.order.customer.lastName; state.order.customer.lastName = sessionInformation.order.customer.lastName;
state.order.customer.phoneNumber = sessionInformation.order.customer.servicePhoneNumber; state.order.customer.phoneNumber = sessionInformation.order.customer.phoneNumber;
state.order.customer.isSmsOptIn = sessionInformation.order.customer.isSmsOptIn; state.order.customer.isSmsOptIn = sessionInformation.order.customer.isSmsOptIn;
state.order.existingPromoCode = sessionInformation.order.existingPromoCode; state.order.existingPromoCode = sessionInformation.order.existingPromoCode;
@ -1436,7 +1434,7 @@ export const actions = {
firstName: order.customer.firstName, firstName: order.customer.firstName,
lastName: order.customer.lastName, lastName: order.customer.lastName,
isSmsOptIn: order.customer.isSmsOptIn, isSmsOptIn: order.customer.isSmsOptIn,
servicePhoneNumber: order.customer.phoneNumber, phoneNumber: order.customer.phoneNumber,
}, },
damage: { damage: {
numberOfChips: damage.numberOfChips, numberOfChips: damage.numberOfChips,
@ -1675,10 +1673,7 @@ export const actions = {
{ isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo } { isSelectedGlassAvailableForVehicle, vehicleInfo, registrationInfo }
) { ) {
//Reset dependent state when changing //Reset dependent state when changing
if ( if (vehicleInfo.vin !== context.state.order.vehicle.vin) {
registrationInfo?.firstName !== context.state.order.customer?.firstName ||
registrationInfo?.lastName !== context.state.order.customer?.lastName
) {
context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES); context.dispatch(storeActions.RESET_REGISTRATION_STATE_AND_DEPENDENCIES);
if (!isSelectedGlassAvailableForVehicle) { if (!isSelectedGlassAvailableForVehicle) {

4
src/styles/ux-variables.scss
View file

@ -60,6 +60,10 @@ $gray-700: #303333; // Used in theme
$gray-800: #222424; // Used in theme $gray-800: #222424; // Used in theme
$gray-900: #181a1a; // Used in theme $gray-900: #181a1a; // Used in theme
//orange
$orange-600: #e86421;
$orange-100: #fff5eb;
// Miscellaneous Colors // Miscellaneous Colors
$indigo: #6610f2; $indigo: #6610f2;
$purple: #6f42c1; $purple: #6f42c1;

15
src/ux-components/text-link/text-link.vue
View file

@ -1,4 +1,5 @@
<template> <template>
<loadingModal v-if="useLoadingModal" notFullScreen ref="loadingModal" />
<a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href" <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href"
>{{ text }}<slot name="after-text"></slot >{{ text }}<slot name="after-text"></slot
></a> ></a>
@ -19,6 +20,8 @@
</template> </template>
<script> <script>
import loadingModal from "@/fmg-components/loading-modal/loading-modal";
export default { export default {
name: "textLink", name: "textLink",
props: { props: {
@ -27,6 +30,10 @@ export default {
href: { href: {
type: String, type: String,
}, },
useLoadingModal: {
type: Boolean,
default: false,
},
}, },
methods: { methods: {
handleClick(event) { handleClick(event) {
@ -36,9 +43,17 @@ export default {
this.text, this.text,
true true
); );
if (this.useLoadingModal) {
this.$refs.loadingModal.showModal();
}
this.$emit("click-event"); this.$emit("click-event");
}, },
}, },
components: {
loadingModal,
},
}; };
</script> </script>