Merge pull request #1978 from neo4j/new-browser-advertisement

adding advertisement tile for the new browser ui

Author: nnecla

src/browser/images/clusters.svg

@@ -22,6 +22,25 @@ import ReactDOM from 'react-dom'
 
 import AppInit, { setupSentry } from './AppInit'
 import './init'
+import { navigateToPreview } from './modules/Stream/StartPreviewFrame'
 
 setupSentry()
-ReactDOM.render(<AppInit />, document.getElementById('mount'))
+;(async () => {
+  const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false'
+  try {
+    const response = await fetch('./preview/manifest.json')
+    if (response.status === 200) {
+      if (doesPreferQuery) {
+        navigateToPreview()
+      } else {
+        localStorage.setItem('previewAvailable', 'true')
+      }
+    } else {
+      localStorage.setItem('previewAvailable', 'false')
+    }
+  } catch (e) {
+    localStorage.setItem('previewAvailable', 'false')
+  }
+
+  ReactDOM.render(<AppInit />, document.getElementById('mount'))
+})()

src/browser/index.tsx

@@ -345,6 +345,18 @@
     border: 0;
     display: inline-block;
   }
+  .btn-advertise {
+    padding: 1em;
+    background-color: #fff;
+    color: #008cc1;
+    border-radius: 4px;
+    border: 0;
+    display: inline-block;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    font-size: 12px;
+    line-height: 18px;
+  }
   .teasers {
     display: flex;
     justify-content: center;

src/browser/modules/Carousel/style.less

@@ -301,6 +301,19 @@ export const StyledSlide = styled.div`
     background-color: ${props => props.theme.teaserCardBackground} !important;
   }
 
+  &.slide .teaser-advertise {
+    color: white !important;
+    background-color: #0a6190 !important;
+
+    & .img-advertise {
+      position: absolute;
+      left: 0;
+      bottom: -10px;
+      opacity: 0.15;
+      pointer-events: none;
+    }
+  }
+
   &.slide input {
     color: ${props => props.theme.inputText};
   }

src/browser/modules/Carousel/styled.tsx

@@ -47,6 +47,7 @@ import { isConnectedAuraHost } from 'shared/modules/connections/connectionsDuck'
 import { getEdition, isEnterprise } from 'shared/modules/dbMeta/dbMetaDuck'
 import { DARK_THEME } from 'shared/modules/settings/settingsDuck'
 import { LAST_GUIDE_SLIDE } from 'shared/modules/udc/udcDuck'
+import { PreviewFrame } from './StartPreviewFrame'
 
 const AuraPromotion = () => {
   const theme = useContext(ThemeContext)
@@ -287,15 +288,19 @@ function generateContent(
 
   // Check if content exists locally
   if (isPlayChapter(guideName)) {
+    const isPreviewAvailable =
+      localStorage.getItem('previewAvailable') === 'true'
     const { content, title, subtitle, slides = null } = chapters[guideName]
 
     const isPlayStart = stackFrame.cmd.trim() === ':play start'
     const updatedContent =
       isPlayStart && showPromotion ? (
         <>
-          {content}
+          {isPreviewAvailable ? <PreviewFrame /> : content}
           <AuraPromotion />
         </>
+      ) : isPreviewAvailable ? (
+        <PreviewFrame />
       ) : (
         content
       )