Banner notifying users about mpox update (#1710)

* In-app mpox update banner

* Right, right, gotta have a treatment

* Lint roller

src/frontend/src/components/NavBar/components/AppNavBar/components/Announcements/index.tsx

@@ -9,13 +9,19 @@ import { isUserFlagOn } from "src/components/Split";
 
 // Show Banner to let users know we are transferring the app
 export const Announcements = (): JSX.Element => {
-  const flag = useTreatments([USER_FEATURE_FLAGS.transfer_banner]);
+  const transferFlag = useTreatments([USER_FEATURE_FLAGS.transfer_banner]);
+  const mpoxUpdateFlag = useTreatments([USER_FEATURE_FLAGS.mpox_update_banner]);
 
   const shouldShowTransferBanner = isUserFlagOn(
-    flag,
+    transferFlag,
     USER_FEATURE_FLAGS.transfer_banner
   );
 
+  const shouldShowMpoxUpdateBanner = isUserFlagOn(
+    mpoxUpdateFlag,
+    USER_FEATURE_FLAGS.mpox_update_banner
+  );
+
   return (
     <>
       {shouldShowTransferBanner && (
@@ -33,6 +39,18 @@ export const Announcements = (): JSX.Element => {
           <B>&nbsp;FOR MORE INFORMATION.</B>
         </StyledBanner>
       )}
+      {shouldShowMpoxUpdateBanner && (
+        <StyledBanner sdsType="primary">
+          <B>MPOX TREE BUILDS ARE NOW UPDATED.&nbsp;</B>
+          <StyledNewTabLink
+            href="https://help.czgenepi.org/hc/en-us/articles/30224919249684-Tree-Building-Updates-09-06-2024"
+            sdsStyle="dashed"
+          >
+            LEARN MORE
+          </StyledNewTabLink>
+          <B>.</B>
+        </StyledBanner>
+      )}
     </>
   );
 };

src/frontend/src/components/Split/types.ts

@@ -21,6 +21,7 @@ export enum USER_FEATURE_FLAGS {
   multi_pathogen = "multi_pathogen",
   sunset_banner = "sunset_banner",
   transfer_banner = "transfer_banner",
+  mpox_update_banner = "mpox_update_banner",
 }
 
 /**