Production deploy

.env.example

@@ -31,6 +31,7 @@ AWS_SECRET_KEY=👻
 FILE_API_KEY=👻
 FILE_API_KEY_NEXUS=👻
 FILE_API_KEY_BARNET=👻
+FILE_API_KEY_LAMBETH=👻
 FILE_API_KEY_SOUTHWARK=👻
 
 # Editor

api.planx.uk/.env.test.example

@@ -20,6 +20,7 @@ AWS_SECRET_KEY=👻
 FILE_API_KEY=👻
 FILE_API_KEY_NEXUS=👻
 FILE_API_KEY_BARNET=👻
+FILE_API_KEY_LAMBETH=👻
 FILE_API_KEY_SOUTHWARK=👻
 
 # Editor

api.planx.uk/modules/auth/middleware.ts

@@ -91,6 +91,10 @@ export const useFilePermission: RequestHandler = (req, _res, next): void => {
       req.headers["api-key"] as string,
       process.env.FILE_API_KEY_BARNET!,
     ) ||
+    isEqual(
+      req.headers["api-key"] as string,
+      process.env.FILE_API_KEY_LAMBETH!,
+    ) ||
     isEqual(
       req.headers["api-key"] as string,
       process.env.FILE_API_KEY_SOUTHWARK!,

api.planx.uk/modules/webhooks/service/sendNotification/index.ts

@@ -23,7 +23,40 @@ export const sendSlackNotification = async (
   if (disability) message += " [Exempt]";
   if (resubmission) message += " [Resubmission]";
 
-  await slack.send(":incoming_envelope: " + message);
+  // Prefix message with a custom emoji if this submission fits November 2024 ODP Pilot testing criteria
+  const pilotCouncils = [
+    "barnet",
+    "buckinghamshire",
+    "camden",
+    "lambeth",
+    "medway",
+  ];
+  // Message app types are a bit messy - Uniform won't have app type at all so we id by system because only accepts LDCs,
+  //   BOPS will have internal ID with app type prefix, Email & S3 will have full PlanX service name
+  const pilotServices = [
+    "uniform",
+    "happ",
+    "ldc",
+    "apply for planning permission",
+    "apply for a lawful development certificate",
+  ];
+
+  let isPilotEvent = false;
+  pilotCouncils.forEach((council) => {
+    pilotServices.forEach((service) => {
+      if (
+        message?.toLowerCase()?.includes(council) &&
+        message?.toLowerCase()?.includes(service)
+      ) {
+        isPilotEvent = true;
+      }
+    });
+  });
+
+  const baseMessage = ":incoming_envelope: " + message;
+  message = isPilotEvent ? ":large_orange_square: " + baseMessage : baseMessage;
+
+  await slack.send(message);
   return message;
 };
 

docker-compose.yml

@@ -126,6 +126,7 @@ services:
       EDITOR_URL_EXT: ${EDITOR_URL_EXT}
       ENCRYPTION_KEY: ${ENCRYPTION_KEY}
       FILE_API_KEY_BARNET: ${FILE_API_KEY_BARNET}
+      FILE_API_KEY_LAMBETH: ${FILE_API_KEY_LAMBETH}
       FILE_API_KEY_SOUTHWARK: ${FILE_API_KEY_SOUTHWARK}
       FILE_API_KEY_NEXUS: ${FILE_API_KEY_NEXUS}
       FILE_API_KEY: ${FILE_API_KEY}

editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import { FeedbackEditor } from "./Editor";
 
 const meta = {
-  title: "Editor Components/Feedback",
+  title: "Editor Components/Feedback modal",
   component: FeedbackEditor,
 } satisfies Meta<typeof FeedbackEditor>;
 

editor.planx.uk/src/@planx/components/Notice/Public.tsx

@@ -1,5 +1,6 @@
 import { mostReadable } from "@ctrl/tinycolor";
 import ErrorOutline from "@mui/icons-material/ErrorOutline";
+import HelpIcon from "@mui/icons-material/Help";
 import Box, { BoxProps } from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { styled, useTheme } from "@mui/material/styles";
@@ -8,14 +9,18 @@ import type { Notice } from "@planx/components/Notice/model";
 import Card, {
   contentFlowSpacing,
 } from "@planx/components/shared/Preview/Card";
-import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { PublicProps } from "@planx/components/shared/types";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import React from "react";
 import { getContrastTextColor } from "styleUtils";
 import { FONT_WEIGHT_SEMI_BOLD } from "theme";
+import { emptyContent } from "ui/editor/RichTextInput/RichTextInput";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
+import { HelpButton, Image } from "../shared/Preview/CardHeader/styled";
+import MoreInfo from "../shared/Preview/MoreInfo";
+import MoreInfoSection from "../shared/Preview/MoreInfoSection";
+
 export type Props = PublicProps<Notice>;
 
 const Container = styled(Box, {
@@ -77,12 +82,21 @@ const NoticeComponent: React.FC<Props> = (props) => {
     props.color,
     theme.palette.text.primary,
   );
+
+  const { info, policyRef, howMeasured, definitionImg } = props;
+
+  const [open, setOpen] = React.useState(false);
+  const { trackEvent } = useAnalyticsTracking();
+
+  const handleHelpClick = () => {
+    setOpen(true);
+    trackEvent({ event: "helpClick", metadata: {} }); // This returns a promise but we don't need to await for it
+  };
+
   const handleSubmit = !props.resetButton
     ? () => props.handleSubmit?.()
     : undefined;
 
-  const { trackEvent } = useAnalyticsTracking();
-
   const handleNoticeResetClick = () => {
     trackEvent({
       event: "flowDirectionChange",
@@ -95,11 +109,6 @@ const NoticeComponent: React.FC<Props> = (props) => {
   return (
     <Card handleSubmit={handleSubmit} isValid>
       <>
-        <CardHeader
-          info={props.info}
-          policyRef={props.policyRef}
-          howMeasured={props.howMeasured}
-        />
         <Container customColor={props.color}>
           <Content>
             <TitleWrap>
@@ -117,6 +126,50 @@ const NoticeComponent: React.FC<Props> = (props) => {
             </Box>
           </Content>
         </Container>
+        {!!(info || policyRef || howMeasured) && (
+          <Typography variant="subtitle1" component="div">
+            <HelpButton
+              variant="help"
+              title={`More information`}
+              aria-label={`See more information about this notice`}
+              onClick={handleHelpClick}
+              aria-haspopup="dialog"
+              data-testid="more-info-button"
+            >
+              <HelpIcon /> More information
+            </HelpButton>
+          </Typography>
+        )}
+        <MoreInfo open={open} handleClose={() => setOpen(false)}>
+          {info && info !== emptyContent ? (
+            <MoreInfoSection title="Why does it matter?">
+              <ReactMarkdownOrHtml source={info} openLinksOnNewTab />
+            </MoreInfoSection>
+          ) : undefined}
+          {policyRef && policyRef !== emptyContent ? (
+            <MoreInfoSection title="Source">
+              <ReactMarkdownOrHtml source={policyRef} openLinksOnNewTab />
+            </MoreInfoSection>
+          ) : undefined}
+          {howMeasured && howMeasured !== emptyContent ? (
+            <MoreInfoSection title="How is it defined?">
+              <>
+                {definitionImg && (
+                  <Image
+                    src={definitionImg}
+                    alt=""
+                    aria-describedby="howMeasured"
+                  />
+                )}
+                <ReactMarkdownOrHtml
+                  source={howMeasured}
+                  openLinksOnNewTab
+                  id="howMeasured"
+                />
+              </>
+            </MoreInfoSection>
+          ) : undefined}
+        </MoreInfo>
         {props.resetButton && (
           <Button
             variant="contained"

editor.planx.uk/src/components/Feedback/types.ts

@@ -21,6 +21,7 @@ export type FeedbackCategory =
   | "comment"
   | "inaccuracy"
   | "component";
+
 export type FeedbackView = "banner" | "triage" | FeedbackCategory | "thanks";
 export type ClickEvents = "close" | "back" | "triage" | FeedbackCategory;
 

editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackLog/FeedbackLog.tsx

@@ -52,6 +52,9 @@ export const FeedbackLog: React.FC<FeedbackLogProps> = ({ feedback }) => {
                   <TableCell sx={{ width: 100 }}>
                     <strong>Date</strong>
                   </TableCell>
+                  <TableCell sx={{ width: 140 }}>
+                    <strong>Rating</strong>
+                  </TableCell>
                   <TableCell sx={{ width: 340 }}>
                     <strong>Comment</strong>
                   </TableCell>

editor.planx.uk/src/pages/FlowEditor/components/Flow/FeedbackLog/components/CollapsibleRow.tsx

@@ -126,6 +126,17 @@ export const CollapsibleRow: React.FC<CollapsibleRowProps> = (item) => {
     userContext: "What were you doing?",
   };
 
+  enum EmojiRating {
+    Terrible,
+    Poor,
+    Average,
+    Good,
+    Excellent,
+  }
+
+  const feedbackScore =
+    item.feedbackScore && EmojiRating[item.feedbackScore + 1]; // enums are 0-indexed
+
   const renderContent = (key: string, value: any) => {
     if (key === "combinedHelp" && value) {
       return <ReactMarkdownOrHtml source={value} openLinksOnNewTab />;
@@ -144,6 +155,7 @@ export const CollapsibleRow: React.FC<CollapsibleRowProps> = (item) => {
         <TableCell>
           {format(new Date(item.createdAt), "dd/MM/yy hh:mm:ss")}
         </TableCell>
+        <TableCell sx={{ textAlign: "center" }}>{feedbackScore}</TableCell>
         <TableCell>{commentSummary}</TableCell>
         <TableCell sx={{ textAlign: "right" }}>
           <IconButton

editor.planx.uk/src/routes/feedback.tsx

@@ -21,6 +21,7 @@ export interface Feedback {
   userContext: string | null;
   createdAt: string;
   address: string | null;
+  feedbackScore: number;
 }
 
 const feedbackRoutes = compose(
@@ -36,14 +37,14 @@ const feedbackRoutes = compose(
       const isAuthorised = useStore.getState().canUserEditTeam(teamSlug);
       if (!isAuthorised)
         throw new NotFoundError(
-          `User does not have access to ${req.originalUrl}`,
+          `User does not have access to ${req.originalUrl}`
         );
 
       const {
         data: { feedback },
       } = await client.query<{ feedback: Feedback[] }>({
         query: gql`
-          query GetFeebackForFlow($teamSlug: String!, $flowSlug: String!) {
+          query GetFeedbackForFlow($teamSlug: String!, $flowSlug: String!) {
             feedback: feedback_summary(
               order_by: { created_at: asc }
               where: {
@@ -57,6 +58,7 @@ const feedbackRoutes = compose(
               nodeType: node_type
               userComment: user_comment
               userContext: user_context
+              feedbackScore: feedback_score
               createdAt: created_at
               address
             }
@@ -70,7 +72,7 @@ const feedbackRoutes = compose(
         view: <FeedbackLog feedback={feedback} />,
       };
     }),
-  }),
+  })
 );
 
 export default feedbackRoutes;