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 + /> + ); +};