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

Merge pull request #603 from Safelite/feature/digital/SSR-1043

Browse source 
Making remove buttons work
This commit is contained in:
michaela-brydon-safelite 2024-04-10 13:17:34 -04:00 committed by GitHub
commit 4fb167db71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 827 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/constants/cart-item-type.js Normal file
View file

@ -0,0 +1,7 @@
const cartItemType = Object.freeze({
RECYCLE_FEE: 'RECYCLE FEE',
MOBILE_FEE: 'MOBILE FEE',
VAP: 'VAP'
});
export default cartItemType;

2
src/constants/part-number-strings.js
View file

@ -1,4 +1,4 @@
const partNumberStrings = Object.freeze({
const partNumberStrings = Object.freeze({
RECYCLE_FEE: 'RECYCLE FEE'
});

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

@ -2,6 +2,11 @@
exports[`cart-dropdown component initial data rendered as expected 1`] = `
Object {
"cartItemType": Object {
"MOBILE_FEE": "MOBILE FEE",
"RECYCLE_FEE": "RECYCLE FEE",
"VAP": "VAP",
},
"isExpanded": false,
"widget": Object {
"amountDue": "AmountDueTextWidget",

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

@ -46,6 +46,14 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, propsData
return { wrapper };
}
beforeEach(() => {
const store = useMainStore();
const defaultState = getDefaultState();
Object.keys(defaultState).forEach((key) => {
store[key] = defaultState[key];
});
});
describe('cart-dropdown component', () => {
test('initial data rendered as expected', () => {
// Arrange
@ -142,6 +150,42 @@ describe('cart-dropdown component', () => {
// Assert
expect(servicePackage.exists()).toBeTruthy();
});
test('non service package cart items', () => {
// Arrange
const reference = '#non-packaged-cart-items';
const isExpanded = true;
const initialData = { isExpanded };
const { wrapper } = getMountedComponent({}, {}, initialData);
// Act
const nonPackagedCartItems = wrapper.find(reference);
// Assert
expect(nonPackagedCartItems.exists()).toBeTruthy();
});
test('recycle cart item label when isRecycle true for some cart item', () => {
// Arrange
const reference = '#recycle-fee-label';
const isExpanded = true;
const initialPropsData = { isExpanded };
const storeData = {
order: {
lineItems: {
supportingItems: [
{ partNumber: partNumberStrings.RECYCLE_FEE }
]
}
}
};
const { wrapper } = getMountedComponent(storeData, {}, initialPropsData);
// Act
const recycleFeeLabel = wrapper.find(reference);
// Assert
expect(wrapper.vm.recycleFeeCartItem).not.toBeNull();
expect(recycleFeeLabel.exists()).toBeTruthy();
});
test('cart footer', () => {
// Arrange
const reference = '#cart-footer';
@ -181,45 +225,6 @@ describe('cart-dropdown component', () => {
// Assert
expect(salesTax.exists()).toBeTruthy();
});
test('recycle fee when preset in supported items', () => {
// Arrange
const reference = '#recycle-fee-item';
const { wrapper } = getMountedComponent({
order: {
lineItems: {
supportingItems: [{
partNumber: partNumberStrings.RECYCLE_FEE
}]
}
}
});
// Act
const recycleFee = wrapper.find(reference);
// Assert
expect(wrapper.vm.recycleFeeCartItem).not.toBeNull();
expect(recycleFee.exists()).toBeTruthy();
});
test('mobile fee when preset', () => {
// Arrange
const reference = '#mobile-fee-item';
const { wrapper } = getMountedComponent({
order: {
lineItems: {
supportingItems: [],
mobileFee: {}
}
}
});
// Act
const mobileFee = wrapper.find(reference);
// Assert
expect(wrapper.vm.mobileFeeCartItem).not.toBeNull();
expect(mobileFee.exists()).toBeTruthy();
});
test('bottom amount due', () => {
// Arrange
const reference = '#bottom-amount-due';
@ -285,42 +290,26 @@ describe('cart-dropdown component', () => {
// Assert
expect(cartBasePrice.exists()).toBeFalsy();
});
test('recycle fee when not in supported items', () => {
test('recycle cart item label when isRecycle false for all cart items', () => {
// Arrange
const reference = '#recycle-fee-item';
const { wrapper } = getMountedComponent({
const reference = '#recycle-fee-label';
const isExpanded = true;
const initialPropsData = { isExpanded };
const storeData = {
order: {
lineItems: {
supportingItems: []
}
}
});
};
const { wrapper } = getMountedComponent(storeData, {}, initialPropsData);
// Act
const recycleFee = wrapper.find(reference);
const recycleFeeLabel = wrapper.find(reference);
// Assert
expect(wrapper.vm.recycleFeeCartItem).toBeNull();
expect(recycleFee.exists()).toBeFalsy();
});
test('mobile fee when not in supported items', () => {
// Arrange
const reference = '#mobile-fee-item';
const { wrapper } = getMountedComponent({
order: {
lineItems: {
supportingItems: [],
mobileFee: null
}
}
});
// Act
const mobileFee = wrapper.find(reference);
// Assert
expect(wrapper.vm.mobileFeeCartItem).toBeNull();
expect(mobileFee.exists()).toBeFalsy();
expect(recycleFeeLabel.exists()).toBeFalsy();
});
});
describe('computed', () => {
@ -452,16 +441,129 @@ describe('cart-dropdown component', () => {
});
});
describe('subTotal', () => {
// TODO when method implemented
const supportingItemPartNumber = 'supporter';
const glassPartNumber = 'glass part';
const otherPartNumber = 'other';
const vapPartNumber = 'vap';
const mobileFeePartNumber = 'mobile';
const supportingItems = [{ partNumber: supportingItemPartNumber }];
const glassParts = [{ partNumber: glassPartNumber }];
const otherParts = [{ partNumber: otherPartNumber }];
const vaps = [{ partNumber: vapPartNumber }];
const mobileFee = { partNumber: mobileFeePartNumber };
const includesPartNumber = (lineItems, partNumber) => lineItems.some((item) => item?.partNumber === partNumber);
const deductiblePrice = 100;
const supportingAndGlassAndOtherPrice = 30;
const feesAndVapsPrice = 50;
const allLineItemsPrice = 70;
getPriceOfLineItems.mockImplementation((lineItems) => {
const allPartNumbers = [
supportingItemPartNumber,
glassPartNumber,
otherPartNumber,
mobileFeePartNumber,
vapPartNumber
];
if (allPartNumbers.every((partNumber) => includesPartNumber(lineItems, partNumber))) {
return allLineItemsPrice;
}
const supportingAndGlassAndOtherPartNumbers = [
supportingItemPartNumber,
glassPartNumber,
otherPartNumber
];
if (supportingAndGlassAndOtherPartNumbers.every((partNumber) => includesPartNumber(lineItems, partNumber))) {
return supportingAndGlassAndOtherPrice;
}
if (includesPartNumber(lineItems, mobileFeePartNumber) && includesPartNumber(lineItems, vapPartNumber)) {
return feesAndVapsPrice;
}
return 1;
});
const lineItems = {
supportingItems,
glassParts,
otherParts,
vaps,
mobileFee
};
test('when not no comp and not itac, includes deductible price plus fee and vap price', () => {
// Arrange
const storeData = {
order: {
lineItems,
policy: {
noCoverage: false,
isITAC: false
},
currentDeductible: deductiblePrice
}
};
const { wrapper } = getMountedComponent(storeData);
const expected = deductiblePrice + feesAndVapsPrice;
// Act
const result = wrapper.vm.subTotal;
// Assert
expect(result).toBe(expected);
});
test('when no comp, returns all line items price', () => {
// Arrange
const storeData = {
order: {
lineItems,
policy: {
noCoverage: true,
isITAC: false
},
currentDeductible: deductiblePrice
}
};
const { wrapper } = getMountedComponent(storeData);
const expected = allLineItemsPrice;
// Act
const result = wrapper.vm.subTotal;
// Assert
expect(result).toBe(expected);
});
test('when ITAC, returns all line items price', () => {
// Arrange
const storeData = {
order: {
lineItems,
policy: {
noCoverage: false,
isITAC: true
},
currentDeductible: deductiblePrice
}
};
const { wrapper } = getMountedComponent(storeData);
const expected = allLineItemsPrice;
// Act
const result = wrapper.vm.subTotal;
// Assert
expect(result).toBe(expected);
});
});
describe('salesTax', () => {
test('salesTax is treated as 0 when line items are null', () => {
// Arrange
const storeData = getDefaultState();
storeData.order.lineItems.glassParts = null;
storeData.order.lineItems.otherParts = null;
storeData.order.lineItems.supportingItems = null;
storeData.order.lineItems.vaps = null;
const storeData = {
order: {
lineItems: {
glassParts: null,
otherParts: null,
supportingItems: null,
vaps: null
}
}
};
const { wrapper } = getMountedComponent(storeData);
@ -474,20 +576,24 @@ describe('cart-dropdown component', () => {
test("salesTax is treated as 0 when null or undefined is set as the line item's sales tax.", () => {
// Arrange
const storeData = getDefaultState();
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: null },
{ partType: 'mock', salesTax: undefined }
];
storeData.order.lineItems.supportingItems = [
{ partType: 'mock', salesTax: null },
{ partType: 'mock', salesTax: undefined }
];
storeData.order.lineItems.vaps = [
{ partType: 'mock', salesTax: null },
{ partType: 'mock', salesTax: undefined }
];
const storeData = {
order: {
lineItems: {
glassParts: [
{ partType: 'mock', salesTax: null },
{ partType: 'mock', salesTax: undefined }
],
supportingItems: [
{ partType: 'mock', salesTax: null },
{ partType: 'mock', salesTax: undefined }
],
vaps: [
{ partType: 'mock', salesTax: null },
{ partType: 'mock', salesTax: undefined }
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
@ -496,19 +602,29 @@ describe('cart-dropdown component', () => {
// Assert
expect(result).toBe(0);
});
test('Returns 0 as sales tax when coverage is unverified and order does not contain vaps.', () => {
// Arrange
const storeData = getDefaultState();
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: 10 }
];
storeData.order.lineItems.supportingItems = [
{ partNumber: partNumberStrings.RECYCLE_FEE, partType: 'mock', salesTax: 10, sellingPrice: 39.99 }
];
storeData.order.lineItems.vaps = [];
storeData.order.payment.insuranceCoverage.isVerified = false;
const storeData = {
order: {
lineItems: {
glassParts: [{ partType: 'mock', salesTax: 10 }],
supportingItems: [
{
partNumber: partNumberStrings.RECYCLE_FEE,
partType: 'mock',
salesTax: 10,
sellingPrice: 39.99
}
],
vaps: []
},
payment: {
insuranceCoverage: {
isVerified: false
}
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
@ -520,7 +636,7 @@ describe('cart-dropdown component', () => {
test('Returns sum of vaps sales tax when coverage is unverified and order has vaps.', () => {
// Arrange
const storeData = getDefaultState();
const storeData = useMainStore().$state;
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: 10 }
];
@ -541,7 +657,7 @@ describe('cart-dropdown component', () => {
test('Returns Recycle Fee tax when coverage is Verified-Deductible, replace service, and no vaps.', () => {
// Arrange
const storeData = getDefaultState();
const storeData = useMainStore().$state;
storeData.order.currentDeductible = 250;
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: 10, sellingPrice: 150 }
@ -563,7 +679,7 @@ describe('cart-dropdown component', () => {
test('Returns sum of vaps + recycle fee sales tax when Verified-Deductible, replace service, and has vaps.', () => {
// Arrange
const storeData = getDefaultState();
const storeData = useMainStore().$state;
storeData.order.currentDeductible = 250;
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: 10, sellingPrice: 100 }
@ -592,7 +708,7 @@ describe('cart-dropdown component', () => {
test('Returns sum of sales tax when Verified-ITAC.', () => {
// Arrange
const storeData = getDefaultState();
const storeData = useMainStore().$state;
storeData.order.currentDeductible = 0;
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: 10, sellingPrice: 100 }
@ -620,7 +736,7 @@ describe('cart-dropdown component', () => {
test('Returns sum of sales tax when Verified-NoComp.', () => {
// Arrange
const storeData = getDefaultState();
const storeData = useMainStore().$state;
storeData.order.currentDeductible = 0;
storeData.order.lineItems.glassParts = [
{ partType: 'mock', salesTax: 10, sellingPrice: 100 }
@ -647,18 +763,10 @@ describe('cart-dropdown component', () => {
});
});
describe('availableLineItems', () => {
test('returns expected when glassParts null', async () => {
test('returns expected when all null', () => {
// Arrange
const storeData = {
order: {
lineItems: {
glassParts: null,
supportingItems: []
}
}
};
const propsData = { availableVaps: [] };
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const propsData = { availableVaps: null };
const { wrapper } = getMountedComponent({}, {}, propsData);
// Act
const result = wrapper.vm.availableLineItems;
@ -666,58 +774,106 @@ describe('cart-dropdown component', () => {
// Assert
expect(result).toStrictEqual([]);
});
test('returns expected when supportingItems null', async () => {
test('returns expected when glassParts not null', async () => {
// Arrange
const glassParts = [{ partNumber: 'glass' }];
const storeData = {
order: {
lineItems: {
glassParts: [],
supportingItems: null
}
lineItems: { glassParts }
}
};
const propsData = { availableVaps: [] };
const propsData = { availableVaps: null };
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const expected = glassParts;
// Act
const result = wrapper.vm.availableLineItems;
// Assert
expect(result).toStrictEqual([]);
expect(result).toStrictEqual(expected);
});
test('returns expected when supportingItems not null', async () => {
// Arrange
const supportingItems = [{ partNumber: 'support' }];
const storeData = {
order: {
lineItems: { supportingItems }
}
};
const propsData = { availableVaps: null };
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const expected = supportingItems;
// Act
const result = wrapper.vm.availableLineItems;
// Assert
expect(result).toStrictEqual(expected);
});
test('returns expected when otherParts not null', () => {
// Arrange
const otherParts = [{ partNumber: 'other' }];
const storeData = {
order: {
lineItems: { otherParts }
}
};
const propsData = { availableVaps: null };
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const expected = otherParts;
// Act
const result = wrapper.vm.availableLineItems;
// Assert
expect(result).toStrictEqual(expected);
});
test('returns expected when mobileFee not null', () => {
// Arrange
const mobileFee = { partNumber: 'mobile' };
const storeData = {
order: {
lineItems: { mobileFee }
}
};
const propsData = { availableVaps: null };
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const expected = [mobileFee];
// Act
const result = wrapper.vm.availableLineItems;
// Assert
expect(result).toStrictEqual(expected);
});
test('returns expected when availableVaps null', async () => {
// Arrange
const storeData = {
order: {
lineItems: {
glassParts: [],
supportingItems: []
}
}
};
const propsData = {
availableVaps: undefined
};
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const availableVaps = [{ partNumber: 'vaps1' }];
const propsData = { availableVaps };
const { wrapper } = getMountedComponent({}, {}, propsData);
const expected = availableVaps;
// Act
const result = wrapper.vm.availableLineItems;
// Assert
expect(result).toStrictEqual([]);
expect(result).toStrictEqual(expected);
});
test('returns expected when glassParts, supportingItems, and availableVaps have content', async () => {
test('returns expected when glassParts, supportingItems, otherParts, mobileFee, and availableVaps have content', async () => {
// Arrange
const part1 = { partType: 'apple' };
const part2 = { partType: 'banana' };
const part3 = { partType: 'orange' };
const part4 = { partType: 'grape' };
const part5 = { partType: 'raspberry' };
const mobileFee = { partType: 'mobile' };
const storeData = {
order: {
lineItems: {
glassParts: [part1],
supportingItems: [part2, part3]
supportingItems: [part2, part3],
otherParts: [],
mobileFee
}
}
};
@ -725,13 +881,24 @@ describe('cart-dropdown component', () => {
availableVaps: [part4, part5]
};
const { wrapper } = getMountedComponent(storeData, {}, propsData);
const expected = [part1, part2, part3, part4, part5];
const sortByPartType = (a, b) => {
const typeA = a.partType.toUpperCase();
const typeB = b.partType.toUpperCase();
if (typeA < typeB) {
return -1;
}
if (typeA > typeB) {
return 1;
}
return 0;
};
const expected = [part1, part2, part3, part4, part5, mobileFee];
// Act
const result = wrapper.vm.availableLineItems;
// Assert
expect(result).toStrictEqual(expected);
expect(result.sort(sortByPartType)).toStrictEqual(expected.sort(sortByPartType));
});
});
describe('servicePackageCartItems', () => {
@ -959,6 +1126,267 @@ describe('cart-dropdown component', () => {
}));
});
});
describe('nonServicePackageCartItems', () => {
test('when recycleFee, includes recycle fee', () => {
// Arrange
const storeData = {
order: {
lineItems: {
supportingItems: [
{
partNumber: partNumberStrings.RECYCLE_FEE
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.REPLACE_FEE
}));
});
test('when mobileFee, includes mobile fee', () => {
// Arrange
const storeData = {
order: {
lineItems: {
mobileFee: {
partType: partTypeStrings.MOBILE_FEE
}
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.MOBILE_FEE
}));
});
test('front wiper not included when front wiper in service package', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => [partTypeStrings.FRONT_WIPER]);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.FRONT_WIPER
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).not.toContainEqual(expect.objectContaining({
partType: partTypeStrings.FRONT_WIPER
}));
});
test('rear wiper not included when rear wiper in service package', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => [partTypeStrings.REAR_WIPER]);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.REAR_WIPER
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).not.toContainEqual(expect.objectContaining({
partType: partTypeStrings.REAR_WIPER
}));
});
test('rain defense not included when rain defense in service package', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => [partTypeStrings.RAIN_DEFENSE]);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.RAIN_DEFENSE
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).not.toContainEqual(expect.objectContaining({
partType: partTypeStrings.RAIN_DEFENSE
}));
});
test('front wiper included when not in service package and in vaps', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => []);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.FRONT_WIPER
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.FRONT_WIPER
}));
});
test('rear wiper included when not in service package and in vaps', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => []);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.REAR_WIPER
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.REAR_WIPER
}));
});
test('rain defense included when not in service package and in vaps', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => []);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.RAIN_DEFENSE
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.RAIN_DEFENSE
}));
});
test('item in vaps outside front wiper, rear wiper, and rain defense never included', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => []);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.RECALIBRATION
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result).not.toContainEqual(expect.objectContaining({
partType: partTypeStrings.RECALIBRATION
}));
});
test('returns expected when multiple variables apply', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => [partTypeStrings.FRONT_WIPER]);
const storeData = {
order: {
lineItems: {
supportingItems: [
{
partNumber: partNumberStrings.RECYCLE_FEE
}
],
mobileFee: {
partType: partTypeStrings.MOBILE_FEE
},
vaps: [
{ partType: partTypeStrings.RECALIBRATION },
{ partType: partTypeStrings.FRONT_WIPER },
{ partType: partTypeStrings.REAR_WIPER }
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.nonServicePackageCartItems;
// Assert
expect(result.length).toBe(3);
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.REPLACE_FEE
}));
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.MOBILE_FEE
}));
expect(result).toContainEqual(expect.objectContaining({
partType: partTypeStrings.REAR_WIPER
}));
});
});
describe('servicePackageLabelWidget', () => {
test.each([
[null],
@ -1181,15 +1609,105 @@ describe('cart-dropdown component', () => {
expect(result.name).toBe(expectedName);
});
});
describe('packagePrice', () => {
test('returns 0 when servicePackageCartItems is empty', () => {
// Arrange
getPriceOfLineItems.mockImplementation(() => 123);
getPackageContents.mockImplementationOnce(() => []);
const storeData = {
order: {
lineItems: {
vaps: [
{
partType: partTypeStrings.REAR_WIPER
}
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.packagePrice;
// Assert
expect(result).toBe(0);
});
test('returns expected when servicePackageCartItems not empty', () => {
// Arrange
const rearPrice = 101;
const frontPrice = 9;
getPriceOfLineItems.mockImplementation((lineItems) => {
if (lineItems.some((item) => item?.partType === partTypeStrings.FRONT_WIPER)) {
return frontPrice;
}
if (lineItems.some((item) => item?.partType === partTypeStrings.REAR_WIPER)) {
return rearPrice;
}
return 1;
});
getPackageContents.mockImplementationOnce(() => [partTypeStrings.FRONT_WIPER, partTypeStrings.REAR_WIPER]);
const storeData = {
order: {
lineItems: {
vaps: [
{ partType: partTypeStrings.FRONT_WIPER },
{ partType: partTypeStrings.REAR_WIPER }
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
const expectedPrice = 110;
// Act
const result = wrapper.vm.packagePrice;
// Assert
expect(result).toBe(expectedPrice);
});
test('returns expected when servicePackageCartItems has one item', () => {
// Arrange
const frontPrice = 9;
getPriceOfLineItems.mockImplementation((lineItems) => {
if (lineItems.some((item) => item?.partType === partTypeStrings.FRONT_WIPER)) {
return frontPrice;
}
return 1;
});
getPackageContents.mockImplementationOnce(() => [partTypeStrings.FRONT_WIPER, partTypeStrings.REAR_WIPER]);
const storeData = {
order: {
lineItems: {
vaps: [
{ partType: partTypeStrings.FRONT_WIPER }
]
}
}
};
const { wrapper } = getMountedComponent(storeData);
// Act
const result = wrapper.vm.packagePrice;
// Assert
expect(result).toBe(frontPrice);
});
});
});
describe('method', () => {
describe('getDisplayed', () => {
test('returns "Verifying coverage" when not no comp, not itac, and deductible null', () => {
// Arrange
const storeData = getDefaultState();
storeData.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.VERIFIED;
storeData.order.policy.isITAC = false;
storeData.order.currentDeductible = null;
const storeData = {
order: {
policy: {
noCoverage: false,
isITAC: false
},
currentDeductible: null
}
};
const { wrapper } = getMountedComponent(storeData);
const amount = 123;
@ -1202,10 +1720,15 @@ describe('cart-dropdown component', () => {
});
test('returns "Verifying coverage" when not no comp, not itac, and coverage status PENDING', () => {
// Arrange
const storeData = getDefaultState();
storeData.order.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
storeData.order.policy.isITAC = false;
storeData.order.currentDeductible = 321;
const storeData = {
order: {
policy: {
noCoverage: false,
isITAC: false
},
currentDeductible: 321
}
};
const { wrapper } = getMountedComponent(storeData);
const amount = 123;
@ -1521,8 +2044,5 @@ describe('cart-dropdown component', () => {
expect(result.subTotal).toBe(expectedSubtotal);
});
});
describe('removeItem', () => {
// TODO when written
});
});
});

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

@ -1,5 +1,5 @@
<template>
<div :class="[isExpanded ? 'pb-5' : 'pb-4']">
<div>
<div
id="cart-dropdown-head"
class="row cart-toggle flex align-items-center pt-4"
@ -41,7 +41,7 @@
<!-- Packaged Cart Items -->
<div
id="cart-service-package"
class="color-darker-gray px-5">
class="px-5">
<div
id="service-package-name"
class="py-1 d-flex justify-content-between align-items-center">
@ -55,8 +55,7 @@
class="ps-4">
<div
v-for="(item, i) in servicePackageCartItems"
:key="i"
class="packaged-cart-item">
:key="i">
<div class="py-1 d-flex justify-content-between align-items-center">
<span>{{ item?.name ?? '' }}</span>
<textLink
@ -64,7 +63,7 @@
linkType="text"
text="Remove"
href="javascript:void(0)"
@clickEvent="removeItem">
@clickEvent="removeVap(item.partType)">
<template #after-text>
<span class="sr-only">{{ item?.name ?? '' }}</span>
</template>
@ -74,42 +73,41 @@
</div>
</div>
<!-- Nonpackaged Cart Items -->
<!-- This will be a loop when this is implemented -->
<div class="non-packaged-cart-item">
<!-- NonPackaged Cart Items -->
<div id="non-packaged-cart-items">
<div
v-if="mobileFeeCartItem"
id="mobile-fee"
class="cart-item">
<div
id="mobile-fee-item"
class="d-flex justify-content-between align-items-center">
<span id="mobile-fee-label">{{ mobileFeeCartItem?.name ?? '' }}</span>
<span id="mobile-fee-value">{{ getDisplayed(mobileFeeCartItem.subTotal) }}</span>
</div>
</div>
<div
v-if="recycleFeeCartItem"
id="recycle-fee"
class="cart-item cart-gray">
<div
id="recycle-fee-item"
class="d-flex justify-content-between align-items-center">
<span id="recycle-fee-label">
<textLink
linkType="text"
:text="recycleFeeCartItem?.name ?? ''"
href="javascript:void(0)"
@clickEvent="openModal(recyclingModalCmsWidgetName)" />
v-for="(item, i) in nonServicePackageCartItems"
:key="i"
class="px-5 py-1 non-packaged-cart-item">
<div class="d-flex justify-content-between align-items-center">
<span
v-if="item.cartItemType === cartItemType.RECYCLE_FEE"
id="recycle-fee-label">
<textLink
linkType="text"
:text="item?.name ?? ''"
href="javascript:void(0)"
@clickEvent="openModal(recyclingModalCmsWidgetName)" />
</span>
<span id="recycle-fee-value">{{ getDisplayed(recycleFeeCartItem.subTotal) }}</span>
<span v-else>{{ item?.name ?? '' }}</span>
<span>{{ formatAmountInDollars(item?.subTotal ?? 0) }}</span>
</div>
<textLink
v-if="item.cartItemType === cartItemType.VAP
&& (!readOnly || !showAsPaid)"
linkType="text"
text="Remove"
href="javascript:void(0)"
@clickEvent="removeVap(item.partType)">
<template #after-text>
<span class="sr-only">{{ item?.name ?? '' }}</span>
</template>
</textLink>
</div>
</div>
<div
id="cart-footer"
class="cart-footer">
class="cart-footer pb-5">
<div
id="cart-subtotal-and-tax"
class="subtotal-and-tax">
@ -154,6 +152,7 @@ import { getHighestFullySatisfiedTier, getPackageContents } from '@/helpers/serv
// Constants
import partTypeStrings from '@/constants/part-type-strings.js';
import cartItemType from '@/constants/cart-item-type.js';
import partNumberStrings from '@/constants/part-number-strings.js';
import widgetFields from '@/constants/cms-widget-fields.js';
@ -185,7 +184,8 @@ export default {
mobileFee: 'MobileServiceWidget',
servicePackage: 'ServicePackageTitle',
vapsItemDescriptions: 'VapsItemDescriptions'
}
},
cartItemType
};
},
computed: {
@ -194,27 +194,51 @@ export default {
return useMainStore().order.currentDeductible;
},
showDeductibleCartItem() {
return !useMainStore().isNoComp && !useMainStore().policy.isITAC;
return !useMainStore().isNoComp && !useMainStore().isITAC;
},
recycleFeeLineItem() {
return useMainStore().lineItems.supportingItems
?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
},
baseServiceLineItems() {
return [
...(useMainStore().lineItems.supportingItems ?? []),
...(useMainStore().lineItems.glassParts ?? []),
...(useMainStore().lineItems.otherParts ?? [])
const { supportingItems, glassParts, otherParts } = useMainStore().lineItems;
const parts = [
...(supportingItems ?? []),
...(glassParts ?? []),
...(otherParts ?? [])
];
return parts.filter((part) => part !== this.recycleFeeLineItem);
},
baseServicePrice() {
return getPriceOfLineItems(this.baseServiceLineItems);
return getPriceOfLineItems(this.baseServiceLineItems) ?? 0;
},
isUnverified() {
return !useMainStore().isNoComp && !useMainStore().policy.isITAC
return !useMainStore().isNoComp && !useMainStore().isITAC
&& (this.deductible == null || !useMainStore().isVerifiedCoverageStatus);
},
subTotal() {
const basePrice = !useMainStore().isNoComp && !useMainStore().policy.isITAC
? this.deductible
: this.baseServicePrice;
return basePrice + this.packagePrice;
const { supportingItems, glassParts, otherParts, vaps, mobileFee } = useMainStore().lineItems;
const allLineItems = [
...(supportingItems ?? []),
...(glassParts ?? []),
...(otherParts ?? []),
...(vaps ?? []),
mobileFee
];
return !useMainStore().isNoComp && !useMainStore().isITAC
? this.deductible + getPriceOfLineItems([...this.feeLineItems, ...(vaps ?? [])])
: getPriceOfLineItems(allLineItems);
},
feeLineItems() {
const { mobileFee } = useMainStore().lineItems;
const result = [];
if (mobileFee) {
result.push(mobileFee);
}
if (this.recycleFeeLineItem) {
result.push(this.recycleFeeLineItem);
}
return result;
},
salesTax() {
function sumTax(lineItems) {
@ -228,10 +252,7 @@ export default {
result += sumTax(this.baseServiceLineItems);
} else {
// deductible-case need to show tax for Recycle Fee
const recycleFeeLineItem = useMainStore().lineItems.supportingItems
?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
result += recycleFeeLineItem != null ? recycleFeeLineItem.salesTax : 0;
result += this.recycleFeeLineItem?.salesTax ?? 0;
}
}
@ -245,40 +266,76 @@ export default {
: this.subTotal + this.salesTax;
},
availableLineItems() {
const { glassParts, supportingItems } = useMainStore().lineItems;
return [
...(glassParts ?? []),
const { supportingItems, glassParts, otherParts, mobileFee } = useMainStore().lineItems;
const result = [
...(supportingItems ?? []),
...(glassParts ?? []),
...(otherParts ?? []),
...(this.availableVaps ?? [])
];
if (mobileFee) {
result.push(mobileFee);
}
return result;
},
servicePackageTier() {
const { glassToReplace, isRepair } = useMainStore().damage;
const { vaps } = useMainStore().lineItems;
return getHighestFullySatisfiedTier(
useMainStore().damage.glassToReplace ?? [],
glassToReplace ?? [],
this.availableLineItems,
useMainStore().damage.isRepair,
useMainStore().lineItems.vaps ?? []
isRepair,
vaps ?? []
);
},
servicePackageCartItems() {
const packageContentTypes = getPackageContents(
useMainStore().damage.glassToReplace ?? [],
partTypesInServicePackage() {
const { glassToReplace, isRepair } = useMainStore().damage;
return getPackageContents(
glassToReplace ?? [],
this.availableLineItems,
useMainStore().damage.isRepair,
isRepair,
this.servicePackageTier
) ?? [];
},
servicePackageCartItems() {
const items = [];
if (packageContentTypes.includes(partTypeStrings.FRONT_WIPER) ?? this.frontWipersCartItem) {
if (this.partTypesInServicePackage.includes(partTypeStrings.FRONT_WIPER) ?? this.frontWipersCartItem) {
items.push(this.frontWipersCartItem);
}
if (packageContentTypes.includes(partTypeStrings.REAR_WIPER) ?? this.rearWipersCartItem) {
if (this.partTypesInServicePackage.includes(partTypeStrings.REAR_WIPER) ?? this.rearWipersCartItem) {
items.push(this.rearWipersCartItem);
}
if (packageContentTypes.includes(partTypeStrings.RAIN_DEFENSE) ?? this.rainDefenseCartItem) {
if (this.partTypesInServicePackage.includes(partTypeStrings.RAIN_DEFENSE) ?? this.rainDefenseCartItem) {
items.push(this.rainDefenseCartItem);
}
return items;
},
nonServicePackageCartItems() {
const vapPartTypesInOrder = Array.from(new Set(useMainStore().lineItems.vaps?.map((vap) => vap.partType) ?? []));
const vapPartTypesInOrderButNotPackage = vapPartTypesInOrder
.filter((partType) => !this.partTypesInServicePackage.includes(partType))
?? [];
const vapsCartItemsNotInPackage = vapPartTypesInOrderButNotPackage.map((partType) => {
switch (partType) {
case partTypeStrings.FRONT_WIPER:
return this.frontWipersCartItem;
case partTypeStrings.REAR_WIPER:
return this.rearWipersCartItem;
case partTypeStrings.RAIN_DEFENSE:
return this.rainDefenseCartItem;
default:
return null;
}
});
const items = vapsCartItemsNotInPackage.filter((item) => item != null);
if (this.recycleFeeCartItem) {
items.push(this.recycleFeeCartItem);
}
if (this.mobileFeeCartItem) {
items.push(this.mobileFeeCartItem);
}
return items;
},
frontWipersCartItem() {
return this.getCartItemForVapsPart(partTypeStrings.FRONT_WIPER);
},
@ -289,7 +346,10 @@ export default {
return this.getCartItemForVapsPart(partTypeStrings.RAIN_DEFENSE);
},
packagePrice() {
return getPriceOfLineItems(useMainStore().lineItems.vaps ?? []);
return this.servicePackageCartItems?.reduce(
(accumulator, cartItem) => accumulator + (cartItem?.subTotal ?? 0),
0
) ?? 0;
},
amountDueLabel() {
return this.getCmsContent(this.widget.amountDue, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
@ -322,12 +382,12 @@ export default {
return currentPackage?.SubWidgetName ?? '';
},
recycleFeeCartItem() {
const recycleFeeLineItem = useMainStore().lineItems.supportingItems
?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
return recycleFeeLineItem
return this.recycleFeeLineItem
? this.getCartItem(
this.getCmsContent(this.widget.recycleFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
[recycleFeeLineItem]
[this.recycleFeeLineItem],
cartItemType.RECYCLE_FEE,
partTypeStrings.REPLACE_FEE
)
: null;
},
@ -336,7 +396,9 @@ export default {
return mobileFeeLineItem
? this.getCartItem(
this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
[mobileFeeLineItem]
[mobileFeeLineItem],
cartItemType.MOBILE_FEE,
partTypeStrings.MOBILE_FEE
)
: null;
}
@ -351,21 +413,23 @@ export default {
getDisplayed(amount) {
return this.isUnverified
&& !useMainStore().isNoComp
&& !useMainStore().policy.isITAC
&& !useMainStore().isITAC
? VERIFYING_COVERAGE
: formatAmountInDollars(amount);
},
getCartItem(label, lineItems) {
getCartItem(label, lineItems, cartItemTypeString, partType) {
let cartItem = null;
if (lineItems && lineItems.length > 0) {
cartItem = {
name: label,
cartItemType: cartItemTypeString,
partType,
subTotal: getPriceOfLineItems(lineItems),
salesTax: lineItems.reduce(
salesTax: lineItems?.reduce(
(accumulator, lineItem) => accumulator + lineItem.salesTax,
0
)
) ?? 0
};
}
@ -374,13 +438,14 @@ export default {
getCartItemForVapsPart(partType) {
const label = this.getCmsContentForVapsType(partType);
const lineItems = useMainStore().lineItems.vaps
?.filter((vapsLineItem) => vapsLineItem.partType === partType);
return this.getCartItem(label, lineItems);
?.filter((vapsLineItem) => vapsLineItem.partType === partType) ?? [];
return this.getCartItem(label, lineItems, cartItemType.VAP, partType);
},
removeItem() {
// TODO in later ticket
removeVap(partType) {
const newVaps = useMainStore().lineItems.vaps?.filter((vap) => vap?.partType !== partType) ?? [];
useMainStore().updateVaps(newVaps);
},
getCmsContentForVapsType(vapsType) {
getCmsContentForVapsType(vapsPartType) {
const vapsItemDescriptions = this.getCmsContent(
this.widget.vapsItemDescriptions,
widgetFields.INPUT_QUESTION_WIDGET.ANSWERS
@ -390,7 +455,7 @@ export default {
return '';
}
const vapsTypeDescription = vapsItemDescriptions?.find((entry) => entry?.Name === vapsType);
const vapsTypeDescription = vapsItemDescriptions?.find((entry) => entry?.Name === vapsPartType);
return vapsTypeDescription?.Text ?? '';
},
formatAmountInDollars
@ -417,11 +482,6 @@ export default {
color: $darker-gray;
}
.cart-line-item {
padding: 0.25rem 1.5rem;
color: $darker-gray;
}
.cart-table {
max-height: 0;
transition: all 350ms ease-in;
@ -435,6 +495,10 @@ export default {
text-underline-offset: auto !important;
}
.non-packaged-cart-item:nth-child(odd){
background-color: $gray-100;
}
.cart-item {
padding: 0.25rem 1.5rem;
}