@newskit-render/core 1.17.4 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.17.4",
+  "version": "1.20.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -31,17 +31,18 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.10.1",
-    "@newskit-render/auth": "^0.26.1",
-    "@newskit-render/checkout": "^0.16.1",
-    "@newskit-render/my-account": "^0.126.1",
-    "@newskit-render/shared-components": "^0.27.1",
-    "@newskit-render/sitemap": "^0.29.1",
-    "@newskit-render/validation": "^0.31.1",
+    "@newskit-render/api": "^0.12.0",
+    "@newskit-render/auth": "^0.27.0",
+    "@newskit-render/checkout": "^0.18.0",
+    "@newskit-render/feature-flags": "^0.9.0",
+    "@newskit-render/my-account": "^0.129.0",
+    "@newskit-render/shared-components": "^0.29.0",
+    "@newskit-render/sitemap": "^0.31.0",
+    "@newskit-render/validation": "^0.33.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",
-    "newskit": "4.3.1",
+    "newskit": "5.0.0",
     "next": "12.0.8",
     "react": "17.0.2",
     "react-dom": "17.0.2",

package/pages/_app.tsx

@@ -3,6 +3,12 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, css, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
+import {
+  getFeatureFlags,
+  FeatureFlagsContextProvider,
+  FeatureFlag,
+  createFeatureFlagsInstance,
+} from '@newskit-render/feature-flags'
 import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
 
@@ -12,6 +18,12 @@ if (!process.browser) {
   logger()
 }
 
+if (process.env.OPTIMIZELY_SDK_KEY) {
+  createFeatureFlagsInstance({
+    optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY },
+  })
+}
+
 const GlobalStyling = css`
   @font-face {
     font-family: GillSansMTStd-Medium;
@@ -240,7 +252,11 @@ const PageContainer = styled.div`
   min-height: 100vh;
 `
 
-function MyApp({ Component, pageProps }: AppProps) {
+interface MyAppProps extends AppProps {
+  featureFlags?: FeatureFlag
+}
+
+function MyApp({ Component, pageProps, featureFlags }: MyAppProps) {
   return (
     <AppContextProvider>
       <>
@@ -254,21 +270,31 @@ function MyApp({ Component, pageProps }: AppProps) {
             key="viewport"
           />
         </Head>
-        <SessionProvider pageProps={pageProps}>
-          <AppContext.Consumer>
-            {({ theme }) => (
-              <ThemeProvider theme={theme}>
-                <Global styles={GlobalStyling} />
-                <PageContainer>
-                  <Component {...pageProps} />
-                </PageContainer>
-              </ThemeProvider>
-            )}
-          </AppContext.Consumer>
-        </SessionProvider>
+        <FeatureFlagsContextProvider context={featureFlags}>
+          <SessionProvider pageProps={pageProps}>
+            <AppContext.Consumer>
+              {({ theme }) => (
+                <ThemeProvider theme={theme}>
+                  <Global styles={GlobalStyling} />
+                  <PageContainer>
+                    <Component {...pageProps} />
+                  </PageContainer>
+                </ThemeProvider>
+              )}
+            </AppContext.Consumer>
+          </SessionProvider>
+        </FeatureFlagsContextProvider>
       </>
     </AppContextProvider>
   )
 }
 
+MyApp.getInitialProps = async () => {
+  if (process.env.OPTIMIZELY_SDK_KEY) {
+    const featureFlags = await getFeatureFlags()
+    return { featureFlags }
+  }
+  return {}
+}
+
 export default MyApp

package/pages/_document.tsx

@@ -32,7 +32,13 @@ export default class MyDocument extends Document {
 
   render() {
     const helmet = Helmet.rewind()
-    const { showAds } = this.props.__NEXT_DATA__.props.pageProps
+    const showAds =
+      this.props.__NEXT_DATA__.props.pageProps &&
+      this.props.__NEXT_DATA__.props.pageProps.showAds
+        ? this.props.__NEXT_DATA__.props.pageProps.showAds
+        : false
+
+    const { featureFlags } = this.props.__NEXT_DATA__.props
     return (
       <Html lang="en">
         <Head>
@@ -47,12 +53,14 @@ export default class MyDocument extends Document {
               ),
             }}
           />
-          {EXPERIMENTATION_WEB && (
-            <ExperimentationWeb
-              optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
-              reactHelmet={Helmet}
-            />
-          )}
+          {EXPERIMENTATION_WEB &&
+            featureFlags &&
+            featureFlags.experimentation_web_flag && (
+              <ExperimentationWeb
+                optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
+                reactHelmet={Helmet}
+              />
+            )}
           {helmet.script.toComponent()}
           {SOURCEPOINT_ACCOUNT_ID && (
             <Consent

package/pages/checkout/account-creation/index.tsx

@@ -1,10 +1,18 @@
 import { AccountCreation, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import validation from '../../../validation'
 
 const AccountCreationPage = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <AccountCreation {...props} customTheme={theme} setTheme={setTheme} />
+  return (
+    <AccountCreation
+      {...props}
+      customTheme={theme}
+      setTheme={setTheme}
+      validation={validation}
+    />
+  )
 }
 
 export default AccountCreationPage

package/theme/colours.json

@@ -0,0 +1,4 @@
+{
+  "neutral100": "rgba(25, 26, 26, 1)",
+  "customInterfaceBrand": "{{colors.neutral100}}"
+}

package/theme/render-custom-theme.ts

@@ -1,9 +1,11 @@
 import { createTheme, newskitLightTheme, newskitDarkTheme } from 'newskit'
+import colors from './colours.json'
 
 export const renderCustomLightTheme = createTheme({
-  name: 'render-custom-light-theme',
+  name: 'Newskit-Light',
   baseTheme: newskitLightTheme,
   overrides: {
+    colors,
     stylePresets: {
       dividerFooterHorizontal: {
         base: {
@@ -47,9 +49,10 @@ export const renderCustomLightTheme = createTheme({
 })
 
 export const renderCustomDarkTheme = createTheme({
-  name: 'render-custom-dark-theme',
+  name: 'Newskit-Dark',
   baseTheme: newskitDarkTheme,
   overrides: {
+    colors,
     stylePresets: {
       cardContainer: {
         base: {

package/helpers/articleUtil.ts

@@ -1,4 +0,0 @@
-import { UncompiledTheme } from 'newskit'
-
-export const getKey = (obj: { [key: string]: unknown }, val: UncompiledTheme) =>
-  Object.keys(obj).find((key) => obj[key] === val)