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

Merge pull request #622 from Safelite/feature/digital/SSR-1067

Browse source 
SSR-1067 Add cart to payment-page
This commit is contained in:
Josh Dassinger 2024-04-17 10:21:51 -05:00 committed by GitHub
commit f60d908086
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 91 additions and 37 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",

38
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';
@ -797,8 +825,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
@ -825,10 +853,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();

58
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">
@ -169,11 +175,13 @@ export default {
showAsPaid: Boolean,
readOnly: Boolean,
recyclingModalCmsWidgetName: String,
availableVaps: Array
showDropdownHeader: Boolean,
isInitiallyExpanded: Boolean
},
data() {
return {
isExpanded: false,
isExpanded: this.isInitiallyExpanded,
availableVaps: useMainStore().order.availableVaps,
widget: {
amountDue: 'AmountDueTextWidget',
deductible: 'DeductibleWidget',
@ -535,25 +543,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;
@ -561,9 +574,6 @@ export default {
overflow: hidden;
visibility: visible;
}
a {
text-decoration: none;
}
}
:deep(#recycle-fee-label a){

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

3
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: [],