diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
index 87e66fc6..69979d27 100644
--- a/src/AppLayout.tsx
+++ b/src/AppLayout.tsx
@@ -41,6 +41,7 @@ import { DropdownLinkItem } from 'components/Dropdown/DropdownLinkItem';
import { ExperimentalContent } from 'components/ExperimentalContent/ExperimentalContent';
import { ExperimentalContentMarker } from 'components/ExperimentalContent/ExperimentalContentMarker';
import { ProtectedComponent } from 'components/ProtectedContent/ProtectedComponent';
+import { OldUIAnnouncement } from 'components/TopBar/OldUIAnnouncement';
import { TopBarAnnouncement } from 'components/TopBar/TopBarAnnouncement';
import { IAuthBroadcastMessage, authBroadcastService } from 'services/broadcastService';
@@ -131,6 +132,11 @@ export const AppLayout = () => {
Administration
+ {process.env.REACT_APP_PNC_OLD_UI_WEB && (
+
+ Old UI Version
+
+ )}
>
);
@@ -358,6 +364,7 @@ export const AppLayout = () => {
return (
<>
+
{serviceContainerPncStatus.data && (
{
+ const { storageValue: isClosed, storeToStorage: setIsClosed } = useStorage({
+ storageKey: LOCAL_STORAGE_KEY,
+ initialValue: false,
+ });
+
+ const oldUIUrl = process.env.REACT_APP_PNC_OLD_UI_WEB;
+
+ //Display announcement when oldUIUrl is configured and current host name does not contain keyword
+ const shouldDisplay = !!oldUIUrl && !window.location.hostname.toLowerCase().includes(URL_TRIGGER);
+
+ if (!shouldDisplay || isClosed) {
+ return null;
+ }
+
+ const closeAnnouncement = () => {
+ setIsClosed(true);
+ };
+
+ return (
+ }
+ aria-label="Old UI Announcement"
+ customIcon={}
+ title={
+ <>
+ Welcome to the new PNC Web UI. The{' '}
+
+ Old UI Version
+ {' '}
+ is temporarily available, but it will soon be decommissioned.
+ >
+ }
+ isInline
+ />
+ );
+};