From 2e27b1fc440616c8ae63387cc6bc097c7596ce80 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Mon, 17 Apr 2023 16:33:09 -0400 Subject: [PATCH 1/3] Added conditional logic for state specific steering --- src/helpers/cms-content-helper.js | 192 ++++++++++++++++++ .../provider-preference.spec.js | 42 +++- .../provider-preference.vue | 30 ++- 3 files changed, 260 insertions(+), 4 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index 656b2b5f..a4d6f7d1 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -141,6 +141,12 @@ function findAndReplaceGlobalStateValues(widgetModel, widgetName) { function processWidgetItemForReplacement(widgetModel, key) { // If we have a string, and it needs to be replaced. if (typeof widgetModel[key] === "string") { + widgetModel[key] = processIfStatements( + widgetModel[key], + dynamicStrings.GLOBAL_STATE, + getStoreValueFromString + ); + if (widgetModel[key].includes(dynamicStrings.GLOBAL_STATE)) { widgetModel[key] = mapStringToState(widgetModel[key]); } @@ -221,6 +227,192 @@ function mapStringToState(str) { return stringBuilder.trimStart(); } + +function getStoreValueFromString(str) { + let storeOrStateObject = useMainStore(); + for (const s of str.split('.')) { + if (s === 'getters') continue; + if (storeOrStateObject[s] != undefined) { + storeOrStateObject = storeOrStateObject[s]; + } else { + return '' + } + } + return storeOrStateObject; +} + +/////////////////////////////////// +// If Statement Processing Logic // +/////////////////////////////////// + +/** +* Recursive function - replaces all instances of if statements from the CMS that utilize the specified ifConditionKeyword +* @param {*} str string - Input string to be processed +* @param {*} ifConditionKeyword string - Defines which if statements to process ex: 'globalState' +* @param {*} replacePlaceholderCallback function - Callback to replace CMS placeholder values +* @returns The processed string +*/ +export function processIfStatements(str, ifConditionKeyword, replacePlaceholderCallback) { + const containsRelevantIfStatement = new RegExp('{if:' + ifConditionKeyword + ':.+?}', 'g').test( + str + ); + //str = str.replace(/\r?\n|\r/g, ''); + + const hasEmbeddedCrLf = /\r?\n|\r/g.test(str); + if (!containsRelevantIfStatement || hasEmbeddedCrLf) { + return str; + } else { + const ifStatementRegexExpression = getIfStatementRegexExpression(); + const ifStatementRegexMatches = [...str.matchAll(ifStatementRegexExpression)]; + const completeIfStatementArray = getAndFlagFirstNonNestedIfStatementWithKeyword( + ifStatementRegexMatches, + ifConditionKeyword + ); + executeIfStatementAndSetProcessedStrings( + completeIfStatementArray, + replacePlaceholderCallback + ); + const reconstructedPostProcessedString = joinProcessedRegexArray(ifStatementRegexMatches); + return processIfStatements( + reconstructedPostProcessedString, + ifConditionKeyword, + replacePlaceholderCallback + ); + } +} + +function getAndFlagFirstNonNestedIfStatementWithKeyword(matches, ifConditionKeyword) { + let index = 0; + for (const match of matches) { + if (match.groups.isIfStatement && match.groups.ifConditionType === ifConditionKeyword) { + let interiorIndex = 0; + let nestedLevel = 0; + let elseStatementIndex = null; + for (const interiorMatch of matches.slice(index + 1)) { + if (interiorMatch.groups.isIfStatement) { + if (interiorMatch.groups.ifConditionType === ifConditionKeyword) { + break; + } else { + nestedLevel++; + } + } else if (interiorMatch.groups.isElseStatement) { + if (!nestedLevel) { + elseStatementIndex = interiorIndex + 1; + } + } else if (interiorMatch.groups.isEndStatement) { + if (nestedLevel) { + nestedLevel--; + } else { + const ifStatementArray = matches.slice(index, index + interiorIndex + 2); + flagMatchesForProcessing(ifStatementArray, elseStatementIndex); + return ifStatementArray; + } + } + interiorIndex++; + } + } + index++; + } + console.error('Did not find end in conditional logic'); + return matches; +} + +function flagMatchesForProcessing(matches, elseStatementIndex) { + matches[0].isFlaggedForProcessing = true; + matches[matches.length - 1].isFlaggedForProcessing = true; + if (elseStatementIndex) { + matches[elseStatementIndex].isFlaggedForProcessing = true; + } +} + +function joinProcessedRegexArray(regexMatches) { + let processedString = ''; + regexMatches.forEach((match) => { + const rawString = match[0]; + processedString += match.groups.processedString ?? rawString; + }); + return processedString; +} + +function executeIfStatementAndSetProcessedStrings(ifStatementArray, replacePlaceholderCallback) { + const ifCondition = replacePlaceholderCallback(ifStatementArray[0].groups.ifCondition); + let isInsideDesiredBlock = ifCondition; + + ifStatementArray.forEach((entry) => { + if (entry.groups.isElseStatement && entry.isFlaggedForProcessing) { + isInsideDesiredBlock = !ifCondition; + } else if (entry.groups.isEndStatement && entry.isFlaggedForProcessing) { + isInsideDesiredBlock = true; + } + setProcessedStringOnEntry(entry, isInsideDesiredBlock); + }); +} + +function setProcessedStringOnEntry(entry, isInsideDesiredBlock) { + if (!isInsideDesiredBlock) { + entry.groups.processedString = ''; + } else { + if (entry.groups.isIfStatement) { + entry.groups.processedString = entry.isFlaggedForProcessing + ? entry.groups.ifTrailingString + : entry[0]; + } else if (entry.groups.isElseStatement) { + entry.groups.processedString = entry.isFlaggedForProcessing + ? entry.groups.elseTrailingString + : entry[0]; + } else { + entry.groups.processedString = entry.isFlaggedForProcessing + ? entry.groups.endTrailingString + : entry[0]; + } + } +} + +function getIfStatementRegexExpression() { + // Matches but does not capture: + // {if:...} or {else} or {end} + const anyLogicOperatorNonCapture = '(?:{(?:end|else|if:.*?)})'; + // NOTE: ? syntax stores the captured match like so: match.groups.variableName + const matchStartOfString = + '(?^.+?)' + // Match and Capture all characters (lazy), cannot be empty + '(?=(?:{if))'; // Looks ahead but does not capture {if + const matchIfOperator = + '(?{if:)' + // Match & Capture {if: + '(?.*?):' + // Match all chars up to and including next ':' - Capture all chars up to ':' + '(?.*?)}' + // Match all chars up to and including next '}' - Capture all chars up to '}' + '(?.*?)' + // Match and Capture all characters (lazy), can be empty + '(?=' + + anyLogicOperatorNonCapture + + ')'; // Looks ahead but does not capture the next logic operator + const matchElseOperator = + '(?{else})' + // Match & Capture {else} + '(?.*?)' + // Match & Capture all characters (lazy), can be empty + '(?=' + + anyLogicOperatorNonCapture + + ')'; // Looks ahead but does not capture the next logic operator + const matchEndOperator = + '(?{end})' + // Match & Capture {end} + '(?.*?)' + // Match & Capture all chracters (lazy), can be empty + '(?=' + + anyLogicOperatorNonCapture + + '|$)'; // Looks ahead but does not capture the next logic operator + // Combine all matching patterns, separated by 'or' pipes + return new RegExp( + matchStartOfString + + '|' + + matchIfOperator + + '|' + + matchElseOperator + + '|' + + matchEndOperator, + 'g' + ); +} + +////////////////////////////////////////// +// End of If Statement Processing Logic // +////////////////////////////////////////// + export function setupModalLinks(context) { context.$nextTick(() => { const elements = document.getElementsByClassName("modal-text") diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js index 24f7cbb2..4a752f7c 100644 --- a/src/layouts/provider-preference/provider-preference.spec.js +++ b/src/layouts/provider-preference/provider-preference.spec.js @@ -74,6 +74,12 @@ const ProviderPreferenceMockData = { return siteFooterWidgetMockData.ForwardButtonText; } } + + if (cmsWidgetName === 'StateSpecificSteeringText') { + if (fieldName === 'BodyText') { + return "{if:custom:OH}ohioText{else}{if:custom:CA}cali's Text{end}{end}"; + } + } if (cmsWidgetName === 'ProviderPreference') { if (fieldName === 'QuestionText') { @@ -106,7 +112,41 @@ const ProviderPreferenceMockData = { return { mockRoute, mockRouter, wrapper }; } describe('provider-preference.vue', () => { - test('"Continue" button is disabled when no Shop Location is selected.', () => { + + test("getStateSpecificText returns true when values match", () => { + const { wrapper } = setupMocks(); + + useMainStore().order.customer.address.state = "ohio"; + const actual = wrapper.vm.getStateSpecificText("Ohio") + + expect(actual).toBeTruthy(); + }); + + test("getStateSpecificText returns false when values do not match", () => { + const { wrapper } = setupMocks(); + + useMainStore().order.customer.address.state = "delaware"; + const actual = wrapper.vm.getStateSpecificText("Ohio") + + expect(actual).toBeFalsy(); + }); + + test("getStateSpecificText should return correct value for state", () => { + const { wrapper } = setupMocks(); + useMainStore().order.customer.address.state = "ca"; + + let actual = wrapper.vm.steeringModalHeader; + + expect(actual).toBe("cali's Text"); + + useMainStore().order.customer.address.state = "oH"; + + actual = wrapper.vm.steeringModalHeader; + + expect(actual).toBe("ohioText"); + }); + + test('"Continue" button is disabled when no Shop Location is selected.', () => { const { wrapper } = setupMocks(); const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue index f4064ffa..3f8920eb 100644 --- a/src/layouts/provider-preference/provider-preference.vue +++ b/src/layouts/provider-preference/provider-preference.vue @@ -10,6 +10,7 @@
+ Wow!!
+ +

{{steeringModalHeader}}

+
{{steeringModalBody}}
+ + + \ 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; } } + From 4fd87e545a598b6dc3dd2b5a65f76a61f128c756 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Wed, 19 Apr 2023 15:50:07 -0400 Subject: [PATCH 3/3] skipping some tests for functionality that was removed but will be added back in on SSR-405. Card was noted. --- .../provider-pref-radio.spec.js | 8 ++++---- .../provider-preference.spec.js | 19 +++++++++++-------- 2 files changed, 15 insertions(+), 12 deletions(-) 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 index 8520a110..1112ff29 100644 --- 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 @@ -1,8 +1,8 @@ import { mount } from "@vue/test-utils" -import servicePackageRadio from "./service-package-radio" +import providerPrefRadio from "./provider-pref-radio" import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin" -describe("service-package-radio.vue", () => { +describe.skip("provider-pref-radio.vue", () => { it("Should include buttonLabel in html", async () => { // Arrange let { wrapper } = setupMocks({ @@ -13,7 +13,7 @@ describe("service-package-radio.vue", () => { // Act const outputHtml = wrapper.html() - + console.log(outputHtml); // Assert expect(outputHtml).toEqual(expect.stringContaining(mockProps["buttonLabel"])) }) @@ -118,7 +118,7 @@ const mockProps = { } function setupMocks({ mountOptionsMockData = {} }) { - const wrapper = mount(servicePackageRadio, { + const wrapper = mount(providerPrefRadio, { ...mountOptionsMockData, mixins: [inputButtonWrapperMixin] }) diff --git a/src/layouts/provider-preference/provider-preference.spec.js b/src/layouts/provider-preference/provider-preference.spec.js index 4a752f7c..a0623ae0 100644 --- a/src/layouts/provider-preference/provider-preference.spec.js +++ b/src/layouts/provider-preference/provider-preference.spec.js @@ -75,9 +75,9 @@ const ProviderPreferenceMockData = { } } - if (cmsWidgetName === 'StateSpecificSteeringText') { + if (cmsWidgetName === 'StateSteeringModal') { if (fieldName === 'BodyText') { - return "{if:custom:OH}ohioText{else}{if:custom:CA}cali's Text{end}{end}"; + return "{if:custom:OH}ohioText{end}{if:custom:CA}cali's Text{end}"; } } @@ -135,24 +135,25 @@ describe('provider-preference.vue', () => { const { wrapper } = setupMocks(); useMainStore().order.customer.address.state = "ca"; - let actual = wrapper.vm.steeringModalHeader; + let actual = wrapper.vm.steeringModalBody; expect(actual).toBe("cali's Text"); useMainStore().order.customer.address.state = "oH"; - actual = wrapper.vm.steeringModalHeader; + actual = wrapper.vm.steeringModalBody; expect(actual).toBe("ohioText"); }); - test('"Continue" button is disabled when no Shop Location is selected.', () => { + test.skip('"Continue" button is disabled when no Shop Location is selected.', () => { const { wrapper } = setupMocks(); const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); expect(continueButton.attributes()['aria-disabled']).toBe('true'); }); - test('"Continue" button is enabled after a Shop Location is selected.', async () => { + + test.skip('"Continue" button is enabled after a Shop Location is selected.', async () => { const { wrapper } = setupMocks(); const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' }); @@ -167,7 +168,9 @@ describe('provider-preference.vue', () => { const continueButton = wrapper.get('[data-test-id="site-footer-main-button"]'); expect(continueButton.attributes()['aria-disabled']).toBe('false'); }); - test('Select "Schedule with Safelite" then click "Continue". Navigates to "service-location" page.', async () => { + + + test.skip('Select "Schedule with Safelite" then click "Continue". Navigates to "service-location" page.', async () => { const { mockRoute, mockRouter, wrapper } = setupMocks(); const ProviderPreferenceWrapper = wrapper.findComponent({ name: 'provider-preference' }); @@ -190,7 +193,7 @@ describe('provider-preference.vue', () => { */ }); - test('Click the back button, trigger navigate function from Vue Router with CLICKED_BACK parameter.', async () => { + test.skip('Click the back button, trigger navigate function from Vue Router with CLICKED_BACK parameter.', async () => { const { mockRoute, mockRouter, wrapper } = setupMocks(); await wrapper.get('[data-test-id="site-footer-back-button"]').trigger('click');