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

Merge branch 'develop' into feature/SSR-1114

Browse source 
# Conflicts:
#	src/iss-components/cart-dropdown/cart-dropdown.spec.js
#	src/iss-components/cart-dropdown/cart-dropdown.vue
This commit is contained in:
Katie Kroell 2024-04-18 10:43:22 -04:00
commit 2a8317ac33
11 changed files with 133 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap
View file

@ -2,6 +2,7 @@
exports[`cart-dropdown component initial data rendered as expected 1`] = ` exports[`cart-dropdown component initial data rendered as expected 1`] = `
Object { Object {
"availableVaps": Array [],
"cartItemType": Object { "cartItemType": Object {
"MOBILE_FEE": "MOBILE FEE", "MOBILE_FEE": "MOBILE FEE",
"RECYCLE_FEE": "RECYCLE FEE", "RECYCLE_FEE": "RECYCLE FEE",

77
src/iss-components/cart-dropdown/cart-dropdown.spec.js
View file

@ -57,7 +57,11 @@ beforeEach(() => {
describe('cart-dropdown component', () => { describe('cart-dropdown component', () => {
test('initial data rendered as expected', () => { test('initial data rendered as expected', () => {
// Arrange // Arrange
const { wrapper } = getMountedComponent({}); const { wrapper } = getMountedComponent({
order: {
availableVaps: []
}
});
// Assert // Assert
expect(wrapper.vm.$data).toMatchSnapshot(); expect(wrapper.vm.$data).toMatchSnapshot();
@ -74,6 +78,30 @@ describe('cart-dropdown component', () => {
// Assert // Assert
expect(head.exists()).toBeTruthy(); expect(head.exists()).toBeTruthy();
}); });
test('cart dropdown head is visible', () => {
// Arrange
const reference = '#cart-dropdown-head';
const { wrapper } = getMountedComponent(cartDropdown, {}, { showDropdownHeader: true });
// Act
const head = wrapper.find(reference);
// Assert
expect(head.exists()).toBeTruthy();
expect(head.classes()).toContain('cart-toggle');
});
test('cart dropdown head is not visible', () => {
// Arrange
const reference = '#cart-dropdown-head';
const { wrapper } = getMountedComponent(cartDropdown, {}, { showDropdownHeader: false });
// Act
const head = wrapper.find(reference);
// Assert
expect(head.exists()).toBeTruthy();
expect(head.classes()).not.toContain('cart-toggle');
});
test('cart table', () => { test('cart table', () => {
// Arrange // Arrange
const reference = '#cart-table'; const reference = '#cart-table';
@ -468,7 +496,9 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true, policy: {
policyLookupSuccessful: true
},
currentDeductible: 250, currentDeductible: 250,
lineItems: { lineItems: {
glassParts: null, glassParts: null,
@ -497,7 +527,9 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true, policy: {
policyLookupSuccessful: true
},
currentDeductible: 250, currentDeductible: 250,
lineItems: { lineItems: {
glassParts: [ glassParts: [
@ -533,7 +565,9 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true, policy: {
policyLookupSuccessful: true
},
currentDeductible: 250, currentDeductible: 250,
lineItems: { lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10 }], glassParts: [{ partType: 'mock', salesTax: 10 }],
@ -568,7 +602,9 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true, policy: {
policyLookupSuccessful: true
},
currentDeductible: 250, currentDeductible: 250,
lineItems: { lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10 }], glassParts: [{ partType: 'mock', salesTax: 10 }],
@ -599,7 +635,9 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true, policy: {
policyLookupSuccessful: true
},
currentDeductible: 250, currentDeductible: 250,
lineItems: { lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 150 }], glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 150 }],
@ -641,7 +679,9 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true, policy: {
policyLookupSuccessful: true
},
currentDeductible: 250, currentDeductible: 250,
lineItems: { lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 100 }], glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 100 }],
@ -678,7 +718,6 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true,
currentDeductible: 0, currentDeductible: 0,
lineItems: { lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 100 }], glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 100 }],
@ -690,7 +729,8 @@ describe('cart-dropdown component', () => {
insuranceCoverage: { isVerified: true } insuranceCoverage: { isVerified: true }
}, },
policy: { policy: {
isITAC: true isITAC: true,
policyLookupSuccessful: true
} }
}, },
issConfig: { issConfig: {
@ -710,7 +750,6 @@ describe('cart-dropdown component', () => {
// Arrange // Arrange
const storeData = { const storeData = {
order: { order: {
policyLookupSuccessful: true,
currentDeductible: 0, currentDeductible: 0,
lineItems: { lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 100 }], glassParts: [{ partType: 'mock', salesTax: 10, sellingPrice: 100 }],
@ -722,7 +761,8 @@ describe('cart-dropdown component', () => {
insuranceCoverage: { isVerified: true } insuranceCoverage: { isVerified: true }
}, },
policy: { policy: {
noCoverage: true noCoverage: true,
policyLookupSuccessful: true
} }
}, },
issConfig: { issConfig: {
@ -826,8 +866,8 @@ describe('cart-dropdown component', () => {
test('returns expected when availableVaps null', async () => { test('returns expected when availableVaps null', async () => {
// Arrange // Arrange
const availableVaps = [{ partNumber: 'vaps1' }]; const availableVaps = [{ partNumber: 'vaps1' }];
const propsData = { availableVaps }; const initialData = { availableVaps };
const { wrapper } = getMountedComponent({}, {}, propsData); const { wrapper } = getMountedComponent({}, initialData, {});
const expected = availableVaps; const expected = availableVaps;
// Act // Act
@ -854,10 +894,10 @@ describe('cart-dropdown component', () => {
} }
} }
}; };
const propsData = { const initialData = {
availableVaps: [part4, part5] availableVaps: [part4, part5]
}; };
const { wrapper } = getMountedComponent(storeData, {}, propsData); const { wrapper } = getMountedComponent(storeData, initialData, {});
const sortByPartType = (a, b) => { const sortByPartType = (a, b) => {
const typeA = a.partType.toUpperCase(); const typeA = a.partType.toUpperCase();
const typeB = b.partType.toUpperCase(); const typeB = b.partType.toUpperCase();
@ -1770,8 +1810,10 @@ describe('cart-dropdown component', () => {
order: { order: {
policy: { policy: {
isITAC: false, isITAC: false,
isNoComp: false isNoComp: false,
policyLookupSuccessful: true
}, },
<<<<<<< HEAD
currentDeductible: 321, currentDeductible: 321,
policyLookupSuccessful: true, policyLookupSuccessful: true,
payment: { payment: {
@ -1779,6 +1821,9 @@ describe('cart-dropdown component', () => {
coverageStatus: coverageStatuses.VERIFIED coverageStatus: coverageStatuses.VERIFIED
} }
}, },
=======
currentDeductible: 321
>>>>>>> develop
} }
}; };
const { wrapper } = getMountedComponent(storeData); const { wrapper } = getMountedComponent(storeData);

61
src/iss-components/cart-dropdown/cart-dropdown.vue
View file

@ -1,8 +1,9 @@
<template> <template>
<div> <div>
<div <div
v-if="showDropdownHeader"
id="cart-dropdown-head" id="cart-dropdown-head"
class="row cart-toggle flex align-items-center pt-4" class="row flex align-items-center pt-4 cart-header cart-toggle"
:class="[isExpanded ? 'expanded' : '']" :class="[isExpanded ? 'expanded' : '']"
@click="toggleIsExpanded"> @click="toggleIsExpanded">
<a <a
@ -13,6 +14,11 @@
<span class="color-green">{{ getDisplayed(amountDue) }}</span> <span class="color-green">{{ getDisplayed(amountDue) }}</span>
</a> </a>
</div> </div>
<div
v-else
id="cart-dropdown-head"
class="expanded cart-header">
</div>
<div <div
id="cart-table" id="cart-table"
class="cart-table"> class="cart-table">
@ -176,12 +182,15 @@ export default {
showAsPaid: Boolean, showAsPaid: Boolean,
readOnly: Boolean, readOnly: Boolean,
recyclingModalCmsWidgetName: String, recyclingModalCmsWidgetName: String,
availableVaps: Array, showDropdownHeader: Boolean,
submittedOrder: Object isInitiallyExpanded: Boolean,
submittedOrder: Object,
selectedVaps: Array
}, },
data() { data() {
return { return {
isExpanded: false, isExpanded: this.isInitiallyExpanded,
availableVaps: useMainStore().order.availableVaps,
widget: { widget: {
amountDue: 'AmountDueTextWidget', amountDue: 'AmountDueTextWidget',
amountPaid: 'AmountPaidTextWidget', amountPaid: 'AmountPaidTextWidget',
@ -571,25 +580,30 @@ export default {
text-align: center; text-align: center;
} }
.cart-toggle { .cart-header {
font-weight: $font-weight-bold; &.cart-toggle {
font-weight: $font-weight-bold;
&:after { &:after {
content: ""; content: "";
transition: all 0.5s ease; transition: all 0.5s ease;
background-image: url($svg-payment-method-review-toggle); background-image: url($svg-payment-method-review-toggle);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
width: 1rem; width: 1rem;
height: 0.5625rem; height: 0.5625rem;
display: inline-flex; display: inline-flex;
position: relative; position: relative;
right: 0.75rem; right: 0.75rem;
margin: 0.5rem 0 0.5rem 1rem; margin: 0.5rem 0 0.5rem 1rem;
cursor: pointer; cursor: pointer;
} }
&.expanded:after { &.expanded:after {
transform: rotate(180deg); transform: rotate(180deg);
}
a {
text-decoration: none;
}
} }
&.expanded + .cart-table { &.expanded + .cart-table {
max-height: 50rem; max-height: 50rem;
@ -597,9 +611,6 @@ export default {
overflow: hidden; overflow: hidden;
visibility: visible; visibility: visible;
} }
a {
text-decoration: none;
}
} }
:deep(#recycle-fee-label a){ :deep(#recycle-fee-label a){

3
src/layouts/coverage-statement/coverage-statement.spec.js
View file

@ -788,7 +788,8 @@ describe('coverageStatement.vue-working', () => {
currentDeductible: servicePrice - 1 currentDeductible: servicePrice - 1
}, },
issConfig: { issConfig: {
isClaimRegistrationRequired: true isClaimRegistrationRequired: true,
enableNoCompQuote: true
} }
}; };
getPriceOfLineItems.mockImplementation(() => servicePrice); getPriceOfLineItems.mockImplementation(() => servicePrice);

2
src/layouts/coverage-statement/coverage-statement.vue
View file

@ -374,7 +374,7 @@ export default {
&& policyVehicleId >= 0 && policyVehicleId >= 0
&& isClaimRegistrationRequired && isClaimRegistrationRequired
&& !isClaimAlreadyRegistered && !isClaimAlreadyRegistered
&& (this.isDeductibleVisible || this.isITACQuoteVisible); && !this.isNoCompQuoteVisible;
} }
}, },
watch: { watch: {

2
src/layouts/order-confirmation/order-confirmation.vue
View file

@ -53,7 +53,7 @@
:readOnly="true" :readOnly="true"
recyclingModalCmsWidgetName="RecycleModal" recyclingModalCmsWidgetName="RecycleModal"
servicePackageTitleWidgetName="ServicePackageTitle" servicePackageTitleWidgetName="ServicePackageTitle"
:availableVaps="selectedVaps" :selectedVaps="selectedVaps"
:submittedOrder="submittedOrder" /> :submittedOrder="submittedOrder" />
</div> </div>
<div <div

8
src/layouts/payment-method/payment-method.spec.js
View file

@ -135,15 +135,15 @@ describe('payment-method.vue', () => {
order: { order: {
policy: { policy: {
isITAC: false, isITAC: false,
noCoverage: false noCoverage: false,
policyLookupSuccessful: true
}, },
payment: { payment: {
insuranceCoverage: { insuranceCoverage: {
isVerified: true isVerified: true
} }
}, },
currentDeductible: 123, currentDeductible: 123
policyLookupSuccessful: true
}, },
issConfig: { issConfig: {
isClaimRegistrationRequired: true, isClaimRegistrationRequired: true,
@ -162,7 +162,7 @@ describe('payment-method.vue', () => {
}); });
test('returns true when policyLookupSuccessful false', () => { test('returns true when policyLookupSuccessful false', () => {
// Arrange // Arrange
store.order.policyLookupSuccessful = false; store.order.policy.policyLookupSuccessful = false;
const wrapper = setupMocks({}, store, mixin); const wrapper = setupMocks({}, store, mixin);
// Act // Act

16
src/layouts/payment-method/payment-method.vue
View file

@ -22,9 +22,10 @@
<cartDropdown <cartDropdown
:showAsPaid="false" :showAsPaid="false"
:readOnly="false" :readOnly="false"
:showDropdownHeader="true"
:isInitiallyExpanded="false"
recyclingModalCmsWidgetName="RecycleModal" recyclingModalCmsWidgetName="RecycleModal"
servicePackageTitleWidgetName="ServicePackageTitle" servicePackageTitleWidgetName="ServicePackageTitle" />
:availableVaps="availableVaps" />
<hr class="mt-0 mb-5" /> <hr class="mt-0 mb-5" />
<alert <alert
v-if="displayPayInAdvanceAlert" v-if="displayPayInAdvanceAlert"
@ -79,6 +80,7 @@ import { Form } from 'vee-validate';
import issPageValues from '@/router/router-constants/issPage-values'; import issPageValues from '@/router/router-constants/issPage-values';
import bailoutMessage from '@/constants/bailoutMessage'; import bailoutMessage from '@/constants/bailoutMessage';
import { AppointmentTypeStrings } from '@/constants/schedule-constants'; import { AppointmentTypeStrings } from '@/constants/schedule-constants';
import VehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
export default { export default {
name: 'payment-method', name: 'payment-method',
@ -91,7 +93,8 @@ export default {
reviewDropdown, reviewDropdown,
cartDropdown, cartDropdown,
paymentMethodQuestion, paymentMethodQuestion,
alert alert,
VehicleBanner
}, },
mixins: [baseFormMixin], mixins: [baseFormMixin],
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -142,13 +145,12 @@ export default {
vm.setCmsContent(resultMap.cmsContent); vm.setCmsContent(resultMap.cmsContent);
vm.updateFooterButtonText(vm.customCallToActionButtonCopy); vm.updateFooterButtonText(vm.customCallToActionButtonCopy);
vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData); vm.$refs.reviewDropdown.initializeComponent(resultMap.reviewDropdownData);
vm.setAvailableVaps(pricedVaps ?? []); vm.storeAvailableVaps(pricedVaps ?? []);
}); });
} }
}, },
data() { data() {
return { return {
availableVaps: [],
paymentMethodInternalModel: this.getPaymentMethodFromStore(), paymentMethodInternalModel: this.getPaymentMethodFromStore(),
rules: { rules: {
optionRequired: globalRules.OPTION_REQUIRED optionRequired: globalRules.OPTION_REQUIRED
@ -291,8 +293,8 @@ export default {
); );
} }
}, },
setAvailableVaps(vaps) { storeAvailableVaps(vaps) {
this.availableVaps = vaps; useMainStore().order.availableVaps = vaps;
} }
} }
}; };

12
src/layouts/payment-page/payment-page.vue
View file

@ -40,6 +40,16 @@
:isForwardButtonHidden="true" :isForwardButtonHidden="true"
@ForwardClicked="forwardButtonAction" @ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" /> @backClicked="backButtonAction" />
<div class="px-2">
<cartDropdown
:showAsPaid="false"
:readOnly="true"
:showDropdownHeader="false"
:isInitiallyExpanded="true"
recyclingModalCmsWidgetName="RecycleModal"
servicePackageTitleWidgetName="ServicePackageTitle" />
</div>
</div> </div>
</div> </div>
@ -390,10 +400,12 @@ import { hopPaymentMethods, paymentMethods } from '@/constants/payment-method-co
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js'; import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import queryStrings from '@/constants/query-strings'; import queryStrings from '@/constants/query-strings';
import alert from '@/ux-components/alert/alert.vue'; import alert from '@/ux-components/alert/alert.vue';
import cartDropdown from "@/iss-components/cart-dropdown/cart-dropdown.vue";
export default { export default {
name: 'payment-page', name: 'payment-page',
components: { components: {
cartDropdown,
siteHeader, siteHeader,
siteFooter, siteFooter,
// eslint-disable-next-line vue/no-reserved-component-names // eslint-disable-next-line vue/no-reserved-component-names

6
src/store/index.js
View file

@ -206,7 +206,8 @@ export const getDefaultState = () => ({
currentDeductible: null, currentDeductible: null,
carrierPhoneNumber: null, carrierPhoneNumber: null,
loadedFromDupeCheck: null, loadedFromDupeCheck: null,
loadedSessionClearedPreviousData: null loadedSessionClearedPreviousData: null,
availableVaps: null
}, },
applicationUser: { applicationUser: {
experiments: [], experiments: [],
@ -284,7 +285,8 @@ export const useMainStore = defineStore({
isNoComp: (s) => !!s.order.policy.noCoverage, isNoComp: (s) => !!s.order.policy.noCoverage,
isITAC: (state) => !!state.order.policy.isITAC, isITAC: (state) => !!state.order.policy.isITAC,
isUnverified: (s) => { isUnverified: (s) => {
const { policyLookupSuccessful, payment, currentDeductible } = s.order; const { payment, currentDeductible, policy } = s.order;
const { policyLookupSuccessful } = policy;
const registerClaimSuccessful = !!payment.insuranceCoverage.isVerified; const registerClaimSuccessful = !!payment.insuranceCoverage.isVerified;
if (!policyLookupSuccessful) { if (!policyLookupSuccessful) {
return true; return true;

4
src/store/store.spec.js
View file

@ -1471,13 +1471,13 @@ describe('Store', () => {
store.order.policy.noCoverage = false; store.order.policy.noCoverage = false;
store.order.payment.insuranceCoverage.isVerified = true; store.order.payment.insuranceCoverage.isVerified = true;
store.order.currentDeductible = 123; store.order.currentDeductible = 123;
store.order.policyLookupSuccessful = true; store.order.policy.policyLookupSuccessful = true;
store.issConfig.isClaimRegistrationRequired = true; store.issConfig.isClaimRegistrationRequired = true;
store.issConfig.enableNoCompQuote = true; store.issConfig.enableNoCompQuote = true;
}); });
it('returns true when policyLookupSuccessful false', () => { it('returns true when policyLookupSuccessful false', () => {
// Arrange // Arrange
store.order.policyLookupSuccessful = false; store.order.policy.policyLookupSuccessful = false;
// Act // Act
const result = store.isUnverified; const result = store.isUnverified;