diff --git a/src/helpers/text-helper.js b/src/helpers/text-helper.js index 51170f7d..220b1d3f 100644 --- a/src/helpers/text-helper.js +++ b/src/helpers/text-helper.js @@ -10,6 +10,17 @@ export function stripRteStyle(stringWithStyleTag) { return stringWithStyleTag.replace(regexExp, ''); } +/** + * @function createOrderedListFromStringOfParagraphs + * @summary + * Returns string with

tags changed to

  • and wrapped in an
      + * @param {string} stringOfParagraphs single string with 1 to N

      tags + * @returns {string} converted string wrapped in an

        + */ +export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) { + return `
          ${stringOfParagraphs.replaceAll('

          ', '

        1. ').replaceAll('

          ', '
        2. ')}
        `; +} + /** * @function toTitleCase * @summary Returns title cased string version of 'text' diff --git a/src/helpers/text-helper.spec.js b/src/helpers/text-helper.spec.js index cfc61dcc..fcb7a88d 100644 --- a/src/helpers/text-helper.spec.js +++ b/src/helpers/text-helper.spec.js @@ -1,4 +1,10 @@ -import { toTitleCase, toDisplayPhoneNumber, formatAddress, formatAmountInDollars } from '@/helpers/text-helper.js'; +import { + toTitleCase, + toDisplayPhoneNumber, + formatAddress, + formatAmountInDollars, + createOrderedListFromStringOfParagraphs +} from '@/helpers/text-helper.js'; describe('text-helper', () => { test.each([ @@ -68,4 +74,12 @@ describe('text-helper', () => { ])('formatAmountInDollars(%s) should return %s', (amount, expected) => { expect(formatAmountInDollars(amount)).toBe(expected); }); + test('returns orderedlist from paragraph string', () => { + // Arrange + const testData = '

        String one

        String two

        '; + const expected = '
        1. String one
        2. String two
        '; + + // Assert + expect(createOrderedListFromStringOfParagraphs(testData)).toBe(expected); + }); }); diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js index 2d074474..3ec6a0be 100644 --- a/src/layouts/coverage-statement/coverage-statement.spec.js +++ b/src/layouts/coverage-statement/coverage-statement.spec.js @@ -27,6 +27,11 @@ jest.mock('@/helpers/cms-content-helper', () => ({ processIfStatements: jest.fn() })); +jest.mock('@/helpers/text-helper', () => ({ + createOrderedListFromStringOfParagraphs: jest.fn(), + formatAmountInDollars: jest.fn() +})); + const SAFELITE_PROVIDER = 'Safelite'; const CANCEL_CLAIM_REF_NAME = 'CancelClaimModal'; diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index cdd0c5c0..136198a2 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -127,7 +127,7 @@ import baseFormMixin from '@/mixins/base-form-mixin.js'; import navigationScenarios from '@/router/router-constants/navigation-scenarios.js'; import bailoutMessage from '@/constants/bailoutMessage'; import widgetFields from '@/constants/cms-widget-fields.js'; -import { formatAmountInDollars } from '@/helpers/text-helper.js'; +import { formatAmountInDollars, createOrderedListFromStringOfParagraphs } from '@/helpers/text-helper.js'; import showIssLoadingModal from '@/helpers/loading-modal-helper'; import { getPriceOfLineItems } from '@/helpers/price-calculator'; import coverageStatuses from '@/constants/coverage-statuses'; @@ -275,10 +275,12 @@ export default { ); }, nextStepsBody() { - return this.getTextFromCmsWithCustomIfStatements( + const cmsText = this.getTextFromCmsWithCustomIfStatements( this.widget.nextStep, widgetFields.CONTENT_GROUP_WIDGET.BODY_TEXT )?.replaceAll('{custom:damage}', this.damageText); + + return createOrderedListFromStringOfParagraphs(cmsText); }, damageText() { const damageString = getDamageString(); @@ -504,6 +506,17 @@ export default { .deductible-text { line-height: 1.5rem; } + :deep ol { + padding: 0; + padding-left: 1.125rem; + padding-right: 1.125rem; + line-height: 1.5rem; + font-size: .875rem; + + li { + margin-bottom: .5rem; + } + } :deep p { line-height: 1.5rem; font-size: 0.875rem;