feat(handler): add seen by applicant in the messaging bar (#2989)

* chore: add translation * chore: expose seen_by_applicant * feat: message has seen by applicant check mark and text * fix: do not display ahjo ui button in production
City-of-Helsinki · Jun 3, 2024 · c4eca38 · c4eca38
1 parent cbcf483
commit c4eca38
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 16 deletions.
diff --git a/backend/benefit/messages/serializers.py b/backend/benefit/messages/serializers.py
@@ -23,6 +23,7 @@ class Meta:
             "modified_at",
             "content",
             "message_type",
+            "seen_by_applicant",
         ]
 
     # An applicant is only allowed to send a message if application is in one of these statuses

diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
@@ -46,7 +46,8 @@
     "send": "Lähetä",
     "save": "Tallenna",
     "close": "Sulje",
-    "noMessages": "Ei viestejä"
+    "noMessages": "Ei viestejä",
+    "seenByUser": "Viesti luettu"
   },
   "notifications": {
     "accepted": {

diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json
@@ -46,7 +46,8 @@
     "send": "Lähetä",
     "save": "Tallenna",
     "close": "Sulje",
-    "noMessages": "Ei viestejä"
+    "noMessages": "Ei viestejä",
+    "seenByUser": "Viesti luettu"
   },
   "notifications": {
     "accepted": {

diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json
@@ -46,7 +46,8 @@
     "send": "Lähetä",
     "save": "Tallenna",
     "close": "Sulje",
-    "noMessages": "Ei viestejä"
+    "noMessages": "Ei viestejä",
+    "seenByUser": "Viesti luettu"
   },
   "notifications": {
     "accepted": {

diff --git a/frontend/benefit/handler/src/components/header/Header.tsx b/frontend/benefit/handler/src/components/header/Header.tsx
@@ -35,7 +35,11 @@ const Header: React.FC = () => {
   return (
     <BaseHeader
       title={t('common:appName')}
-      customItems={[<TemporaryAhjoModeSwitch />]}
+      customItems={[
+        process.env.NEXT_PUBLIC_SENTRY_ENVIRONMENT !== 'production' ? (
+          <TemporaryAhjoModeSwitch />
+        ) : null,
+      ]}
       titleUrl={ROUTES.HOME}
       skipToContentLabel={t('common:header.linkSkipToContent')}
       menuToggleAriaLabel={t('common:header.menuToggleAriaLabel')}

diff --git a/frontend/benefit/handler/src/components/sidebar/Messages.tsx b/frontend/benefit/handler/src/components/sidebar/Messages.tsx
@@ -41,6 +41,10 @@ const Messages: React.FC<ComponentProps> = ({ data, variant, withScroll }) => {
           variant={variant}
           alignRight={message.messageType === MESSAGE_TYPES.HANDLER_MESSAGE}
           wrapAsColumn
+          seenByApplicant={
+            message.messageType === MESSAGE_TYPES.HANDLER_MESSAGE &&
+            message.seenByApplicant
+          }
         />
       ))}
       {data.length === 0 && (

diff --git a/frontend/benefit/shared/src/types/application.d.ts b/frontend/benefit/shared/src/types/application.d.ts
@@ -113,6 +113,7 @@ export type MessageData = {
   content: string;
   message_type: MESSAGE_TYPES;
   sender?: string;
+  seen_by_applicant?: boolean;
 };
 
 export type Message = {
@@ -122,6 +123,7 @@ export type Message = {
   content: string;
   messageType: MESSAGE_TYPES;
   sender?: string;
+  seenByApplicant?: boolean;
 };
 
 export type ApplicantTerms = {

diff --git a/frontend/shared/src/components/messaging/Message.tsx b/frontend/shared/src/components/messaging/Message.tsx
@@ -1,4 +1,7 @@
+import { IconCheck } from 'hds-react';
+import { useTranslation } from 'next-i18next';
 import React from 'react';
+import theme from 'shared/styles/theme';
 import { MessageVariant } from 'shared/types/messages';
 
 import {
@@ -7,6 +10,7 @@ import {
   $Message,
   $MessageContainer,
   $Meta,
+  $SeenByUser,
   $Sender,
 } from './Messaging.sc';
 
@@ -18,6 +22,7 @@ export interface MessageProps {
   alignRight?: boolean;
   wrapAsColumn?: boolean;
   variant: MessageVariant;
+  seenByApplicant?: boolean;
 }
 
 const Message: React.FC<MessageProps> = ({
@@ -28,17 +33,28 @@ const Message: React.FC<MessageProps> = ({
   variant,
   alignRight,
   wrapAsColumn,
-}) => (
-  <$MessageContainer>
-    <$Meta alignRight={alignRight} wrapAsColumn={wrapAsColumn}>
-      <$Sender>{sender}</$Sender>
-      <$Date>{date}</$Date>
-    </$Meta>
-    <$Message isPrimary={isPrimary} variant={variant} alignRight={alignRight}>
-      {text}
-    </$Message>
-    {variant === 'note' && <$Hr />}
-  </$MessageContainer>
-);
+  seenByApplicant = false,
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <$MessageContainer>
+      <$Meta alignRight={alignRight} wrapAsColumn={wrapAsColumn}>
+        <$Sender>{sender}</$Sender>
+        <$Date>{date}</$Date>
+        {seenByApplicant && (
+          <$SeenByUser>
+            {t('common:messenger.seenByUser')}{' '}
+            <IconCheck size="xs" color={theme.colors.tram} />
+          </$SeenByUser>
+        )}
+      </$Meta>
+      <$Message isPrimary={isPrimary} variant={variant} alignRight={alignRight}>
+        {text}
+      </$Message>
+      {variant === 'note' && <$Hr />}
+    </$MessageContainer>
+  );
+};
 
 export default Message;
diff --git a/frontend/shared/src/components/messaging/Messaging.sc.tsx b/frontend/shared/src/components/messaging/Messaging.sc.tsx
@@ -47,6 +47,11 @@ export const $Date = styled.span`
   color: ${({ theme }) => theme.colors.black50};
 `;
 
+export const $SeenByUser = styled.span`
+  font-size: ${({ theme }) => theme.fontSize.body.s};
+  color: ${({ theme }) => theme.colors.black50};
+`;
+
 export const $MessageContainer = styled.div`
   display: flex;
   flex-direction: column;