feat: add Action Plan support for paragraphText

src/abstract/lib/constants.ts

@@ -27,6 +27,7 @@ export const phrasalTemplateCompatibleResponseTypes = [
   'singleSelect',
   'slider',
   'text',
+  'paragraphText',
   'time',
   'timeRange',
   'multiSelectRows',

src/entities/activity/ui/items/ActionPlan/Document.type.ts

@@ -49,10 +49,19 @@ export type LineBreakPageComponent = BasePageComponent & {
   componentType: 'line_break';
 };
 
+/**
+ * Newline is a special component that is used to force a new line in the document, used when
+ * rendering the `paragraphText` item type.
+ */
+export type NewlinePageComponent = BasePageComponent & {
+  componentType: 'newline';
+};
+
 export type PageComponent =
   | SentencePageComponent
   | ItemResponsePageComponent
-  | LineBreakPageComponent;
+  | LineBreakPageComponent
+  | NewlinePageComponent;
 
 export type DocumentData = {
   imageUrlByPhraseId: Record<string, string>;

src/entities/activity/ui/items/ActionPlan/Phrase.tsx

@@ -42,7 +42,7 @@ export const Phrase = ({
             (isLastOnPage && componentIndex === pageComponents.length - 1)
           ) {
             // Remove leading and trailing line-break components.
-            if (component.componentType !== 'line_break') {
+            if (component.componentType !== 'line_break' && component.componentType !== 'newline') {
               acc.push(component);
             }
           } else {
@@ -60,7 +60,10 @@ export const Phrase = ({
     let previousComponentType: PageComponent['componentType'] | undefined;
     phraseComponents.forEach((component, componentIndex) => {
       const componentType = component.componentType;
-      const isAtStart = componentIndex === 0 || previousComponentType === 'line_break';
+      const isAtStart =
+        componentIndex === 0 ||
+        previousComponentType === 'line_break' ||
+        previousComponentType === 'newline';
 
       if (componentType === 'sentence') {
         rendered.push(<TextSegment text={component.text} isAtStart={isAtStart} />);
@@ -80,6 +83,8 @@ export const Phrase = ({
         rendered.push(<ResponseSegment itemResponse={itemResponse} isAtStart={isAtStart} />);
       } else if (componentType === 'line_break') {
         rendered.push(<Box component="hr" sx={{ m: 0, height: 32, border: 'none' }} />);
+      } else if (componentType === 'newline') {
+        rendered.push(<br />);
       }
 
       previousComponentType = componentType;

src/entities/activity/ui/items/ActionPlan/pageComponent.ts

@@ -8,6 +8,7 @@ import {
   IdentifiablePhrasalTemplatePhrase,
   LineBreakPageComponent,
   ListItemResponsePageComponent,
+  NewlinePageComponent,
   PageComponent,
   SentencePageComponent,
   TextItemResponsePageComponent,
@@ -89,7 +90,7 @@ export const buildPageComponents = (
           }
 
           let valueItems: string[];
-          if (fieldPhrasalData.type === 'array') {
+          if (fieldPhrasalDataType === 'array') {
             valueItems = isAnswersSkipped(fieldPhrasalData.values)
               ? [t('questionSkipped')]
               : fieldPhrasalData.values.map(transformValue);
@@ -158,6 +159,28 @@ export const buildPageComponents = (
               items: valueItems,
             };
             components.push(component);
+          } else if (fieldPhrasalData.context.itemResponseType === 'paragraphText') {
+            valueItems
+              .flatMap((item) => item.split(/\r?\n/))
+              .forEach((text, index) => {
+                if (index > 0) {
+                  const component: NewlinePageComponent = {
+                    phraseIndex,
+                    phraseId: phrase.id,
+                    componentType: 'newline',
+                  };
+                  components.push(component);
+                }
+
+                const component: TextItemResponsePageComponent = {
+                  phraseIndex,
+                  phraseId: phrase.id,
+                  componentType: 'item_response',
+                  itemResponseType: 'text',
+                  text: text || ' ', // Preserve empty lines
+                };
+                components.push(component);
+              });
           } else {
             const component: TextItemResponsePageComponent = {
               phraseIndex,
@@ -317,7 +340,7 @@ export const deepDivideComponents = (
         }
       }
     } else {
-      // Line-break items don't have "content". So just divide at components level.
+      // Line-break and newline items don't have "content". So just divide at components level.
       return divideComponents(components, inclusiveComponentEnd);
     }
   }

src/entities/activity/ui/items/ActionPlan/phrasalData.test.ts

@@ -149,6 +149,15 @@ describe('Action Plan', () => {
       expect(data.item).toHaveProperty('context.itemResponseType', 'text');
     });
 
+    it('should extract data from `paragraphText` activity type', () => {
+      const data = extractActivitiesPhrasalData([newTextItem('item', ['oh hai'])]);
+
+      expect(data).toHaveProperty('item');
+      expect(data.item).toHaveProperty('type', 'array');
+      expect(data.item).toHaveProperty('values.0', 'oh hai');
+      expect(data.item).toHaveProperty('context.itemResponseType', 'text');
+    });
+
     it('should extract data from `singleSelect` activity type', () => {
       const data = extractActivitiesPhrasalData([
         newSingleSelectItem('item', ['1'], ['one', 'two', 'three']),

src/entities/activity/ui/items/ActionPlan/phrasalData.ts

@@ -25,8 +25,6 @@ type ActivityPhrasalBaseData<
 
 type ActivityPhrasalArrayFieldData = ActivityPhrasalBaseData<'array', string[]>;
 
-type ActivityPhrasalParagraphFieldData = ActivityPhrasalBaseData<'paragraph', string[]>;
-
 type ActivityPhrasalItemizedArrayValue = Record<number, string[]>;
 
 type ActivityPhrasalIndexedArrayFieldData = ActivityPhrasalBaseData<
@@ -49,8 +47,7 @@ type ActivityPhrasalMatrixFieldData = ActivityPhrasalBaseData<'matrix', Activity
 type ActivityPhrasalData =
   | ActivityPhrasalArrayFieldData
   | ActivityPhrasalIndexedArrayFieldData
-  | ActivityPhrasalMatrixFieldData
-  | ActivityPhrasalParagraphFieldData;
+  | ActivityPhrasalMatrixFieldData;
 
 export type ActivitiesPhrasalData = Record<string, ActivityPhrasalData>;
 
@@ -77,42 +74,36 @@ export const extractActivitiesPhrasalData = (items: ItemRecord[]): ActivitiesPhr
       };
       fieldData = dateFieldData;
     } else if (item.responseType === 'time' || item.responseType === 'timeRange') {
-      const dateFieldData: ActivityPhrasalArrayFieldData = {
+      const timeFieldData: ActivityPhrasalArrayFieldData = {
         type: 'array',
         values: item.answer
           .map((value) => new Date(value))
           .filter((value) => !!value)
           .map((value) => formatToDtoTime(value)),
         context: fieldDataContext,
       };
-      fieldData = dateFieldData;
+      fieldData = timeFieldData;
     } else if (
       item.responseType === 'numberSelect' ||
       item.responseType === 'slider' ||
-      item.responseType === 'text'
+      item.responseType === 'text' ||
+      item.responseType === 'paragraphText'
     ) {
-      const dateFieldData: ActivityPhrasalArrayFieldData = {
+      const textFieldData: ActivityPhrasalArrayFieldData = {
         type: 'array',
         values: item.answer.map((value) => `${value || ''}`),
         context: fieldDataContext,
       };
-      fieldData = dateFieldData;
-    } else if (item.responseType === 'paragraphText') {
-      const dateFieldData: ActivityPhrasalParagraphFieldData = {
-        type: 'paragraph',
-        values: item.answer.map((value) => value || ''),
-        context: fieldDataContext,
-      };
-      fieldData = dateFieldData;
+      fieldData = textFieldData;
     } else if (item.responseType === 'singleSelect' || item.responseType === 'multiSelect') {
-      const dateFieldData: ActivityPhrasalArrayFieldData = {
+      const selectFieldData: ActivityPhrasalArrayFieldData = {
         type: 'array',
         values: item.answer
           .map((value) => item.responseValues.options[parseInt(value, 10)]?.text)
           .filter((value) => !!value),
         context: fieldDataContext,
       };
-      fieldData = dateFieldData;
+      fieldData = selectFieldData;
     } else if (item.responseType === 'multiSelectRows') {
       const byRow = item.responseValues.rows.map<ActivityPhrasalIndexedMatrixValue>(
         (row, rowIndex) => {
@@ -143,12 +134,12 @@ export const extractActivitiesPhrasalData = (items: ItemRecord[]): ActivitiesPhr
         },
       );
 
-      const dateFieldData: ActivityPhrasalMatrixFieldData = {
+      const selectFieldData: ActivityPhrasalMatrixFieldData = {
         type: 'matrix',
         values: { byRow, byColumn },
         context: fieldDataContext,
       };
-      fieldData = dateFieldData;
+      fieldData = selectFieldData;
     } else if (item.responseType === 'singleSelectRows') {
       const byRow = item.responseValues.rows.map<ActivityPhrasalIndexedMatrixValue>(
         (row, rowIndex) => {
@@ -171,25 +162,25 @@ export const extractActivitiesPhrasalData = (items: ItemRecord[]): ActivitiesPhr
         },
       );
 
-      const dateFieldData: ActivityPhrasalMatrixFieldData = {
+      const selectFieldData: ActivityPhrasalMatrixFieldData = {
         type: 'matrix',
         values: { byRow, byColumn },
         context: fieldDataContext,
       };
-      fieldData = dateFieldData;
+      fieldData = selectFieldData;
     } else if (item.responseType === 'sliderRows') {
       (fieldDataContext as ActivityPhrasalDataSliderRowContext).maxValues =
         item.responseValues.rows.map(({ maxValue }) => maxValue);
 
-      const dateFieldData: ActivityPhrasalIndexedArrayFieldData = {
+      const sliderRowsFieldData: ActivityPhrasalIndexedArrayFieldData = {
         type: 'indexed-array',
         values: item.answer.reduce((acc, answerValue, answerIndex) => {
           acc[answerIndex] = [`${answerValue || ''}`];
           return acc;
         }, {} as ActivityPhrasalItemizedArrayValue),
         context: fieldDataContext,
       };
-      fieldData = dateFieldData;
+      fieldData = sliderRowsFieldData;
     }
 
     if (fieldData) {