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

Merge branch 'feature/CSR-96' into feature/CSR-104

Browse source
This commit is contained in:
Leah Schumann 2022-04-08 13:13:55 -04:00
commit 8aab376946
8 changed files with 41 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/layouts/license-plate-lookup/license-plate-lookup.vue
View file

@ -26,24 +26,21 @@
</div>
<alert
class="my-3"
cmsWidgetName="NoServiceZipWidget"
v-if="newServiceZipRequired"
alertClass="alert-danger"
:alertHeadline="noServiceZipWidget.headline"
:alertCopy="noServiceZipWidget.copy"
/>
<alert
class="my-3"
cmsWidgetName="NoMatchAlertWidget"
v-if="vinNotValid"
alertClass="alert-danger"
:alertHeadline="noMatchAlertWidget.headline"
:alertCopy="noMatchAlertWidget.copy"
/>
<alert
class="my-3"
cmsWidgetName="MatchedDifferentVehicleAlertWidget"
v-if="vinDoesNotMatchCarId"
alertClass="alert-warning"
:alertHeadline="matchedDifferentVehicleAlertWidget.headline"
:alertCopy="matchedDifferentVehicleAlertWidget.copy"
/>
<div class="row my-2">
<div class="col">
@ -107,18 +104,6 @@ export default {
// Call the "next" function to complete the transition to this page.
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
vm.noServiceZipWidget = {
headline: resultMap.cmsContent.NoServiceZipWidget.HeadlineText,
copy: resultMap.cmsContent.NoServiceZipWidget.BodyText,
};
vm.noMatchAlertWidget = {
headline: resultMap.cmsContent.NoMatchAlertWidget.HeadlineText,
copy: resultMap.cmsContent.NoMatchAlertWidget.BodyText
};
vm.matchedDifferentVehicleAlertWidget = {
headline: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.HeadlineText,
copy: resultMap.cmsContent.MatchedDifferentVehicleAlertWidget.BodyText
};
});
},
props: {

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

@ -24,10 +24,9 @@
/>
<alert
class="my-3"
cmsWidgetName="HasReplacementConflict"
v-show="hasRepairReplaceConflict"
alertClass="alert-danger"
alertHeadline="You'll need to schedule separate appointments"
:alertCopy="['Vehicle service requiring both glass repair and replacement must be scheduled separately, as they\'re performed by different technicians.', 'Continue scheduling your first service now, and then come back to schedule the second service.']"
:isDismissible="false"
/>
<sideDoorOptions
@ -277,7 +276,8 @@ export default {
navigateForward(partsData){
// CSR-98 TEMP
if (store.getters.vehicle.year == 2010) {
const vehicleYearsToShowHeritageFunnel = [ "2001", "2002", "2010" ];
if (vehicleYearsToShowHeritageFunnel.includes(store.getters.vehicle.year)) {
navigateToHeritageFunnel();
return;
}

10
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -9,10 +9,9 @@
/>
<alert
class="my-3"
cmsWidgetName="NoReplacementAvailableError"
v-show="showNoReplacementAvailableError"
alertClass="alert-danger"
alertHeadline="Service not available"
:alertCopy="['We\'re sorry, but we currently offer only repair service for your vehicle type.', 'Need help with next steps? Call us at 800-394-0288.']"
:isDismissible="false"
/>
<windshieldChipCountQuestion cmsWidgetName="WindshieldChipCountQuestion"
@ -31,10 +30,9 @@
/>
<alert
class="my-3"
cmsWidgetName="SplitSingleConflict"
v-show="hasSplitSingleConflict"
alertClass="alert-danger"
alertHeadline="Single-piece or split?"
alertCopy="Please select just one windshield option: single-piece or split."
:isDismissible="false"
/>
</div>
@ -99,9 +97,9 @@ export default ({
},
methods: {
initializeComponent(
windshieldAvailableReplacementOptions){
initializeComponent(windshieldAvailableReplacementOptions){
this.windshieldAvailableReplacementOptions = windshieldAvailableReplacementOptions;
this.$refs.replaceOptionsQuestion.initializeComponent(windshieldAvailableReplacementOptions);
},
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
// ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)

10
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -9,8 +9,7 @@
<alert
class="rounded border-0 shadow-sm"
alertClass="alert-warning"
:alertHeadline="alertWidgetData.headline"
:alertCopy="alertWidgetData.copy"
cmsWidgetName="AlertWidget"
:isDismissible="false"
/>
</div>
@ -74,13 +73,6 @@ export default {
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
// Set alertData for the page alert. These use props so we don't call
// initializeComponent here.
vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText,
};
});
},
data() {

24
src/ux-components/alert/alert.spec.js
View file

@ -3,28 +3,40 @@ import alert from "./alert";
describe("alert.vue", () => {
it("Should set isMultiParagraph to true if alertCopy is an array of strings", async () => {
it("Should add class 'alert-dismissible' if isDismissible is true", async () => {
// Arrange
const wrapper = shallowMount(alert, {
propsData: {
alertCopy: ["one", "two"]
isDismissible: true
},
mixins: [mockMixin]
});
const wrapperDiv = wrapper.find('div');
// Assert
expect(wrapper.vm.isMultiParagraph).toBe(true);
expect(wrapperDiv.classes()).toContain('alert-dismissible')
});
it("Should set isMultiParagraph to false if alertCopy is a single string", async () => {
it("Should add specified alert class", async () => {
// Arrange
const wrapper = shallowMount(alert, {
propsData: {
alertCopy: "three"
alertClass: 'warning'
},
mixins: [mockMixin]
});
const wrapperDiv = wrapper.find('div');
// Assert
expect(wrapper.vm.isMultiParagraph).toBe(false);
expect(wrapperDiv.classes()).toContain('warning')
});
});
const mockMixin = {
methods: {
getCmsContent: jest.fn()
}
}

22
src/ux-components/alert/alert.vue
View file

@ -5,12 +5,7 @@
:class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
>
<p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
<span v-if="isMultiParagraph">
<p class="m-1 text-body small" v-for="(para, index) in alertCopy" :key="index">
{{ para }}
</p>
</span>
<p class="m-0 text-body small" v-else>{{ alertCopy }}</p>
<p class="m-0 text-body small">{{ alertCopy }}</p>
<button
type="button"
class="btn-close p-2"
@ -34,8 +29,6 @@
export default {
name: "alert",
props: {
alertHeadline: String,
alertCopy: [Array, String],
isDismissible: Boolean,
/*
alertClass class names:
@ -45,14 +38,15 @@ export default {
alert-info (blue)
*/
alertClass: String,
cmsWidgetName: String,
},
computed: {
isMultiParagraph() {
if (typeof this.alertCopy == "string") {
return false;
}
return true;
}
alertHeadline(){
return this.getCmsContent(this.cmsWidgetName, 'HeadlineText');
},
alertCopy(){
return this.getCmsContent(this.cmsWidgetName, 'BodyText');
},
},
};
</script>

4
src/ux-components/list-card/list-card.spec.js
View file

@ -145,7 +145,7 @@ describe("list-card.vue", () => {
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4"]);
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4"]);
});
it("Should return flex row classes if isWide is true and checkboxTop if buttonLabelSubCopy is true", async () => {
@ -167,7 +167,7 @@ describe("list-card.vue", () => {
// Assert
const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-r", "ps-3", "pe-4", "checkboxTop"]);
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-row", "py-2", "ps-4", "pe-4", "checkboxTop"]);
});
it("Should return flex column classes if isWide is false", async () => {

4
src/ux-components/list-card/list-card.vue
View file

@ -107,7 +107,7 @@ export default {
computed: {
getLabelClasses() {
if (this.isWide) {
let classes = "flex-row py-r ps-3 pe-4";
let classes = "flex-row py-2 ps-4 pe-4";
if (this.buttonLabelSubCopy) {
classes += " checkboxTop";
}
@ -173,7 +173,7 @@ export default {
// svg's should be constructed on the same canvas size/viewbox to ensure they occupy the same space in the DOM. This will allow easy/proper alignment of elements. See exisitng svg's for examples.
height: auto;
width: 6.5rem;
margin-bottom: 3rem;
margin-bottom: 2.2rem;
max-width: 100%;
}