TNO-1136: User can set toning

app/editor/package.json

@@ -61,7 +61,7 @@
     "redux-logger": "3.0.6",
     "styled-components": "6.1.11",
     "stylis": "4.3.2",
-    "tno-core": "0.1.139"
+    "tno-core": "./tno-core-0.1.139.tgz"
   },
   "devDependencies": {
     "@simbathesailor/use-what-changed": "2.0.0",

app/editor/yarn.lock

@@ -11074,7 +11074,7 @@ __metadata:
     sass-extract-loader: 1.1.0
     styled-components: 6.1.11
     stylis: 4.3.2
-    tno-core: 0.1.139
+    tno-core: ./tno-core-0.1.139.tgz
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -15258,9 +15258,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:0.1.139":
+"tno-core@file:./tno-core-0.1.139.tgz::locator=mmi-editor-app%40workspace%3A.":
   version: 0.1.139
-  resolution: "tno-core@npm:0.1.139"
+  resolution: "tno-core@file:./tno-core-0.1.139.tgz::locator=mmi-editor-app%40workspace%3A."
   dependencies:
     "@elastic/elasticsearch": ^8.13.1
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -15293,7 +15293,7 @@ __metadata:
     styled-components: ^6.1.11
     stylis: ^4.3.2
     yup: ^1.1.1
-  checksum: 92382ad294654dbbb8f8387726b6a96f889ba4d65ea452560dfc6cc9b1fc663ba26152b569e19ee5007067ee1734af1a75a2c06b57c33d3292cf235e2d8c1775
+  checksum: a560860593ae77c9d75a13223b2c123473c685451375346927b7b52506e22fa3a64e4dc57669ef30546e241e22fd87f49652539efbd856718864e5d0e1631133
   languageName: node
   linkType: hard
 

app/subscriber/package.json

@@ -44,7 +44,7 @@
     "sheetjs": "file:packages/xlsx-0.20.1.tgz",
     "styled-components": "6.1.11",
     "stylis": "4.3.2",
-    "tno-core": "0.1.139"
+    "tno-core": "./tno-core-0.1.139.tgz"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "6.4.5",

app/subscriber/src/features/my-reports/edit/content/ContentEditForm.tsx

@@ -215,7 +215,14 @@ export const ContentEditForm = React.forwardRef<HTMLDivElement | null, IContentE
             </Col>
             <Col className="sentiment">
               <Sentiment
-                value={form.content.tonePools.length ? form.content.tonePools[0].value : undefined}
+                value={
+                  form.content.versions?.[userId]?.tone !== undefined &&
+                  form.content.versions?.[userId]?.tone !== null
+                    ? form.content.versions?.[userId]?.tone
+                    : form.content.tonePools.length
+                    ? form.content.tonePools[0].value
+                    : undefined
+                }
                 showValue
               />
             </Col>

app/subscriber/src/features/my-reports/edit/content/stories/ContentForm.tsx

@@ -1,9 +1,11 @@
+import { Form, Formik } from 'formik';
 import React from 'react';
-import { useApp } from 'store/hooks';
+import { useApp, useLookup } from 'store/hooks';
 import { useProfileStore } from 'store/slices';
 import {
   Col,
   ContentTypeName,
+  FormikSentiment,
   IContentModel,
   Loading,
   Show,
@@ -12,6 +14,8 @@ import {
   Wysiwyg,
 } from 'tno-core';
 
+import { sentimentFormSchema } from '../../validation/SentimentFormSchema';
+
 export interface IContentFormProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
   /** The content being edited */
   content?: IContentModel;
@@ -43,20 +47,47 @@ export const ContentForm: React.FC<IContentFormProps> = ({
 }) => {
   const [{ userInfo }] = useApp();
   const [{ impersonate }] = useProfileStore();
+  const [{ tonePools }] = useLookup();
 
   if (!content) return null;
 
   const userId = impersonate?.id ?? userInfo?.id ?? 0;
   const isAV = content.contentType === ContentTypeName.AudioVideo;
-  const versions = content.versions?.[userId] ?? {
-    byline: content.byline,
-    headline: content.headline,
-    summary: '',
-    body: isAV
-      ? content.isApproved && content.body
-        ? content.body
-        : content.summary
-      : content.body,
+
+  const sentiment =
+    content.versions?.[userId]?.tone !== undefined && content.versions?.[userId]?.tone != null
+      ? content.versions?.[userId]?.tone
+      : content.tonePools.length
+      ? content.tonePools[0].value
+      : undefined;
+
+  const versions = {
+    ...content.versions?.[userId],
+    byline: content.versions?.[userId]?.byline ?? content.byline,
+    headline: content.versions?.[userId]?.headline ?? content.headline,
+    summary: content.versions?.[userId]?.summary ?? '',
+    body:
+      content.versions?.[userId]?.body ??
+      (isAV ? (content.isApproved && content.body ? content.body : content.summary) : content.body),
+    tonePools:
+      sentiment !== undefined && sentiment !== null
+        ? [{ value: sentiment, id: tonePools[0].id }]
+        : [],
+  };
+
+  const handleSentimentChange = (newTonePools: any) => {
+    const validTonePools = Array.isArray(newTonePools) ? newTonePools : [];
+    const updatedContent = {
+      ...content,
+      versions: {
+        ...content.versions,
+        [userId]: {
+          ...content.versions?.[userId],
+          tone: validTonePools[0]?.value,
+        },
+      },
+    };
+    onContentChange?.(updatedContent);
   };
 
   return show === 'none' ? null : (
@@ -152,6 +183,19 @@ export const ContentForm: React.FC<IContentFormProps> = ({
             onContentChange?.(values);
           }}
         />
+        <Formik initialValues={versions} validationSchema={sentimentFormSchema} onSubmit={() => {}}>
+          {() => (
+            <Form>
+              <FormikSentiment
+                name="tonePools"
+                options={tonePools}
+                coloredIcon={true}
+                onSentimentChange={handleSentimentChange}
+                required
+              />
+            </Form>
+          )}
+        </Formik>
       </Show>
     </Col>
   );

app/subscriber/src/features/my-reports/edit/validation/SentimentFormSchema.ts

@@ -0,0 +1,9 @@
+import { array, number, object } from 'yup';
+
+export const sentimentFormSchema = object().shape({
+  tonePools: array().of(
+    object().shape({
+      value: number().required('Tone value is required'),
+    }),
+  ),
+});

app/subscriber/src/store/hooks/lookup/useLookup.ts

@@ -23,6 +23,7 @@ import {
   ITopicScoreRuleModel,
   IUserModel,
   StorageKeys,
+  useApiEditorTonePools,
   useApiSubscriberCache,
   useApiSubscriberMinisters,
 } from 'tno-core';
@@ -44,6 +45,7 @@ export const useLookup = (): [ILookupState, ILookupController] => {
   const cache = useApiSubscriberCache();
   const lookups = useApiLookups();
   const ministers = useApiSubscriberMinisters();
+  const tonePools = useApiEditorTonePools();
 
   const controller = React.useMemo(
     () => ({
@@ -156,13 +158,27 @@ export const useLookup = (): [ILookupState, ILookupController] => {
           'lookup',
         );
       },
+      getTonePools: async () => {
+        return await fetchIfNoneMatch<ITonePoolModel[]>(
+          StorageKeys.TonePools,
+          dispatch,
+          (etag) => tonePools.getTonePools(etag),
+          (results) => {
+            const values = results ?? [];
+            store.storeTonePools(values);
+            return values;
+          },
+          true,
+          'lookup',
+        );
+      },
       init: async () => {
         // TODO: Handle failures
         await controller.getLookups();
         store.storeIsReady(true);
       },
     }),
-    [cache, dispatch, lookups, ministers, store],
+    [cache, dispatch, lookups, ministers, tonePools, store],
   );
 
   return [state, controller];

app/subscriber/yarn.lock

@@ -10697,7 +10697,7 @@ __metadata:
     sheetjs: "file:packages/xlsx-0.20.1.tgz"
     styled-components: 6.1.11
     stylis: 4.3.2
-    tno-core: 0.1.139
+    tno-core: ./tno-core-0.1.139.tgz
     typescript: 4.9.5
   languageName: unknown
   linkType: soft
@@ -14729,9 +14729,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tno-core@npm:0.1.139":
+"tno-core@file:./tno-core-0.1.139.tgz::locator=mmi-subscriber-app%40workspace%3A.":
   version: 0.1.139
-  resolution: "tno-core@npm:0.1.139"
+  resolution: "tno-core@file:./tno-core-0.1.139.tgz::locator=mmi-subscriber-app%40workspace%3A."
   dependencies:
     "@elastic/elasticsearch": ^8.13.1
     "@fortawesome/free-solid-svg-icons": ^6.4.2
@@ -14764,7 +14764,7 @@ __metadata:
     styled-components: ^6.1.11
     stylis: ^4.3.2
     yup: ^1.1.1
-  checksum: 92382ad294654dbbb8f8387726b6a96f889ba4d65ea452560dfc6cc9b1fc663ba26152b569e19ee5007067ee1734af1a75a2c06b57c33d3292cf235e2d8c1775
+  checksum: a560860593ae77c9d75a13223b2c123473c685451375346927b7b52506e22fa3a64e4dc57669ef30546e241e22fd87f49652539efbd856718864e5d0e1631133
   languageName: node
   linkType: hard
 

libs/net/entities/Models/ContentVersion.cs

@@ -56,6 +56,10 @@ public class ContentVersion
     /// </summary>
     public bool IsPrivate { get; set; } = false;
 
+    /// <summary>
+    /// get/set - Tone for the content
+    /// </summary>
+    public int? Tone {get;set;}
 
     #endregion
 
@@ -82,6 +86,7 @@ public ContentVersion(Content content, User owner)
         this.Body = content.Body;
         this.SourceUrl = content.SourceUrl;
         this.IsPrivate = content.IsPrivate;
+        this.Tone = content.TonePools.Count > 0 ? (int?)content.TonePools[0].Id : null;
     }
 
     /// <summary>

libs/npm/core/src/components/formik/sentiment/FormikSentiment.tsx

@@ -1,5 +1,6 @@
 import { getIn, useFormikContext } from 'formik';
 import React from 'react';
+import { FaFrown, FaMeh, FaSmile } from 'react-icons/fa';
 
 import FaceFrownOpen from '../../../assets/face-frown-open.svg';
 import FaceGrinWide from '../../../assets/face-grin-wide.svg';
@@ -17,10 +18,14 @@ export interface IFormikSentimentProps<T> {
   label?: string;
   /** Sentiment options. */
   options: ITonePoolModel[];
+  /** Sentiment icon colored */
+  coloredIcon?: boolean;
   /** The name of the default tone pool */
   defaultTonePoolName?: string;
   /** The id of the default tone pool */
   defaultTonePoolId?: number;
+  /** Update upper form */
+  onSentimentChange?: (tonePools: any) => void;
   /** Whether this field is required. */
   required?: boolean;
 }
@@ -34,8 +39,10 @@ export const FormikSentiment = <T extends object>({
   name,
   label = 'Sentiment',
   options,
+  coloredIcon = false,
   defaultTonePoolId,
   defaultTonePoolName = 'Default',
+  onSentimentChange,
   ...rest
 }: IFormikSentimentProps<T>) => {
   const { values, setFieldValue, touched, errors } = useFormikContext<T>();
@@ -44,8 +51,10 @@ export const FormikSentiment = <T extends object>({
     name,
     label,
     options,
+    coloredIcon,
     defaultTonePoolId,
     defaultTonePoolName,
+    onSentimentChange,
     ...rest,
   };
   const defaultTonePool = options.find(
@@ -68,11 +77,23 @@ export const FormikSentiment = <T extends object>({
 
   const determineIndicator = (option: number) => {
     if (option === 5) {
-      return <img alt={option.toString()} src={FaceGrinWide} />;
+      return coloredIcon ? (
+        <FaSmile className="tone-icon" color="#59E9BE" />
+      ) : (
+        <img alt={option.toString()} src={FaceGrinWide} />
+      );
     } else if (option === 0) {
-      return <img alt={option.toString()} src={FaceMeh} />;
+      return coloredIcon ? (
+        <FaMeh className="tone-icon" color="#F1C02D" />
+      ) : (
+        <img alt={option.toString()} src={FaceMeh} />
+      );
     } else if (option === -5) {
-      return <img alt={option.toString()} src={FaceFrownOpen} />;
+      return coloredIcon ? (
+        <FaFrown className="tone-icon" color="#EB8585" />
+      ) : (
+        <img alt={option.toString()} src={FaceFrownOpen} />
+      );
     } else {
       return <span className="blank">&nbsp;</span>;
     }
@@ -92,11 +113,11 @@ export const FormikSentiment = <T extends object>({
               key={option}
               onClick={() => {
                 setActive(option);
-                setFieldValue(
-                  name.toString(),
-                  !!defaultTonePool ? [{ ...defaultTonePool, value: option }] : [],
-                  true,
-                );
+                const updatedTonePools = !!defaultTonePool
+                  ? [{ ...defaultTonePool, value: option }]
+                  : [];
+                setFieldValue(name.toString(), updatedTonePools, true);
+                onSentimentChange?.(updatedTonePools);
               }}
             >
               {option}

libs/npm/core/src/components/formik/sentiment/styled/FormikSentiment.tsx

@@ -50,4 +50,10 @@ export const FormikSentiment = styled.div.attrs<IFormikSentimentProps<any>>(({ r
       color: red;
     }
   }
+
+  .tone-icon {
+    font-size: 1.4rem;
+    margin-bottom: 0rem;
+    margin-left: 0.5rem;
+  }
 `;

libs/npm/core/src/hooks/api/interfaces/IContentVersionModel.ts

@@ -9,4 +9,5 @@ export interface IContentVersionModel extends IAuditColumnsModel {
   page?: string;
   summary?: string;
   body?: string;
+  tone?: number;
 }