Update to convert p tags to li tags

wrapped inside an ol

src/helpers/text-helper.js

@@ -10,6 +10,17 @@ export function stripRteStyle(stringWithStyleTag) {
     return stringWithStyleTag.replace(regexExp, '');
 }
 
+/**
+ * @function createOrderedListFromStringOfParagraphs
+ * @summary
+ *  Returns string with <p> tags changed to <li> and wrapped in an <ol>
+ * @param {string} stringOfParagraphs single string with 1 to N <p> tags
+ * @returns {string} converted string wrapped in an <ol>
+ */
+export function createOrderedListFromStringOfParagraphs(stringOfParagraphs) {
+    return `<ol>${stringOfParagraphs.replaceAll('<p>', '<li>').replaceAll('</p>', '</li>')}</ol>`;
+}
+
 /**
  * @function toTitleCase
  * @summary Returns title cased string version of 'text'

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 = '<p>String one</p><p>String two</p>';
+        const expected = '<ol><li>String one</li><li>String two</li></ol>';
+
+        // Assert
+        expect(createOrderedListFromStringOfParagraphs(testData)).toBe(expected);
+    });
 });

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';
 

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;