From 03cc9e47bbbf53e49eacff89888e23807c43a26d Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Wed, 19 Apr 2023 15:26:34 -0400 Subject: [PATCH] added modal for state specific steering text, code to process conditional logic and custom logic to display full state name. --- src/helpers/cms-content-helper.js | 6 +- .../provider-pref-radio.spec.js | 127 +++++++++ .../provider-pref-radio.vue | 265 ++++++++++++++++++ .../provider-preference.vue | 74 ++--- 4 files changed, 422 insertions(+), 50 deletions(-) create mode 100644 src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.spec.js create mode 100644 src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index a4d6f7d1..36b6dd9c 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -177,11 +177,11 @@ function mapStringToModal(str) { let linkToReplace = str.substring(startIndex, str.length); linkToReplace = linkToReplace.substring(0, linkToReplace.indexOf("}") + 1); - let params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 2, linkToReplace.length -1) + let params = linkToReplace.substring((dynamicStrings.MODAL_LINK).length + 2, linkToReplace.length -1); let splitParams = params.split(","); - let bodyText = '' + splitParams[1] + '' - let returnVal = str.replace(linkToReplace, bodyText) + let bodyText = '' + splitParams[1] + ''; + let returnVal = str.replace(linkToReplace, bodyText); if (returnVal.includes(dynamicStrings.MODAL_LINK)) { returnVal = mapStringToModal(returnVal); diff --git a/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.spec.js b/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.spec.js new file mode 100644 index 00000000..8520a110 --- /dev/null +++ b/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.spec.js @@ -0,0 +1,127 @@ +import { mount } from "@vue/test-utils" +import servicePackageRadio from "./service-package-radio" +import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin" + +describe("service-package-radio.vue", () => { + it("Should include buttonLabel in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }) + + // Act + const outputHtml = wrapper.html() + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"])) + }) + + it("Should include buttonLabelAuxillaryCopy in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }) + + // Act + const outputHtml = wrapper.html() + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelAuxillaryCopy"])) + }) + + it("Should include buttonLabelSubCopy in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }) + + // Act + const outputHtml = wrapper.html() + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabelSubCopy"])) + }) + it("Should include buttonFooterCopy in html", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }) + + // Act + const outputHtml = wrapper.html() + + // Assert + expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonFooterCopy"])) + }) + it("Should get 5 strings from getArrayOfListItemsFromRawCmsCopy when provided with a dashed (x5) buttonBodyCopy", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }) + // Act + const results = wrapper.vm.getArrayOfListItemsFromRawCmsCopy(wrapper.vm.buttonBodyCopy) + + // Assert + expect(results.length).toBe(5) + }) + it("Should get strings from getArrayOfListItemsFromRawCmsCopy without dashes when provided with a dashed buttonBodyCopy", async () => { + // Arrange + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: mockProps, + }, + }) + + // Act + const results = wrapper.vm.getArrayOfListItemsFromRawCmsCopy(wrapper.vm.buttonBodyCopy) + + // Assert + const fileredResults = results.filter((result) => { + return result.includes(" -"); + }) + expect(fileredResults.length).toBe(0) + }) + it("Should get 5 strings from getArrayOfListItemsFromRawCmsCopy when buttonBodyCopy has 6 total dashes, but one is empty ", async () => { + // Arrange + const moddedProps = mockProps + moddedProps["buttonBodyCopy"] = "- buttonBodyCopy test copy - 2 - 3 - 4 - 5 -" + let { wrapper } = setupMocks({ + mountOptionsMockData: { + propsData: moddedProps, + }, + }) + + // Act + const results = wrapper.vm.getArrayOfListItemsFromRawCmsCopy(wrapper.vm.buttonBodyCopy) + + // Assert + expect(results.length).toBe(5) + }) +}) + +const mockProps = { + buttonLabel: 'buttonLabel test copy', + buttonLabelAuxillaryCopy: 'buttonLabelAuxillaryCopy test copy', + buttonLabelSubCopy: 'buttonLabelSubCopy test copy', + buttonBodyCopy: '- buttonBodyCopy test copy - 2 - 3 - 4 - 5', + buttonFooterCopy: 'buttonFooterCopy test copy' +} + +function setupMocks({ mountOptionsMockData = {} }) { + const wrapper = mount(servicePackageRadio, { + ...mountOptionsMockData, + mixins: [inputButtonWrapperMixin] + }) + + return { wrapper } +} \ No newline at end of file diff --git a/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue b/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue new file mode 100644 index 00000000..c32dd9d3 --- /dev/null +++ b/src/layouts/provider-preference/provider-pref-radio/provider-pref-radio.vue @@ -0,0 +1,265 @@ + + + + + \ No newline at end of file diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index 3f8920eb..f8dee673 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -4,40 +4,17 @@
-
-
-
-
-
-
- Wow!! -
- - - + -
-
-
-
+ ref="siteFooter" />
+ -

{{steeringModalHeader}}

-
{{steeringModalBody}}
+
{{steeringModalHeader}}
+
+
{{steeringModalBody}}
+
{{steeringModalBody2}}
+
@@ -60,6 +41,7 @@ import { errorMessages } from "@/constants/error-messages"; import buttonQuestion from "@/digital-components/button-question/button-question"; import contentGroupModal from "@/iss-components/content-group-modal/content-group-modal"; import modal from "@/digital-components/modal/modal.vue" +import { states } from "@/constants/states" // Import Component import baseFormMixin from "@/mixins/base-form-mixin"; @@ -109,25 +91,23 @@ export default { ProviderPreferenceHeaderText(){ return this.getCmsContent("ProviderPreference", "HeaderText"); }, - ProviderPreferenceBodyText(){ - return this.getCmsContent("ProviderPreference", "BodyText"); - }, questionText() { - return this.getCmsContent("ServiceLocationQuestion", "QuestionText"); - }, - answersFromCms() { - return this.getCmsContent("ServiceLocationQuestion", "Answers"); + return this.getCmsContent("ProviderPreference", "SubHeaderText"); }, steeringModalHeader() { - const bodyText = this.getCmsContent("StateSpecificSteeringText", "BodyText"); -  return processIfStatements(bodyText, "custom", this.getStateSpecificText); + let header = this.getCmsContent("StateSteeringModal", "HeaderText"); + return header.replace("{custom:state}", states[this.mainStore.order.customer.address.state]) }, steeringModalBody() { - const bodyText = this.getCmsContent("StateSpecificSteeringText", "BodyText2"); + const bodyText = this.getCmsContent("StateSteeringModal", "BodyText"); +  return processIfStatements(bodyText, "custom", this.getStateSpecificText); + }, + steeringModalBody2() { + const bodyText = this.getCmsContent("StateSteeringModal", "BodyText2");  return processIfStatements(bodyText, "custom", this.getStateSpecificText); }, steeringModalFooter() { - return this.getCmsContent("StateSpecificSteeringText", "FooterText"); + return this.getCmsContent("StateSteeringModal", "FooterText"); } }, methods: { @@ -149,10 +129,15 @@ export default { this.$router.navigate(this.navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, this.$route); } }, - resetDependentState() {}, + closeSteeringModal() { + this.$refs["SteeringModal"].closeModal(); + } }, mounted() { setupModalLinks(this); + if(this.steeringModalBody) { + this.$refs["SteeringModal"].openModal(); + } } }; @@ -160,12 +145,6 @@ export default { #sub-header span{ color: $black; } -.body-text { - color: $darker-gray; - p, li { - margin-bottom: 0.5rem; - } -} .modal-link a{ color: $blue-700; font-size: 14px; @@ -178,4 +157,5 @@ export default { text-align: left; } } +