wording to encourage use of Starred Messages

guardian · Oct 27, 2023 · 3afde2a · 3afde2a
1 parent ca6f42a
commit 3afde2a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
diff --git a/client/src/app.tsx b/client/src/app.tsx
@@ -45,7 +45,10 @@ import { getAgateFontFaceIfApplicable } from "../fontNormaliser";
 import { Global } from "@emotion/react";
 import { TourStateProvider } from "./tour/tourState";
 import { demoMentionableUsers, demoUser } from "./tour/tourConstants";
-import { StarredMessagesPortal, STARRED_MESSAGES_HTML_TAG } from "./starred/starredMessages";
+import {
+  StarredMessagesPortal,
+  STARRED_MESSAGES_HTML_TAG,
+} from "./starred/starredMessages";
 
 const PRESELECT_PINBOARD_HTML_TAG = "pinboard-preselect";
 const PRESET_UNREAD_NOTIFICATIONS_COUNT_HTML_TAG = "pinboard-bubble-preset";
@@ -86,7 +89,9 @@ export const PinBoardApp = ({
     );
 
   const refreshStarredMessagesAreaNodes = () =>
-    setMaybeStarredMessagesArea(document.querySelector(STARRED_MESSAGES_HTML_TAG));
+    setMaybeStarredMessagesArea(
+      document.querySelector(STARRED_MESSAGES_HTML_TAG)
+    );
 
   const refreshWorkflowPinboardElements = () =>
     setWorkflowPinboardElements(
@@ -335,10 +340,10 @@ export const PinBoardApp = ({
     const newTags =
       preSelectedComposerId && composerSection
         ? {
-          composerId: preSelectedComposerId,
-          composerSection,
-          ...(tags || {}),
-        }
+            composerId: preSelectedComposerId,
+            composerSection,
+            ...(tags || {}),
+          }
         : tags;
     basicSendTelemetryEvent?.(type, newTags, value);
   };
@@ -348,9 +353,9 @@ export const PinBoardApp = ({
       PINBOARD_TELEMETRY_TYPE.PINBOARD_LOADED,
       preSelectedComposerId && composerSection
         ? {
-          composerId: preSelectedComposerId,
-          composerSection: composerSection,
-        }
+            composerId: preSelectedComposerId,
+            composerSection: composerSection,
+          }
         : {}
     );
   }, [preSelectedComposerId, composerSection]);
@@ -359,8 +364,9 @@ export const PinBoardApp = ({
 
   const hasApolloAuthError = useReactiveVar(hasApolloAuthErrorVar);
 
-  const [starredMessages, setStarredMessages] = useState<Item[]>([]);
-  const [maybeScrollToItem, setMaybeScrollToItem] = useState<(itemId: string) => void>();
+  const [maybeStarredMessages, setMaybeStarredMessages] = useState<Item[]>();
+  const [maybeScrollToItem, setMaybeScrollToItem] =
+    useState<(itemId: string) => void>();
 
   return (
     <TelemetryContext.Provider value={sendTelemetryEvent}>
@@ -385,7 +391,7 @@ export const PinBoardApp = ({
           }
           hasEverUsedTour={me?.hasEverUsedTour}
           visitTourStep={visitTourStep}
-          setStarredMessages={setStarredMessages}
+          setStarredMessages={setMaybeStarredMessages}
           setMaybeScrollToItem={setMaybeScrollToItem}
         >
           <TourStateProvider>
@@ -445,7 +451,7 @@ export const PinBoardApp = ({
             {maybeStarredMessagesArea && (
               <StarredMessagesPortal
                 node={maybeStarredMessagesArea}
-                starredMessages={starredMessages}
+                maybeStarredMessages={maybeStarredMessages}
                 userLookup={userLookup}
                 maybeScrollToItem={maybeScrollToItem}
               />

diff --git a/client/src/starred/starredMessages.tsx b/client/src/starred/starredMessages.tsx
@@ -9,6 +9,7 @@ import { agateSans } from "../../fontNormaliser";
 import { neutral, space } from "@guardian/source-foundations";
 import { pinboard } from "../../colours";
 import { useGlobalStateContext } from "../globalState";
+import { SvgStar } from "@guardian/source-react-components";
 
 export const STARRED_MESSAGES_HTML_TAG = "pinboard-starred-messages";
 
@@ -21,15 +22,13 @@ const StarredItemDisplay = ({
   userLookup: UserLookup;
   maybeScrollToItem: ((itemId: string) => void) | undefined;
 }) => {
-  const { setIsExpanded, setActiveTab } = useGlobalStateContext();
   const user = userLookup?.[item.userEmail];
   const userDisplayName = user
     ? `${user.firstName} ${user.lastName}`
     : item.userEmail;
   return (
     <div
       css={css`
-        ${agateSans.xsmall()};
         display: flex;
         align-items: flex-end;
         gap: ${space[1]}px;
@@ -47,8 +46,6 @@ const StarredItemDisplay = ({
         ((event) => {
           event.stopPropagation();
           event.preventDefault();
-          setIsExpanded(true);
-          setActiveTab("chat");
           setTimeout(() => maybeScrollToItem(item.id), 250);
         })
       }
@@ -70,32 +67,59 @@ const StarredItemDisplay = ({
 };
 
 interface StarredMessagesProps {
-  starredMessages: Item[];
+  maybeStarredMessages: Item[] | undefined;
   userLookup: UserLookup;
   maybeScrollToItem: ((itemId: string) => void) | undefined;
 }
 
 const StarredMessages = ({
-  starredMessages,
+  maybeStarredMessages,
   userLookup,
   maybeScrollToItem,
 }: StarredMessagesProps) => {
-  return starredMessages.length === 0 ? null : (
+  const { setIsExpanded, setActiveTab } = useGlobalStateContext();
+  return !maybeStarredMessages ? null : (
     <root.div>
       <div
         css={css`
+          ${agateSans.xsmall()};
           outline: 15px solid ${pinboard[800]};
           border-radius: 6px;
           background-color: ${pinboard[800]};
           margin-bottom: 20px;
         `}
       >
-        {starredMessages.map((item) => (
+        {maybeStarredMessages.length === 0 && (
+          <span
+            css={css`
+              cursor: pointer;
+            `}
+            onClick={() => setIsExpanded(true)}
+          >
+            <strong>
+              If you need to leave an important message please use Pinboard
+              &apos;Starred Messages&apos; rather than notes.{" "}
+            </strong>
+            <br />
+            Click here to open Pinboard, then simply send a message and then
+            click the <SvgStar size="xsmall" /> to the left of your message. You
+            can also star other&apos;s messages if you think they&apos;re
+            important.
+          </span>
+        )}
+        {maybeStarredMessages.map((item) => (
           <StarredItemDisplay
             key={item.id}
             item={item}
             userLookup={userLookup}
-            maybeScrollToItem={maybeScrollToItem}
+            maybeScrollToItem={
+              maybeScrollToItem &&
+              ((itemId: string) => {
+                setIsExpanded(true);
+                setActiveTab("chat");
+                maybeScrollToItem(itemId);
+              })
+            }
           />
         ))}
       </div>