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

Merge pull request #623 from Safelite/feature/SSR-1114

Browse source 
add cart to order-confirmation page
This commit is contained in:
katiekroell 2024-04-19 07:46:33 -04:00 committed by GitHub
commit fef57f7a26
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 244 additions and 41 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

@ -11,6 +11,7 @@ Object {
"isExpanded": false,
"widget": Object {
"amountDue": "AmountDueTextWidget",
"amountPaid": "AmountPaidTextWidget",
"basePrice": "BasePriceWidget",
"deductible": "DeductibleWidget",
"mobileFee": "MobileServiceWidget",

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

@ -253,6 +253,27 @@ describe('cart-dropdown component', () => {
// Assert
expect(salesTax.exists()).toBeTruthy();
});
test('amount paid when Pay in Advance', () => {
// Arrange
const reference = '#cart-amount-paid';
const isExpanded = true;
const showAsPaid = true;
const initialPropsData = { isExpanded, showAsPaid };
const storeData = {
order: {
payment: {
isPayInAdvance: true
}
}
};
const { wrapper } = getMountedComponent(storeData, {}, initialPropsData);
// Act
const amountPaid = wrapper.find(reference);
// Assert
expect(amountPaid.exists()).toBeTruthy();
});
test('bottom amount due', () => {
// Arrange
const reference = '#bottom-amount-due';
@ -631,7 +652,13 @@ describe('cart-dropdown component', () => {
vaps: null
},
payment: {
insuranceCoverage: { isVerified: true }
insuranceCoverage: {
coverageStatus: coverageStatuses.VERIFIED
}
},
policy: {
noCoverage: false,
isITAC: false
}
},
issConfig: {
@ -669,7 +696,9 @@ describe('cart-dropdown component', () => {
]
},
payment: {
insuranceCoverage: { isVerified: true }
insuranceCoverage: {
coverageStatus: coverageStatuses.VERIFIED
}
}
},
issConfig: {
@ -1784,7 +1813,13 @@ describe('cart-dropdown component', () => {
isNoComp: false,
policyLookupSuccessful: true
},
currentDeductible: 321
currentDeductible: 321,
policyLookupSuccessful: true,
payment: {
insuranceCoverage: {
coverageStatus: coverageStatuses.VERIFIED
}
}
}
};
const { wrapper } = getMountedComponent(storeData);

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

@ -129,6 +129,13 @@
<span id="sales-tax-label">{{ salesTaxLabel }}</span>
<span id="sales-tax-value">{{ formatAmountInDollars(salesTax) }}</span>
</div>
<div
v-if="showAsPaid"
id="cart-amount-paid"
class="pt-1 col d-flex justify-content-between">
<span id="amount-paid-label">{{ amountPaidLabel }}</span>
<span if="amount-paid-value">{{ getDisplayed(amountPaid) }}</span>
</div>
</div>
<div
id="bottom-amount-due"
@ -176,14 +183,16 @@ export default {
readOnly: Boolean,
recyclingModalCmsWidgetName: String,
showDropdownHeader: Boolean,
isInitiallyExpanded: Boolean
isInitiallyExpanded: Boolean,
submittedOrder: Object
},
data() {
return {
isExpanded: this.isInitiallyExpanded,
availableVaps: useMainStore().order.availableVaps,
availableVaps: this.submittedOrder ? this.submittedOrder.lineItems.vaps : useMainStore().order.availableVaps,
widget: {
amountDue: 'AmountDueTextWidget',
amountPaid: 'AmountPaidTextWidget',
deductible: 'DeductibleWidget',
basePrice: 'BasePriceWidget',
subtotal: 'SubtotalWidget',
@ -199,17 +208,20 @@ export default {
computed: {
deductible() {
// Note: added as computed so it can be used in the template.
return useMainStore().order.currentDeductible;
return this.submittedOrder ? this.submittedOrder.currentDeductible : useMainStore().order.currentDeductible;
},
showDeductibleCartItem() {
return !useMainStore().isNoComp && !useMainStore().isITAC;
return !this.isNoComp && !this.isITAC;
},
lineItems() {
return this.submittedOrder ? this.submittedOrder.lineItems : useMainStore().lineItems;
},
recycleFeeLineItem() {
return useMainStore().lineItems.supportingItems
return this.lineItems.supportingItems
?.find((lineItem) => lineItem.partNumber === partNumberStrings.RECYCLE_FEE);
},
baseServiceLineItems() {
const { supportingItems, glassParts, otherParts } = useMainStore().lineItems;
const { supportingItems, glassParts, otherParts } = this.lineItems;
const parts = [
...(supportingItems ?? []),
...(glassParts ?? []),
@ -220,8 +232,21 @@ export default {
baseServicePrice() {
return getPriceOfLineItems(this.baseServiceLineItems) ?? 0;
},
isVerifiedCoverageStatus() {
return this.submittedOrder ? this.submittedOrder.payment.insuranceCoverage.isVerified : useMainStore().isVerifiedCoverageStatus;
},
isUnverified() {
return !this.isNoComp && !this.isITAC
&& (this.deductible == null || !this.isVerifiedCoverageStatus);
},
isITAC() {
return this.submittedOrder ? this.submittedOrder.policy.isITAC : useMainStore().isITAC;
},
isNoComp() {
return this.submittedOrder ? this.submittedOrder.policy.noCoverage : useMainStore().isNoComp;
},
subTotal() {
const { supportingItems, glassParts, otherParts, vaps, mobileFee } = useMainStore().lineItems;
const { supportingItems, glassParts, otherParts, vaps, mobileFee } = this.lineItems;
const allLineItems = [
...(supportingItems ?? []),
...(glassParts ?? []),
@ -229,12 +254,12 @@ export default {
...(vaps ?? []),
mobileFee
];
return !useMainStore().isNoComp && !useMainStore().isITAC
return !this.isNoComp && !this.isITAC
? this.deductible + getPriceOfLineItems([...this.feeLineItems, ...(vaps ?? [])])
: getPriceOfLineItems(allLineItems);
},
feeLineItems() {
const { mobileFee } = useMainStore().lineItems;
const { mobileFee } = this.lineItems;
const result = [];
if (mobileFee) {
result.push(mobileFee);
@ -251,8 +276,8 @@ export default {
let result = 0;
if (!useMainStore().isUnverified) {
if (useMainStore().isITAC || useMainStore().isNoComp) {
if (!this.isUnverified) {
if (this.isITAC || this.isNoComp) {
result += sumTax(this.baseServiceLineItems);
} else {
// deductible-case need to show tax for Recycle Fee
@ -260,7 +285,7 @@ export default {
}
}
result += sumTax(useMainStore().lineItems.vaps ?? []);
result += sumTax(this.lineItems.vaps ?? []);
return result;
},
@ -269,8 +294,13 @@ export default {
? 0
: this.subTotal + this.salesTax;
},
amountPaid() {
return !this.showAsPaid
? 0
: this.subTotal + this.salesTax;
},
availableLineItems() {
const { supportingItems, glassParts, otherParts, mobileFee } = useMainStore().lineItems;
const { supportingItems, glassParts, otherParts, mobileFee } = this.lineItems;
const result = [
...(supportingItems ?? []),
...(glassParts ?? []),
@ -282,9 +312,12 @@ export default {
}
return result;
},
vehicleDamage() {
return this.submittedOrder ? this.submittedOrder.damage : useMainStore().damage;
},
servicePackageTier() {
const { glassToReplace, isRepair } = useMainStore().damage;
const { vaps } = useMainStore().lineItems;
const { glassToReplace, isRepair } = this.vehicleDamage;
const { vaps } = this.lineItems;
return getHighestFullySatisfiedTier(
glassToReplace ?? [],
this.availableLineItems,
@ -293,7 +326,7 @@ export default {
);
},
partTypesInServicePackage() {
const { glassToReplace, isRepair } = useMainStore().damage;
const { glassToReplace, isRepair } = this.vehicleDamage;
return getPackageContents(
glassToReplace ?? [],
this.availableLineItems,
@ -315,7 +348,7 @@ export default {
return items;
},
nonServicePackageCartItems() {
const vapPartTypesInOrder = Array.from(new Set(useMainStore().lineItems.vaps?.map((vap) => vap.partType) ?? []));
const vapPartTypesInOrder = Array.from(new Set(this.lineItems.vaps?.map((vap) => vap.partType) ?? []));
const vapPartTypesInOrderButNotPackage = vapPartTypesInOrder
.filter((partType) => !this.partTypesInServicePackage.includes(partType))
?? [];
@ -358,6 +391,9 @@ export default {
amountDueLabel() {
return this.getCmsContent(this.widget.amountDue, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
},
amountPaidLabel() {
return this.getCmsContent(this.widget.amountPaid, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
},
deductibleLabel() {
return this.getCmsContent(this.widget.deductible, widgetFields.TEXT_BLOCK_WIDGET.TEXT);
},
@ -396,7 +432,7 @@ export default {
: null;
},
mobileFeeCartItem() {
const mobileFeeLineItem = useMainStore().lineItems.mobileFee;
const mobileFeeLineItem = this.lineItems.mobileFee;
return mobileFeeLineItem
? this.getCartItem(
this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT),
@ -415,9 +451,9 @@ export default {
this.isExpanded = !this.isExpanded;
},
getDisplayed(amount) {
return useMainStore().isUnverified
&& !useMainStore().isNoComp
&& !useMainStore().isITAC
return this.isUnverified
&& !this.isNoComp
&& !this.isITAC
? VERIFYING_COVERAGE
: formatAmountInDollars(amount);
},
@ -441,7 +477,7 @@ export default {
},
getCartItemForVapsPart(partType) {
const label = this.getCmsContentForVapsType(partType);
const lineItems = useMainStore().lineItems.vaps
const lineItems = this.lineItems.vaps
?.filter((vapsLineItem) => vapsLineItem.partType === partType) ?? [];
return this.getCartItem(label, lineItems, cartItemType.VAP, partType);
},

135
src/layouts/order-confirmation/order-confirmation.spec.js
View file

@ -14,7 +14,8 @@ jest.mock('@/helpers/layout-helper.js', () => jest.fn());
jest.mock('@/helpers/cms-content-helper', () => ({
fetchCmsContentForPage: jest.fn(),
processIfStatements: jest.fn()
processIfStatements: jest.fn(),
splitCopyOnCMSPlaceHolder: jest.fn()
}));
const wordingText = 'wording text {custom:address}';
@ -105,7 +106,17 @@ const sessionStorage = {
zipCode: '12345'
}
}
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
const sessionStorageMock = (() => {
@ -302,7 +313,17 @@ describe('OrderConfirmation.vue', () => {
},
serviceLocation: {
appointmentType: 'Mobile'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -331,7 +352,17 @@ describe('OrderConfirmation.vue', () => {
zipCode: '12345'
}
}
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -368,7 +399,17 @@ describe('OrderConfirmation.vue', () => {
state: 'AZ',
zipCode: '12345',
appointmentType: 'Mobile'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -397,7 +438,17 @@ describe('OrderConfirmation.vue', () => {
}
},
appointmentType: 'Dropoff'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -426,7 +477,17 @@ describe('OrderConfirmation.vue', () => {
}
},
appointmentType: 'Inshop'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -452,7 +513,17 @@ describe('OrderConfirmation.vue', () => {
state: 'AZ',
zipCode: '12345',
appointmentType: 'Mobile'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -481,7 +552,17 @@ describe('OrderConfirmation.vue', () => {
}
},
appointmentType: 'Inshop'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -507,7 +588,17 @@ describe('OrderConfirmation.vue', () => {
state: 'AZ',
zipCode: '12345',
appointmentType: 'Mobile'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -536,7 +627,17 @@ describe('OrderConfirmation.vue', () => {
}
},
appointmentType: 'Dropoff'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();
@ -566,7 +667,17 @@ describe('OrderConfirmation.vue', () => {
}
},
appointmentType: 'Inshop'
}
},
payment: {
isPayInAdvance: false
},
lineItems: {
vaps: []
},
policy: {
noCoverage: false
},
damage: {}
};
window.sessionStorage.setItem('submittedOrder', JSON.stringify(testSessionStorage));
const { wrapper } = getMountedComponent();

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

@ -47,6 +47,14 @@
v-html="appointmentWordingText2">
</div>
</div>
<div>
<cartDropdown
:showAsPaid="isPayInAdvance"
:readOnly="true"
recyclingModalCmsWidgetName="RecycleModal"
servicePackageTitleWidgetName="ServicePackageTitle"
:submittedOrder="submittedOrder" />
</div>
<div
class="email-confirmation-text"
v-html="confirmationEmailText" />
@ -69,6 +77,8 @@ import siteHeader from '@/iss-components/site-header/site-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import addToCalendar from '@/layouts/order-confirmation/add-to-calendar/add-to-calendar.vue';
import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue';
// Supporting files
import { fetchCmsContentForPage, processIfStatements } from '@/helpers/cms-content-helper';
import settleAllPromises from '@/helpers/layout-helper';
@ -91,22 +101,26 @@ export default {
siteHeader,
vehicleBanner,
siteFooter,
addToCalendar
addToCalendar,
cartDropdown
},
mixins: [BaseFormMixin],
async beforeRouteEnter(to, from, next) {
console.log('beforeRouteEnter just called');
useMainStore().createSubmittedOrder();
// Call APIs
const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
// Settle promises and get results
const promiseResultMap = [
{
resultKey: 'cmsContent',
promise: cmsContentPromise
}];
// use resultMap to populate layout content.
}
];
// use resultMap to populate layout content.
const resultMap = await settleAllPromises(promiseResultMap);
next((vm) => {
vm.setCmsContent(resultMap.cmsContent);
});
@ -263,6 +277,12 @@ export default {
this.submittedOrder.schedule.jobMaxMinutes
);
return inshopDurationTime;
},
isPayInAdvance() {
return this.submittedOrder.payment.isPayInAdvance;
},
selectedVaps() {
return this.submittedOrder.lineItems.vaps;
}
},
mounted() {