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

Merge pull request #1317 from Safelite/feature/CSR-1373

Browse source 
Feature/csr 1373
This commit is contained in:
chloeherdsafelite 2023-08-23 09:14:26 -04:00 committed by GitHub
commit 738f835397
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 22 additions and 359 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

150
src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.spec.js
View file

@ -1,150 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import customerDetailsModalQuestion from "@/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question";
const testConstants = {
previousCustomerValues: {
firstName: "First",
lastName: "Last",
emailAddress: "builddigitaltest@safelite.com",
phoneNumber: "111-111-1111",
isSmsOptIn: false,
},
newValues: {
firstName: "New First",
lastName: "New Last",
emailAddress: "builddigitaltest2@safelite.com",
phoneNumber: "222-222-2222",
isSmsOptIn: true,
},
};
let cmsContent;
describe("Customer Details Modal", () => {
beforeEach(() => {
cmsContent = {};
});
describe("Submit", () => {
test("Should push to store if a field has changed", async () => {
// Arrange
let props = generateDefaultProps();
const { wrapper } = setupMocks({
propsData: props,
});
// Act
wrapper.vm.onModalOpened();
wrapper.vm.firstName = testConstants.newValues.firstName;
await wrapper.vm.setContactDetails();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled();
expect(wrapper.vm.closeModal).toHaveBeenCalled();
});
test("Should not push to store if no fields have changed", async () => {
// Arrange
let props = generateDefaultProps();
const { wrapper } = setupMocks({
propsData: props,
});
// Act
wrapper.vm.onModalOpened();
await wrapper.vm.setContactDetails();
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.dispatchStoreAction).not.toHaveBeenCalled();
expect(wrapper.vm.closeModal).toHaveBeenCalled();
});
});
describe("Default values", () => {
test("Should populate on open", () => {
// Arrange
let props = generateDefaultProps();
const { wrapper } = setupMocks({
propsData: props,
});
// Act
wrapper.vm.onModalOpened();
// Assert
expect(wrapper.vm.firstName).toBe(testConstants.previousCustomerValues.firstName);
expect(wrapper.vm.lastName).toBe(testConstants.previousCustomerValues.lastName);
expect(wrapper.vm.emailAddress).toBe(testConstants.previousCustomerValues.emailAddress);
expect(wrapper.vm.phoneNumber).toBe(testConstants.previousCustomerValues.phoneNumber);
expect(wrapper.vm.isSmsOptIn).toBe(testConstants.previousCustomerValues.isSmsOptIn);
});
test("Should replace old values on open", async () => {
// Arrange
let props = generateDefaultProps();
const { wrapper } = setupMocks({
propsData: props,
});
// Act
wrapper.vm.firstName = testConstants.newValues.firstName;
wrapper.vm.lastName = testConstants.newValues.lastName;
wrapper.vm.emailAddress = testConstants.newValues.emailAddress;
wrapper.vm.phoneNumber = testConstants.newValues.phoneNumber;
wrapper.vm.isSmsOptIn = testConstants.newValues.isSmsOptIn;
wrapper.vm.onModalOpened();
// Assert
expect(wrapper.vm.firstName).toBe(testConstants.previousCustomerValues.firstName);
expect(wrapper.vm.lastName).toBe(testConstants.previousCustomerValues.lastName);
expect(wrapper.vm.emailAddress).toBe(testConstants.previousCustomerValues.emailAddress);
expect(wrapper.vm.phoneNumber).toBe(testConstants.previousCustomerValues.phoneNumber);
expect(wrapper.vm.isSmsOptIn).toBe(testConstants.previousCustomerValues.isSmsOptIn);
});
});
});
function generateDefaultProps() {
return {
previousCustomerValues: {
firstName: testConstants.previousCustomerValues.firstName,
lastName: testConstants.previousCustomerValues.lastName,
emailAddress: testConstants.previousCustomerValues.emailAddress,
phoneNumber: testConstants.previousCustomerValues.phoneNumber,
isSmsOptIn: testConstants.previousCustomerValues.isSmsOptIn,
},
};
}
function setupMocks(customMountOptions) {
const mountOptions = getMountOptions(customMountOptions);
const mockMixin = {
methods: {
getCmsContent: jest.fn((widgetName, cmsFieldName) => {
return cmsContent?.[widgetName]?.[cmsFieldName] ?? "";
}),
},
};
mountOptions.global.mixins = [mockMixin];
const wrapper = shallowMount(customerDetailsModalQuestion, mountOptions);
wrapper.vm.setCmsContent = jest.fn();
wrapper.vm.openModal = jest.fn();
wrapper.vm.closeModal = jest.fn();
wrapper.vm.dispatchStoreAction = jest.fn();
return { wrapper };
}

148
src/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue
View file

@ -1,148 +0,0 @@
<template>
<transition name="fade" mode="out-in">
<div class="customer-details-question">
<modal
ref="CustomerDetailsModal"
headerText="Contact details"
footerButtonText="Save contact details"
:onModalOpenedCallback="onModalOpened"
:onModalClosedCallback="onModalClosed"
@isModalOpened="setModalStatus"
@footer-button-event="setContactDetails">
<template v-if="isModalOpened">
<textboxQuestion
class="mb-4"
cmsWidgetName="CustomerFirstNameWidget"
v-model="firstName"
ref="firstName"
customInputId="firstName"
validation-rules="first-name-required" />
<textboxQuestion
class="mb-4"
cmsWidgetName="CustomerLastNameWidget"
v-model="lastName"
ref="lastName"
customInputId="lastName"
validation-rules="last-name-required" />
<textboxQuestion
class="mb-4"
cmsWidgetName="CustomerEmailWidget"
v-model="emailAddress"
ref="emailAddress"
customInputId="emailAddress"
validation-rules="email-address-required|email-address-format" />
<phoneNumberQuestion
class="mb-4"
cmsWidgetName="CustomerPhoneWidget"
v-model="phoneNumber"
ref="phoneNumber"
isRequired
validation-rules="phone-number-required" />
<checkboxQuestion
class="mb-5"
cmsWidgetName="CustomerTextMeWidget"
v-model="isSmsOptIn" />
<textBlock cmsWidgetName="CustomerTextDisclaimerWidget" typeStyle="caption" />
</template>
</modal>
</div>
</transition>
</template>
<script>
import modal from "@/digital-components/modal/modal";
import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question";
import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question";
import textBlock from "@/digital-components/text-block/text-block";
import { errorMessages } from "@/constants/error-messages";
import { required, regex } from "@/helpers/validation-rules";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("first-name-required", required(errorMessages.FIRST_NAME_REQUIRED));
defineRule("last-name-required", required(errorMessages.LAST_NAME_REQUIRED));
defineRule("phone-number-required", required(errorMessages.PHONE_REQUIRED));
defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
defineRule(
"email-address-format",
regex(
/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
errorMessages.EMAIL_ADDRESS_FORMAT
)
);
export default {
name: "customer-details-modal-question",
data() {
return {
isModalOpened: false,
firstName: "",
lastName: "",
emailAddress: "",
phoneNumber: "",
isSmsOptIn: false,
};
},
props: {
previousCustomerValues: Object,
},
computed: {
modal() {
return this.$refs.CustomerDetailsModal;
},
haveCustomerDetailsChanged() {
return (
this.firstName !== this.previousCustomerValues?.firstName ||
this.lastName !== this.previousCustomerValues?.lastName ||
this.emailAddress !== this.previousCustomerValues?.emailAddress ||
this.phoneNumber !== this.previousCustomerValues?.phoneNumber ||
this.isSmsOptIn !== this.previousCustomerValues?.isSmsOptIn
);
},
},
methods: {
openModal() {
this.modal.openModal();
},
closeModal() {
this.modal.closeModal();
},
onModalOpened() {
this.firstName = this.previousCustomerValues?.firstName ?? "";
this.lastName = this.previousCustomerValues?.lastName ?? "";
this.emailAddress = this.previousCustomerValues?.emailAddress ?? "";
this.phoneNumber = this.previousCustomerValues?.phoneNumber ?? "";
this.isSmsOptIn = this.previousCustomerValues?.isSmsOptIn ?? false;
},
onModalClosed() {},
setModalStatus(isOpened) {
this.isModalOpened = isOpened;
},
async setContactDetails() {
if (this.haveCustomerDetailsChanged) {
await this.dispatchStoreAction(
this.storeActions.SAVE_CUSTOMER_DETAILS,
{
firstName: this.firstName,
lastName: this.lastName,
emailAddress: this.emailAddress,
phoneNumber: this.phoneNumber,
isSmsOptIn: this.isSmsOptIn,
},
false
);
}
this.closeModal();
},
},
components: {
modal,
textboxQuestion,
phoneNumberQuestion,
checkboxQuestion,
textBlock,
},
};
</script>

61
src/layouts/review/review-sections/customer-review/customer-review.spec.js
View file

@ -9,11 +9,7 @@ const testConstants = {
text: "Header",
},
sms: {
template: "Test {custom:smsOptInJoiner}",
expected: {
ifTrue: "Test in to",
ifFalse: "Test out of",
},
text: "Sms",
},
},
customer: {
@ -27,7 +23,7 @@ const testConstants = {
fullName: "First Last",
phoneNumber: "111-111-1111",
emailAddress: "builddigitaltest@safelite.com",
smsOptIn: "Test out of",
smsOptIn: "Sms",
},
};
@ -38,7 +34,7 @@ describe("Customer Review Block", () => {
cmsContent = {
CustomerWidget: {
HeaderText: testConstants.cms.header.text,
SubheaderText: testConstants.cms.sms.template,
SubheaderText: testConstants.cms.sms.text,
},
};
});
@ -58,52 +54,19 @@ describe("Customer Review Block", () => {
expect(wrapper.vm.header).toEqual(testConstants.cms.header.text);
});
describe("SMS Opt In Text", () => {
test("Should render correctly when opt in is true:", async () => {
// Arrange
let props = generateDefaultProps();
props.customer.isSmsOptIn = true;
test("Should display sms text from cms", async () => {
// Arrange
let props = generateDefaultProps();
const { wrapper } = setupMocks({
propsData: props,
});
// Act
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.expected.ifTrue);
const { wrapper } = setupMocks({
propsData: props,
});
test("Should render correctly when opt in is false:", async () => {
// Arrange
let props = generateDefaultProps();
props.customer.isSmsOptIn = false;
const { wrapper } = setupMocks({
propsData: props,
});
// Act
await wrapper.vm.$nextTick();
// Act
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.expected.ifFalse);
});
test("Should render correctly when opt in is null:", async () => {
// Arrange
let props = generateDefaultProps();
props.customer.isSmsOptIn = null;
const { wrapper } = setupMocks({
propsData: props,
});
// Act
await wrapper.vm.$nextTick();
// Assert
expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.expected.ifFalse);
});
// Assert
expect(wrapper.vm.smsOptIn).toEqual(testConstants.cms.sms.text);
});
test("Should render correct display content", async () => {

5
src/layouts/review/review-sections/customer-review/customer-review.vue
View file

@ -36,10 +36,7 @@ export default {
return this.customer?.phoneNumber;
},
smsOptIn() {
const rawCmsText = this.getCmsContent(this.cmsWidgetName, "SubheaderText");
const joinerText = this.customer?.isSmsOptIn ? "in to" : "out of";
return rawCmsText.replace("{custom:smsOptInJoiner}", joinerText);
return this.getCmsContent(this.cmsWidgetName, "SubheaderText");
},
},
components: {

12
src/layouts/review/review.vue
View file

@ -89,10 +89,6 @@
<hr class="my-0" />
</div>
<customerDetailsModalQuestion
ref="customerDetailsModalQuestion"
:previousCustomerValues="customerInfo" />
<funnelFooter
cmsWidgetName="FunnelFooterWidget"
@back-clicked="backButtonAction"
@ -115,8 +111,6 @@ import serviceLocationReview from "@/layouts/review/review-sections/service-loca
import scheduleReview from "@/layouts/review/review-sections/schedule-review/schedule-review";
import customerReview from "@/layouts/review/review-sections/customer-review/customer-review";
import customerDetailsModalQuestion from "@/layouts/review/review-sections/customer-review/customer-details-modal-question/customer-details-modal-question.vue";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
@ -190,7 +184,10 @@ export default {
);
},
editCustomerDetails() {
this.$refs.customerDetailsModalQuestion.openModal();
this.$router.navigateWithoutSaving(
this.navigationScenarios.CLICKED_CUSTOMER_EDIT,
this.$route
);
},
},
computed: {
@ -234,7 +231,6 @@ export default {
serviceLocationReview,
scheduleReview,
customerReview,
customerDetailsModalQuestion,
},
};
</script>

1
src/router/router-constants/navigation-scenarios.js
View file

@ -46,6 +46,7 @@ const navigationScenarios = {
CLICKED_SERVICE_PACKAGE_EDIT: "CLICKED_SERVICE_PACKAGE_EDIT",
CLICKED_SERVICE_LOCATION_EDIT: "CLICKED_SERVICE_LOCATION_EDIT",
CLICKED_SCHEDULE_EDIT: "CLICKED_SCHEDULE_EDIT",
CLICKED_CUSTOMER_EDIT: "CLICKED_CUSTOMER_EDIT",
};
export { navigationScenarios };

4
src/router/router-constants/routing-table.js
View file

@ -441,6 +441,10 @@ const routingTable = function (store) {
scenario: navigationScenarios.CLICKED_SCHEDULE_EDIT,
destinationFmgPageValue: fmgPageValues.SCHEDULE,
},
{
scenario: navigationScenarios.CLICKED_CUSTOMER_EDIT,
destinationFmgPageValue: fmgPageValues.CUSTOMER_DETAILS,
},
],
},
];