adding advertisement tile for the new browser ui

Author: nnecla

src/browser/images/clusters.svg

@@ -24,4 +24,19 @@ import AppInit, { setupSentry } from './AppInit'
 import './init'
 
 setupSentry()
-ReactDOM.render(<AppInit />, document.getElementById('mount'))
+;(async () => {
+  const doesPreferQuery = localStorage.getItem('prefersOldBrowser') === 'false'
+
+  const response = await fetch('/preview/manifest.json')
+  if (response.status === 200) {
+    if (doesPreferQuery) {
+      window.location.pathname = '/preview/'
+    } else {
+      localStorage.setItem('previewAvailable', 'true')
+    }
+  } else {
+    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,18 @@ 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;
+    }
+  }
+
   &.slide input {
     color: ${props => props.theme.inputText};
   }

src/browser/modules/Carousel/styled.tsx

@@ -47,6 +47,11 @@ 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'
+import {
+  experimentalFeaturePreviewName,
+  showFeature
+} from 'shared/modules/experimentalFeatures/experimentalFeaturesDuck'
 
 const AuraPromotion = () => {
   const theme = useContext(ThemeContext)
@@ -88,13 +93,15 @@ type PlayFrameProps = {
   showPromotion: boolean
   isFullscreen: boolean
   isCollapsed: boolean
+  isAdvertiseFlagOn: boolean
 }
 export function PlayFrame({
   stack,
   bus,
   showPromotion,
   isFullscreen,
-  isCollapsed
+  isCollapsed,
+  isAdvertiseFlagOn
 }: PlayFrameProps): JSX.Element {
   const [stackIndex, setStackIndex] = useState(0)
   const [atSlideStart, setAtSlideStart] = useState<boolean | null>(null)
@@ -123,7 +130,8 @@ export function PlayFrame({
         bus,
         onSlide,
         initialPlay,
-        showPromotion
+        showPromotion,
+        isAdvertiseFlagOn
       )
       if (stillMounted) {
         setInitialPlay(false)
@@ -206,7 +214,8 @@ function generateContent(
   bus: Bus,
   onSlide: any,
   shouldUseSlidePointer: boolean,
-  showPromotion = false
+  showPromotion = false,
+  isAdvertiseFlagOn: boolean
 ): Content | Promise<Content> {
   // Not found
   if (stackFrame.response && stackFrame.response.status === 404) {
@@ -287,15 +296,20 @@ function generateContent(
 
   // Check if content exists locally
   if (isPlayChapter(guideName)) {
+    const isPreviewAvailable =
+      localStorage.getItem('previewAvailable') === 'true'
+    const showAdvertiseTile = isAdvertiseFlagOn && isPreviewAvailable
     const { content, title, subtitle, slides = null } = chapters[guideName]
 
     const isPlayStart = stackFrame.cmd.trim() === ':play start'
     const updatedContent =
       isPlayStart && showPromotion ? (
         <>
-          {content}
+          {showAdvertiseTile ? <PreviewFrame /> : content}
           <AuraPromotion />
         </>
+      ) : showAdvertiseTile ? (
+        <PreviewFrame />
       ) : (
         content
       )
@@ -378,7 +392,8 @@ const mapStateToProps = (state: GlobalState) => ({
     (getEdition(state) !== null &&
       !isEnterprise(state) &&
       !isConnectedAuraHost(state)) ||
-    inDesktop(state)
+    inDesktop(state),
+  isAdvertiseFlagOn: showFeature(state, experimentalFeaturePreviewName)
 })
 
 export default connect(mapStateToProps)(withBus(PlayFrame))