feat: activity action plan (M2-7166)

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+max_line_length = 100
+
+[*.md]
+trim_trailing_whitespace = false

package.json

@@ -36,6 +36,7 @@
 		"buffer": "^6.0.3",
 		"date-fns": "^2.29.3",
 		"dayspan": "^1.1.0",
+		"html2canvas": "^1.4.1",
 		"i18next": "^22.0.6",
 		"i18next-browser-languagedetector": "^7.0.1",
 		"launchdarkly-react-client-sdk": "^3.1.0",

src/abstract/lib/constants.ts

@@ -17,4 +17,19 @@ export const supportableResponseTypes = [
   'multiSelectRows',
   'singleSelectRows',
   'sliderRows',
+  'phrasalTemplate',
+];
+
+export const phrasalTemplateCompatibleResponseTypes = [
+  'date',
+  'multiSelect',
+  'numberSelect',
+  'singleSelect',
+  'slider',
+  'text',
+  'time',
+  'timeRange',
+  'multiSelectRows',
+  'singleSelectRows',
+  'sliderRows',
 ];

src/entities/activity/lib/types/item.ts

@@ -32,7 +32,8 @@ export type ActivityItemType =
   | 'audio'
   | 'audioPlayer'
   | 'unsupportable'
-  | 'splashScreen';
+  | 'splashScreen'
+  | 'phrasalTemplate';
 
 export type ButtonsConfig = {
   removeBackButton: boolean;
@@ -97,10 +98,57 @@ export type ResponseValues =
   | SelectorValues
   | AudioPlayerItemValues
   | MultiSelectionRowsItemResponseValues
-  | SliderRowsItemResponseValues;
+  | SliderRowsItemResponseValues
+  | PhrasalTemplateValues;
 
 export type EmptyResponseValues = null;
 
+export interface PhrasalTemplateItem extends ActivityItemBase {
+  responseType: 'phrasalTemplate';
+  config: never;
+  responseValues: PhrasalTemplateValues;
+  answer: DefaultAnswer;
+}
+
+export type PhrasalTemplateValues = {
+  cardTitle: string;
+  phrases: PhrasalTemplatePhrase[];
+};
+
+export type PhrasalTemplatePhrase = {
+  fields: PhrasalTemplateField[];
+  image: string | null;
+};
+
+export type PhrasalTemplateField =
+  | PhrasalTemplateSentenceField
+  | PhrasalTemplateItemResponseField
+  | PhrasalTemplateLineBreakField;
+
+export type PhrasalTemplateSentenceField = {
+  type: 'sentence';
+  text: string;
+};
+
+export type PhrasalTemplateItemResponseField = {
+  type: 'item_response';
+  itemIndex: number;
+  itemName: string;
+  displayMode: PhrasalTemplateItemResponseFieldDisplayMode;
+};
+
+export type PhrasalTemplateLineBreakField = {
+  type: 'line_break';
+};
+
+export type PhrasalTemplateItemResponseFieldDisplayMode =
+  | 'sentence'
+  | 'sentence_option_row'
+  | 'sentence_row_option'
+  | 'bullet_list'
+  | 'bullet_list_option_row'
+  | 'bullet_list_text_row';
+
 export interface TextItem extends ActivityItemBase {
   responseType: 'text';
   config: TextItemConfig;

src/entities/activity/lib/useActionPlanTranslation.ts

@@ -0,0 +1,6 @@
+import { useCustomTranslation } from '~/shared/utils';
+
+export const useActionPlanTranslation = () => {
+  const { t, i18n } = useCustomTranslation({ keyPrefix: 'ActionPlan' });
+  return { t, i18n };
+};

src/entities/activity/lib/usePhrasalTemplateTranslation.ts

@@ -0,0 +1,6 @@
+import { useCustomTranslation } from '~/shared/utils';
+
+export const usePhrasalTemplateTranslation = () => {
+  const { t, i18n } = useCustomTranslation({ keyPrefix: 'PhrasalTemplate' });
+  return { t, i18n };
+};

src/entities/activity/ui/ActivityCardItem.tsx

@@ -47,7 +47,7 @@ export const ActivityCardItem = ({
   return (
     <SliderAnimation step={step} prevStep={prevStep ?? step}>
       <CardItem
-        markdown={questionText}
+        markdown={item.responseType === 'phrasalTemplate' ? null : questionText}
         watermark={watermark}
         isOptional={!isOptionalFlagHidden && (item.config.skippableItem || allowToSkipAllItems)}
         testId="active-item"

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

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+
+import { useXScaledDimension } from './hooks';
+
+import Box from '~/shared/ui/Box';
+
+export const Body = ({ children }: PropsWithChildren) => {
+  const gap = useXScaledDimension(32);
+
+  return (
+    <Box display="flex" flexDirection="column" gap={`${gap}px`} overflow="hidden">
+      {children}
+    </Box>
+  );
+};