From 071b13934485c9821d8bd58f6e22e7ab74d30a19 Mon Sep 17 00:00:00 2001
From: "tejitpabari@microsoft.com" <tejitpabari@microsoft.com>
Date: Wed, 20 Nov 2024 16:55:05 -0800
Subject: [PATCH] Adding deprecation banner

---
 src/common/translations/en.js            |  3 +++
 src/components/top-bar/top-bar.js        | 20 ++++++++++++++++++++
 src/components/top-bar/top-bar.style.js  | 23 +++++++++++++++++++++++
 src/pages/conversion/style.js            |  2 +-
 src/pages/processing/processing.style.js |  2 +-
 5 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/src/common/translations/en.js b/src/common/translations/en.js
index 3c20371..1439586 100644
--- a/src/common/translations/en.js
+++ b/src/common/translations/en.js
@@ -30,6 +30,9 @@ const en = {
     'diagnostic.package': 'Diagnostic Package',
     docs: 'Documentation',
     'docs.link': 'Link to documentation',
+    'deprecation.text': 'The Azure Maps Creator indoor map service is now deprecated and will be retired on 9/30/25. For more information, see',
+    'deprecation.link.text': 'End of Life Announcement of Azure Maps Creator',
+    'deprecation.link': 'https://aka.ms/AzureMapsCreatorDeprecation',
     download: 'Download',
     'download.diagnostics': 'Download Diagnostics',
     'dwg.layers': 'DWG Layers',
diff --git a/src/components/top-bar/top-bar.js b/src/components/top-bar/top-bar.js
index 4172d02..e4779e8 100644
--- a/src/components/top-bar/top-bar.js
+++ b/src/components/top-bar/top-bar.js
@@ -3,6 +3,9 @@ import { useTranslation } from 'react-i18next';
 import {
   azMapsCreatorTextStyle,
   barStyle,
+  deprecationBarStyle,
+  deprecationTextStyle,
+  deprecationLinkStyle,
   docLink,
   linksContainer,
   logoContainer,
@@ -10,6 +13,8 @@ import {
   splitterStyle,
 } from './top-bar.style';
 
+import { Icon } from '@fluentui/react/lib/Icon';
+
 const docsLink = 'https://learn.microsoft.com/en-us/azure/azure-maps/drawing-package-guide?pivots=drawing-package-v2';
 const feedbackLink =
   'https://feedback.azure.com/d365community/post/fc834083-0925-ec11-b6e6-000d3a4f09d0?page=1&sort=newest';
@@ -19,6 +24,7 @@ const TopBar = () => {
   const { isPlacesPreview } = useFeatureFlags();
 
   return (
+    <div>
     <div className={barStyle}>
       <div className={logoContainer}>
         <span className={msftAzureTextStyle}>Microsoft Azure</span>
@@ -36,6 +42,20 @@ const TopBar = () => {
         </a>
       </div>
     </div>
+    <div style={{display:'flex', justifyContent: 'center', alignItems: 'center'}}>
+      <div className={deprecationBarStyle}>
+        <Icon iconName='error'/>&nbsp;
+        <span className={deprecationTextStyle}>
+          {t('deprecation.text')}&nbsp;
+        <a className={deprecationLinkStyle} href={t('deprecation.link')} target='_blank' rel='noreferrer' aria-label={t('deprecation.link')}>
+          {t('deprecation.link.text')}
+        </a>
+        </span>
+        
+      </div>
+    </div>
+    
+    </div>
   );
 };
 
diff --git a/src/components/top-bar/top-bar.style.js b/src/components/top-bar/top-bar.style.js
index b52fb69..e15e1b1 100644
--- a/src/components/top-bar/top-bar.style.js
+++ b/src/components/top-bar/top-bar.style.js
@@ -12,6 +12,29 @@ export const barStyle = css`
   box-shadow: 0px 0px 0.625rem ${color.shadow};
 `;
 
+export const deprecationBarStyle = css`
+  background: #efd9fd;
+  color: red;
+  height: 2rem;
+  border-radius: 0.625rem;
+  margin: 0.625rem;
+  padding: 0.125rem;
+  padding-left: 2rem;
+  padding-right: 2rem;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const deprecationTextStyle = css`
+  font-size: ${fontSize.xl};
+`;
+
+export const deprecationLinkStyle = css`
+  color: red;
+`;
+
 export const msftAzureTextStyle = css`
   font-weight: ${fontWeight.semibold};
   font-size: ${fontSize.lg};
diff --git a/src/pages/conversion/style.js b/src/pages/conversion/style.js
index d7a599a..e2c255a 100644
--- a/src/pages/conversion/style.js
+++ b/src/pages/conversion/style.js
@@ -3,7 +3,7 @@ import { css, keyframes } from '@emotion/css';
 import { color, fontSize, fontWeight } from 'common/styles';
 
 export const container = css`
-  position: fixed;
+  // position: fixed;
   top: 5.5rem;
   height: calc(100% - 5.5rem - 2px);
   width: calc(100% - 2.5rem);
diff --git a/src/pages/processing/processing.style.js b/src/pages/processing/processing.style.js
index 66b47c9..02e25d3 100644
--- a/src/pages/processing/processing.style.js
+++ b/src/pages/processing/processing.style.js
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 export const containerStyle = css`
-  position: fixed;
+  // position: fixed;
   width: 100%;
   align-self: center;
   height: 100%;