Merge pull request #1012 from Financial-Times/react-17

React 17

docs/design-decisions/app-context.md

@@ -11,9 +11,8 @@ Previously metadata was embedded into the HTML as data attributes on the documen
 
 To help resolve this our implementation of app context is based upon a schema which documents and guarantees the data. The schema also defines how the feature can be used to reduce the chances of it being re-purposed or misused. The schema also enables us provide an official reference for people to follow because we don't always know who or what may be using the data.
 
-Finally, the app context feature has enabled us to refactor the [ads] and [tracking] components. They now provide their own, separate options, and are deterministic rather than each arbitrarily scraping pages for information.
+Finally, the app context feature has enabled us to refactor the [tracking] component. It now provides its own, separate options, and is deterministic rather than arbitrarily scraping pages for information.
 
-[ads]: https://github.com/Financial-Times/n-ads/
 [tracking]: https://github.com/Financial-Times/n-tracking/
 
 ## Decision owners

examples/ft-ui/package.json

@@ -15,14 +15,15 @@
     "@financial-times/dotcom-ui-layout": "file:../../packages/dotcom-ui-layout",
     "@financial-times/dotcom-ui-shell": "file:../../packages/dotcom-ui-shell",
     "express": "^4.16.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sucrase": "^3.10.1"
   },
   "devDependencies": {
     "@financial-times/dotcom-build-js": "file:../../packages/dotcom-build-js",
     "@financial-times/dotcom-build-sass": "file:../../packages/dotcom-build-sass",
     "@financial-times/dotcom-build-base": "file:../../packages/dotcom-build-base",
+    "n-ui-foundations": "^9.0.0",
     "nodemon": "^1.18.9",
     "ready-state": "^2.0.5",
     "webpack": "^4.42.0",

examples/kitchen-sink/__test__/build.test.js

@@ -1,32 +1,30 @@
 const fs = require('fs')
 
-const expected = [
-  'async.css',
-  'financial-times-n-ads.bundle.js',
-  'financial-times-n-tracking.bundle.js',
-  'financial-times-o-ads.bundle.js',
-  'financial-times-o-grid.bundle.js',
-  'financial-times-o-toggle.bundle.js',
-  'financial-times-o-tracking.bundle.js',
-  'financial-times-o-utils.bundle.js',
-  'financial-times-o-viewport.bundle.js',
-  'manifest.json',
-  'page-kit-components.bundle.js',
-  'page-kit-layout-styles.css',
-  'scripts.bundle.js',
-  'shared.stable.bundle.js',
-  'styles.css',
-  'webpack-runtime.bundle.js'
-]
-
 describe('examples/kitchen-sink/build', () => {
-  let output
-
-  beforeAll(() => {
-    output = fs.readdirSync('./public')
-  })
-
   it('creates the expected JS, CSS, and manifest files', () => {
-    expect(output.sort()).toEqual(expected)
+    const output = fs.readdirSync('./public')
+    expect(output).toMatchInlineSnapshot(`
+      Array [
+        "async.css",
+        "financial-times-n-tracking.bundle.js",
+        "financial-times-o-footer.bundle.js",
+        "financial-times-o-grid.bundle.js",
+        "financial-times-o-header.bundle.js",
+        "financial-times-o-toggle.bundle.js",
+        "financial-times-o-tracking.bundle.js",
+        "financial-times-o-typography.bundle.js",
+        "financial-times-o-utils.bundle.js",
+        "financial-times-o-viewport.bundle.js",
+        "manifest.json",
+        "page-kit-components.bundle.js",
+        "page-kit-layout-styles.css",
+        "privacy-components.bundle.js",
+        "scripts.bundle.js",
+        "shared.stable.bundle.js",
+        "styles.css",
+        "vendors~scripts.bundle.js",
+        "webpack-runtime.bundle.js",
+      ]
+    `)
   })
 })

examples/kitchen-sink/client/main.js

@@ -1,16 +1,16 @@
 import readyState from 'ready-state'
-import * as flags from '@financial-times/dotcom-ui-flags'
+import * as flags from '@financial-times/dotcom-ui-flags/src/client'
 import * as layout from '@financial-times/dotcom-ui-layout'
-import * as appContext from '@financial-times/dotcom-ui-app-context'
+import { init as initAppContent } from '@financial-times/dotcom-ui-app-context/src/client/browser'
+import { displayAds, getAdsData, adsUtils } from '@financial-times/ads-display'
 import * as dataEmbed from '@financial-times/dotcom-ui-data-embed'
 import * as tracking from '@financial-times/n-tracking'
-import * as ads from '@financial-times/n-ads'
 
 import { DATA_EMBED_ID } from '../constants.js'
 
-readyState.domready.then(() => {
+readyState.domready.then(async () => {
   const flagsClient = flags.init()
-  const appContextClient = appContext.init()
+  const appContextClient = initAppContent()
   const dataEmbedClient = dataEmbed.init({ id: DATA_EMBED_ID })
 
   console.log('Shared data', dataEmbedClient.getAll()) // eslint-disable-line no-console
@@ -19,15 +19,68 @@ readyState.domready.then(() => {
 
   tracking.init({ appContext: appContextClient.getAll() })
 
-  ads
-    .init(
-      {
-        trackingCallback: console.log, // eslint-disable-line no-console,
-        appContext: appContextClient.getAll()
+  if (flagsClient.get('ads')) {
+    /**
+     * Make context-specific adjustments here
+     * e.g. checking whether an article is being previewed:
+     * sandbox: /\/preview/.test(location.pathname);
+     */
+    const rootId = adsUtils.getRootID()
+    const displayAdsOptions = {
+      sandbox: true, // in this demo context, always sandbox ads
+      appName: appContextClient.get('appName'),
+      abTestState: appContextClient.get('abTestState'),
+      rootId,
+      disableMonitoring: false,
+      lazyLoadMargins: {
+        760: '15%',
+        980: '5%'
       },
-      flagsClient
-    )
-    .then(() => {
-      // Ads slots are ready and will request ads
-    })
+      waitForMoat: true
+    }
+
+    if (flagsClient.get('moatAdsTraffic')) {
+      displayAds.validateTraffic?.()
+    }
+
+    // Fetch the ads data
+    try {
+      const adsData = await getAdsData({
+        user: true,
+        page: {
+          type: 'article',
+          id: appContextClient.get('contentId')
+        }
+      })
+      displayAds.init(
+        {
+          ...displayAdsOptions,
+          targeting: adsData.metadata,
+          adUnit: adsData.adUnit,
+          smartmatch: flagsClient.get('adsEnableSmartmatchInTargeting') && adsData.smartmatch
+        },
+        flagsClient
+      )
+
+      if (flagsClient.get('AdsPermutive')) {
+        adsUtils.enablePermutiveFtCom({
+          metadata: adsData.metadata,
+          type: appContextClient.get('appName'),
+          rootId
+        })
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'There was an error fetching the ads data. Loading basic permutive and ads without targeting or ad unit',
+        err
+      )
+
+      displayAds.init(displayAdsOptions, flagsClient)
+      adsUtils.enablePermutiveFtCom({
+        type: appContextClient.get('appName'),
+        rootId
+      })
+    }
+  }
 })

examples/kitchen-sink/package.json

@@ -11,6 +11,7 @@
     "test": "../../node_modules/.bin/jest"
   },
   "dependencies": {
+    "@financial-times/ads-display": "^5.2.8",
     "@financial-times/dotcom-middleware-app-context": "file:../../packages/dotcom-middleware-app-context",
     "@financial-times/dotcom-middleware-asset-loader": "file:../../packages/dotcom-middleware-asset-loader",
     "@financial-times/dotcom-middleware-navigation": "file:../../packages/dotcom-middleware-navigation",
@@ -19,19 +20,20 @@
     "@financial-times/dotcom-ui-flags": "file:../../packages/dotcom-ui-flags",
     "@financial-times/dotcom-ui-layout": "file:../../packages/dotcom-ui-layout",
     "@financial-times/dotcom-ui-shell": "file:../../packages/dotcom-ui-shell",
-    "@financial-times/n-ads": "^3.1.0",
-    "@financial-times/n-tracking": "^1.0.0-beta.1",
+    "@financial-times/n-tracking": "7.2.1",
     "express": "^4.16.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "sucrase": "^3.10.1"
   },
   "devDependencies": {
+    "@financial-times/dotcom-base-styles": "file:../../packages/dotcom-build-base",
+    "@financial-times/dotcom-build-base": "file:../../packages/dotcom-build-base",
     "@financial-times/dotcom-build-code-splitting": "file:../../packages/dotcom-build-code-splitting",
     "@financial-times/dotcom-build-js": "file:../../packages/dotcom-build-js",
     "@financial-times/dotcom-build-sass": "file:../../packages/dotcom-build-sass",
-    "@financial-times/dotcom-build-base": "file:../../packages/dotcom-build-base",
     "@sucrase/jest-plugin": "^2.0.0",
+    "n-ui-foundations": "^9.0.0",
     "nodemon": "^1.18.9",
     "ready-state": "^2.0.5",
     "webpack": "^4.42.0",

examples/kitchen-sink/server/app.js

@@ -8,7 +8,11 @@ const app = express()
 app.use(
   navigation.init(),
   assets.init({ hostStaticAssets: true }),
-  appContext.init({ appContext: { appName: 'kitchen-sink' } })
+  appContext.init({
+    appContext: {
+      appName: 'Kitchen Sink'
+    }
+  })
 )
 
 // Embed custom data into every view

examples/kitchen-sink/server/controllers/home.js

@@ -3,13 +3,36 @@ const ReactDOM = require('react-dom/server')
 const { DataEmbed } = require('@financial-times/dotcom-ui-data-embed')
 const { Shell } = require('@financial-times/dotcom-ui-shell')
 const { Layout } = require('@financial-times/dotcom-ui-layout')
-const { Slot, AdsOptionsEmbed } = require('@financial-times/n-ads')
 
 const { DATA_EMBED_ID } = require('../../constants.js')
 
+const AdsContainer = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center'
+    }}
+    data-o-ads-name="top"
+    data-o-ads-targeting="pos=top"
+    data-o-ads-formats="MediumRectangle"
+  ></div>
+)
+
+const flagsStore = {
+  ads: true,
+  tracking: true,
+  oTracking: true,
+  adsEnableSmartmatchInTargeting: true,
+  AdsPermutive: true,
+  moatAdsTraffic: true,
+  adsEnableTestCreatives: false
+}
+
 module.exports = (_, response, next) => {
   try {
-    const flags = { ads: true, tracking: true }
+    const flags = {
+      ...flagsStore
+    }
     const { appContext, assetLoader, embeddedData } = response.locals
     const styleBundles = [
       ...assetLoader.getStylesheetURLsFor('page-kit-layout-styles'),
@@ -18,21 +41,6 @@ module.exports = (_, response, next) => {
     const asyncStyleBundles = assetLoader.getStylesheetURLsFor('async')
     const scriptBundles = assetLoader.getScriptURLsFor('scripts')
 
-    const adOptions = {
-      dfp_site: 'ft.com',
-      dfp_zone: 'Home/UK'
-    }
-
-    const adSlotProps = {
-      name: 'leaderboard',
-      formatSmall: false,
-      formatsLarge: 'SuperLeaderboard,Leaderboard,Responsive',
-      formatsExtra: 'Billboard,SuperLeaderboard,Leaderboard,Responsive',
-      targeting: {
-        pos: 'top'
-      }
-    }
-
     const Page = () => (
       <Shell
         flags={flags}
@@ -42,8 +50,7 @@ module.exports = (_, response, next) => {
         asyncStylesheets={asyncStyleBundles}
         appContext={appContext.data}
       >
-        <AdsOptionsEmbed {...adOptions} />
-        <Layout navigationData={response.locals.navigation} headerBefore={<Slot {...adSlotProps} />}>
+        <Layout navigationData={response.locals.navigation} headerBefore={<AdsContainer />}>
           <div className="content">
             <div align="center">
               <p className="hello">Hello, welcome to Page Kit.</p>