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('', '
- ').replaceAll('', '
')}
`;
+}
+
/**
* @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 = '- String one
- 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;