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

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

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

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

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

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

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

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

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

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

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

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

@ -40,6 +40,16 @@
:isForwardButtonHidden="true"
@ForwardClicked="forwardButtonAction"
@backClicked="backButtonAction" />
<div class="px-2">
<cartDropdown
:showAsPaid="false"
:readOnly="true"
:showDropdownHeader="false"
:isInitiallyExpanded="true"
recyclingModalCmsWidgetName="RecycleModal"
servicePackageTitleWidgetName="ServicePackageTitle" />
</div>
</div>
</div>
@ -390,10 +400,12 @@ import { hopPaymentMethods, paymentMethods } from '@/constants/payment-method-co
import { AppointmentTypeStrings } from '@/constants/schedule-constants.js';
import queryStrings from '@/constants/query-strings';
import alert from '@/ux-components/alert/alert.vue';
import cartDropdown from "@/iss-components/cart-dropdown/cart-dropdown.vue";
export default {
name: 'payment-page',
components: {
cartDropdown,
siteHeader,
siteFooter,
// 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,
carrierPhoneNumber: null,
loadedFromDupeCheck: null,
loadedSessionClearedPreviousData: null
loadedSessionClearedPreviousData: null,
availableVaps: null
},
applicationUser: {
experiments: [],
@ -284,7 +285,8 @@ export const useMainStore = defineStore({
isNoComp: (s) => !!s.order.policy.noCoverage,
isITAC: (state) => !!state.order.policy.isITAC,
isUnverified: (s) => {
const { policyLookupSuccessful, payment, currentDeductible } = s.order;
const { payment, currentDeductible, policy } = s.order;
const { policyLookupSuccessful } = policy;
const registerClaimSuccessful = !!payment.insuranceCoverage.isVerified;
if (!policyLookupSuccessful) {
return true;

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

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