feat: Static Templates

assets/css/dashboard/new-pa-message/new-pa-message-page.scss

@@ -258,31 +258,25 @@
     }
   }
 
-  .unassociated-alert-header {
-    margin-top: 40px;
-    font-size: 20px;
-    font-weight: 500;
-
-    button {
-      font-size: 20px;
-      margin-bottom: 14px;
-    }
-  }
-
-  .associated-alert-header {
+  .associated-alert-header,
+  .selected-template-header,
+  .alert-template-header {
     margin: 40px 0px 0px 16px;
     font-size: 20px;
     font-weight: 500;
+  }
 
-    button {
+  .associated-alert-header,
+  .selected-template-header,
+  .alert-template-container {
+    .clear-button {
+      padding: 0;
       color: $text-secondary;
-      margin-left: 16px;
-      margin-bottom: 6px;
-      width: auto;
-      padding: 0px;
-      height: 24px;
+      margin: auto 0 auto 16px;
     }
+  }
 
+  .associated-alert-header {
     .effect-period,
     .alert-ended {
       margin-top: 4px;
@@ -296,57 +290,39 @@
     }
   }
 
-  .associate-alert-button {
-    color: $text-link-primary;
-    font-family: Inter;
-    font-size: 20;
-    font-weight: 500;
-    height: 30px;
-    margin-bottom: 8px;
-  }
+  .alert-template-container {
+    display: flex;
+    align-items: center;
+    padding: 0;
 
-  .unassociated-alert-header {
-    margin-top: 40px;
-    font-size: 20px;
-    font-weight: 500;
+    .associate-alert-button {
+      padding-left: 0px;
+    }
 
-    button {
+    .associate-alert-button,
+    .psa-emergency-button {
+      height: 30px;
+      display: flex;
+      align-items: center;
+      margin: 0;
+      color: $text-link-primary;
       font-size: 20px;
-      margin-bottom: 14px;
+      font-weight: 500;
+      text-decoration: none;
     }
   }
 
-  .associated-alert-header {
-    margin: 40px 0px 0px 16px;
+  .unassociated-alert-header {
+    margin-top: 40px;
     font-size: 20px;
     font-weight: 500;
 
     button {
-      color: $text-secondary;
-      margin-left: 16px;
-      margin-bottom: 6px;
-      width: auto;
-      padding: 0px;
-      height: 24px;
-    }
-
-    .effect-period {
-      margin-top: 4px;
-      font-size: 14px;
-      font-weight: 400;
-      width: 100%;
+      font-size: 20px;
+      margin-bottom: 14px;
     }
   }
 
-  .associate-alert-button {
-    color: $text-link-primary;
-    font-family: Inter;
-    font-size: 20;
-    font-weight: 500;
-    height: 30px;
-    margin-bottom: 8px;
-  }
-
   input[type="time"],
   input[type="date"] {
     position: relative;

assets/css/dashboard/new-pa-message/static-template-page.scss

@@ -0,0 +1,88 @@
+.static-template-page {
+  padding: 24px 48px;
+
+  .header-container {
+    padding-right: 48px;
+    max-width: 1380px;
+    max-height: 48px;
+    margin-bottom: 40px;
+
+    .header,
+    .cancel-button-col,
+    .cancel-button {
+      height: 48px;
+    }
+
+    .cancel-button-col {
+      flex: none;
+      width: 100px;
+
+      .cancel-button {
+        color: $text-link-primary;
+        text-decoration: none;
+
+        &:hover {
+          color: $text-link-primary;
+          background-color: $cool-gray-15;
+        }
+      }
+    }
+  }
+
+  .static-template-page-body {
+    .filter-group-col {
+      max-width: 200px;
+      margin-right: 48px;
+    }
+
+    .static-template-table-container {
+      max-width: 1096px;
+
+      .table-header {
+        font-size: 32px;
+      }
+
+      .static-template-table {
+        width: 100%;
+
+        .header-row {
+          height: 55px;
+          vertical-align: bottom;
+          border-bottom: 1px solid $border-primary;
+
+          .message-column-header {
+            padding-bottom: 8px;
+            padding-left: 16px;
+          }
+        }
+
+        .template-row {
+          background-color: $cool-gray-15;
+          border-bottom: 1px solid $divider-secondary;
+
+          .title {
+            font-weight: 700;
+          }
+
+          .message-cell {
+            padding: 8px 16px;
+
+            .message {
+              white-space: pre-line;
+            }
+          }
+
+          .select-button-cell {
+            vertical-align: top;
+            padding: 16px 38px 0 16px;
+
+            .select-button {
+              padding: 0;
+              color: $text-secondary;
+            }
+          }
+        }
+      }
+    }
+  }
+}

assets/css/screenplay.scss

@@ -47,6 +47,7 @@ $form-feedback-invalid-color: $text-error;
 @import "dashboard/toast.scss";
 @import "dashboard/kebab-menu.scss";
 @import "dashboard/filter-group.scss";
+@import "dashboard/new-pa-message/static-template-page.scss";
 
 html {
   font-size: 16px;

assets/css/variables.scss

@@ -68,3 +68,5 @@ $text-button-blue-hover-color: #c1e4ff14;
 $text-button-grey-hover-color: #f8f9fa14;
 $alert-yellow: #ffdd00;
 $accessibility-blue: #165c96;
+
+$divider-secondary: #495057;

assets/js/components/Dashboard/EditPaMessage/EditPaMessage.tsx

@@ -1,74 +1,55 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import useSWR, { mutate } from "swr";
 import { useNavigate, useParams } from "react-router-dom";
 import { PaMessage } from "Models/pa_message";
 import PaMessageForm from "../PaMessageForm";
 import { updateExistingPaMessage } from "Utils/api";
 import { Alert } from "Models/alert";
 import { AudioPreview } from "Components/PaMessageForm/types";
+import { StaticTemplate } from "Models/static_template";
 
-const useAlert = (id: string | null | undefined) => {
-  const { data: alerts, isLoading } = useSWR<Array<Alert>>(
-    id ? "/api/alerts/non_access_alerts" : null,
-    async (url: string | null) => {
-      if (url == null) return [];
+interface PaMessageResponse {
+  pa_message: PaMessage;
+  alert: Alert | null;
+  template: StaticTemplate | null;
+}
 
+const usePaMessage = (id: string | number) => {
+  const { data, isLoading, error } = useSWR<PaMessageResponse>(
+    `/api/pa-messages/${id}`,
+    async (url: string) => {
       const response = await fetch(url);
-      const { alerts } = await response.json();
-      return alerts;
+      const body = await response.json();
+
+      if (400 <= response.status) throw response;
+      return body;
     },
   );
 
-  const alert = useMemo(() => {
-    if (id == null) return null;
-    return alerts?.find((a) => a.id === id);
-  }, [id, alerts]);
-
   return {
-    alert,
-    isLoading,
-  };
-};
-
-const usePaMessage = (id: string | number) => {
-  const {
-    data: paMessage,
-    isLoading,
-    error,
-  } = useSWR<PaMessage>(`/api/pa-messages/${id}`, async (url: string) => {
-    const response = await fetch(url);
-    const body = await response.json();
-
-    if (400 <= response.status) throw response;
-    return body;
-  });
-
-  return {
-    paMessage,
+    data,
     isLoading,
     error,
   };
 };
 
 const FetchPaMessage = ({ id }: { id: string | number }) => {
   const navigate = useNavigate();
-  const { paMessage, isLoading, error } = usePaMessage(id);
+  const { data, isLoading, error } = usePaMessage(id);
 
   useEffect(() => {
     if (error?.status === 404) navigate("/pa-messages");
   }, [error, navigate]);
 
-  if (isLoading || error || paMessage == null) return null;
-
-  return <FetchAlert paMessage={paMessage} />;
-};
-
-const FetchAlert = ({ paMessage }: { paMessage: PaMessage }) => {
-  const { alert, isLoading } = useAlert(paMessage.alert_id);
-
-  if (isLoading) return null;
+  if (isLoading || error || data?.pa_message == null) return null;
 
-  return <EditPaMessage paMessage={paMessage} alert={alert} />;
+  return (
+    <EditPaMessage
+      paMessage={data.pa_message}
+      alert={data.alert}
+      template={data.template}
+    />
+  );
 };
 
 const EditPaMessageContainer = () => {
@@ -87,9 +68,10 @@ const EditPaMessageContainer = () => {
 interface Props {
   paMessage: PaMessage;
   alert?: Alert | null;
+  template?: StaticTemplate | null;
 }
 
-const EditPaMessage = ({ paMessage, alert }: Props) => {
+const EditPaMessage = ({ paMessage, alert, template }: Props) => {
   const navigate = useNavigate();
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [errors, setErrors] = useState<string[]>([]);
@@ -104,6 +86,7 @@ const EditPaMessage = ({ paMessage, alert }: Props) => {
       onErrorsChange={setErrors}
       defaultValues={paMessage}
       defaultAlert={alert ?? paMessage.alert_id}
+      defaultTemplate={template}
       defaultAudioState={AudioPreview.Reviewed}
       paused={paMessage.paused}
       onSubmit={async (data) => {

assets/js/components/Dashboard/MessageTextBox.tsx

@@ -11,6 +11,7 @@ interface Props {
   required?: boolean;
   validationText?: string;
   validated?: boolean;
+  readonly?: boolean;
 }
 
 const MessageTextBox = ({
@@ -23,11 +24,13 @@ const MessageTextBox = ({
   required,
   validationText,
   validated,
+  readonly,
 }: Props) => {
   return (
     <Form.Group className="message-text-box">
       <Form.Label htmlFor={id}>{label}</Form.Label>
       <Form.Control
+        readOnly={readonly}
         required={required}
         id={id}
         className="text-input"