diff --git a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap index f635c1f9..e6e66827 100644 --- a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap +++ b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap @@ -9,6 +9,8 @@ Object { "amountDue": "AmountDueTextWidget", "basePrice": "BasePriceWidget", "deductible": "DeductibleWidget", + "mobileFee": "MobileServiceWidget", + "recycleFee": "RecycleFeeWidget", "salesTax": "SalesTaxWidget", "subtotal": "SubtotalWidget", }, diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js index 8ef2cd50..fc09a48e 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js +++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js @@ -7,6 +7,7 @@ import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; import coverageStatuses from '@/constants/coverage-statuses'; import { formatAmountInDollars } from '@/helpers/text-helper.js'; +import partTypeStrings from '@/constants/part-type-strings'; const VERIFYING_COVERAGE = 'Verifying coverage'; @@ -41,7 +42,13 @@ function getMountedComponent(mainInitialState = {}, initialData = {}, propsData describe('cart-dropdown component', () => { test('initial data rendered as expected', () => { // Arrange - const { wrapper } = getMountedComponent(); + const { wrapper } = getMountedComponent({ + order: { + lineItems: { + supportingItems: [] + } + } + }); // Assert expect(wrapper.vm.$data).toMatchSnapshot(); @@ -568,5 +575,85 @@ describe('cart-dropdown component', () => { expect(result).toBe(dollarAmount); }); }); + describe('Recyle fee', () => { + test('Shows recycle fee when preset in supported items', () => { + // Arrange + const reference = '#recycle-fee-item'; + const {wrapper} = getMountedComponent({ + order: { + lineItems: { + supportingItems: [{ + partType: partTypeStrings.REPLACE_FEE + }] + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.recycleFeeCartItem).not.toBeNull(); + expect(cartDeductible.exists()).toBeTruthy(); + }); + test('Hides recycle fee when not in supported items', () => { + // Arrange + const reference = '#recycle-fee-item'; + const {wrapper} = getMountedComponent({ + order: { + lineItems: { + supportingItems: [] + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.recycleFeeCartItem).toBeNull(); + expect(cartDeductible.exists()).toBeFalsy(); + }); + }); + describe('Mobile Fee', () => { + test('Shows mobile fee when preset', () => { + // Arrange + const reference = '#mobile-fee-item'; + const { wrapper } = getMountedComponent({ + order: { + lineItems: { + supportingItems: [], + mobileFee: {} + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.mobileFeeCartItem).not.toBeNull(); + expect(cartDeductible.exists()).toBeTruthy(); + }); + test('Hides recycle fee when not in supported items', () => { + // Arrange + const reference = '#mobile-fee-item'; + const { wrapper } = getMountedComponent({ + order: { + lineItems: { + supportingItems: [], + mobileFee: null + } + } + }); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(wrapper.vm.mobileFeeCartItem).toBeNull(); + expect(cartDeductible.exists()).toBeFalsy(); + }); + }); }); }); diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue index 498999bf..63f756bf 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.vue +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -21,7 +21,7 @@ class="color-darker-gray">
+ class="cart-item cart-gray">
- -
-
- + + +
- - - @@ -92,6 +116,8 @@ import textBlock from '@/digital-components/text-block/text-block.vue'; import textLink from '@/ux-components/text-link/text-link.vue'; import getPriceOfLineItems from '@/helpers/price-calculator.js'; import { formatAmountInDollars } from '@/helpers/text-helper.js'; +import baseMixin from '@/mixins/base-mixin'; +import partTypeStrings from '@/constants/part-type-strings'; import widgetFields from '@/constants/cms-widget-fields.js'; const VERIFYING_COVERAGE = 'Verifying coverage'; @@ -105,6 +131,10 @@ export default { recyclingModalCmsWidgetName: String, showAsPaid: Boolean }, + setup() { + const mainStore = useMainStore(); + return { mainStore }; + }, data() { const { currentDeductible } = useMainStore().order; const { supportingItems, glassParts, otherParts } = useMainStore().lineItems; @@ -122,7 +152,9 @@ export default { deductible: 'DeductibleWidget', basePrice: 'BasePriceWidget', subtotal: 'SubtotalWidget', - salesTax: 'SalesTaxWidget' + salesTax: 'SalesTaxWidget', + recycleFee: 'RecycleFeeWidget', + mobileFee: 'MobileServiceWidget' } }; }, @@ -163,6 +195,18 @@ export default { }, salesTaxLabel() { return this.getCmsContent(this.widget.salesTax, widgetFields.TEXT_BLOCK_WIDGET.TEXT); + }, + recycleFeeCartItem() { + return this.getCartItem( + this.getCmsContent(this.widget.recycleFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT), + this.mainStore.order.lineItems.supportingItems.find((lineItem) => lineItem.partType === partTypeStrings.REPLACE_FEE) + ); + }, + mobileFeeCartItem() { + return this.getCartItem( + this.getCmsContent(this.widget.mobileFee, widgetFields.TEXT_BLOCK_WIDGET.TEXT), + this.mainStore.order.lineItems.mobileFee + ); } }, methods: { @@ -176,6 +220,19 @@ export default { return this.isUnverified && this.showDeductibleLineItem ? VERIFYING_COVERAGE : formatAmountInDollars(amount); + }, + getCartItem(label, lineItem) { + let cartItem = null; + + if (lineItem) { + cartItem = { + name: label, + subTotal: baseMixin.methods.getTotalLineItemPrice(lineItem, false), + salesTax: lineItem.salesTax ?? 0 + }; + } + + return cartItem; } } }; @@ -201,13 +258,16 @@ export default { transition: all 350ms ease-in; overflow: hidden; visibility: hidden; + margin-top: 1rem; - .cart-deductible-or-base-price { - background-color: $gray-100; - margin-top: 1rem; + .cart-item { padding: 0.25rem 1.5rem; } + .cart-gray { + background-color: $gray-100; + } + .cart-footer { border-top: 1px solid $green; } @@ -269,6 +329,9 @@ export default { a { text-decoration: none; } +} +:deep(#recycle-fee-label a){ + line-height: initial; } diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue index 5fbb91c6..2f503879 100644 --- a/src/layouts/service-location/service-location.vue +++ b/src/layouts/service-location/service-location.vue @@ -340,8 +340,11 @@ export default { await this.$refs.shopQuestion.reloadShopData(zipCode); }, async forwardButtonAction() { - const providerToUse = this.isMobileLocationDisplayed - ? { + let provider = this.selectedProvider; + this.mainStore.updateMobileFee(null); + if (this.isMobileLocationDisplayed) { + this.mainStore.updateMobileFee(this.mobileFeePart); + provider = { providerNumber: this.mobileProviderNumber, address: { streetAddress: null, @@ -350,10 +353,10 @@ export default { zipCode: null, zipCodeCtu: null } - } - : this.selectedProvider; + }; + } - useMainStore().saveServiceLocation({ + this.mainStore.saveServiceLocation({ address: this.streetAddress, address2: this.streetAddress2, city: this.city, @@ -362,16 +365,7 @@ export default { zipCodeCtu: this.zipCodeCtu, appointmentType: this.selectedAppointmentType, isVehicleProtected: this.isVehicleProtected, - provider: { - providerNumber: providerToUse?.providerNumber, - address: { - streetAddress: providerToUse?.address?.streetAddress, - city: providerToUse?.address?.city, - state: providerToUse?.address?.state, - zipCode: providerToUse?.address?.zipCode, - zipCodeCtu: providerToUse?.address?.zipCodeCtu - } - } + provider }); this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD, this.$route); diff --git a/src/store/index.js b/src/store/index.js index 6d5d8fb1..5b9e2bd9 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -147,7 +147,8 @@ const getDefaultState = () => ({ glassParts: null, otherParts: null, supportingItems: null, - vaps: null + vaps: null, + mobileFee: null }, payment: { insuranceCoverage: { @@ -1537,6 +1538,10 @@ export const useMainStore = defineStore({ this.order.lineItems.vaps = partsData; }, + updateMobileFee(mobileFee) { + this.order.lineItems.mobileFee = mobileFee; + }, + updateVehicle(vehicle) { // Assuming that the method caller pass all the properties. // otherwise need to check for undefined for every property. @@ -2249,6 +2254,7 @@ export const useMainStore = defineStore({ resetPartsAndDependencies() { this.resetGlassPartsState(); this.updateVaps(null); + this.updateMobileFee(null); this.resetServiceLocationAndDependencies(); },