@newskit-render/core 2.9.0 → 2.10.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.10.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.10.0-alpha.0...@newskit-render/core@2.10.0) (2022-10-26)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [2.9.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.9.3-alpha.0...@newskit-render/core@2.9.3) (2022-10-20)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [2.9.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.9.2-alpha.0...@newskit-render/core@2.9.2) (2022-10-20)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [2.9.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.9.1-alpha.0...@newskit-render/core@2.9.1) (2022-10-20)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 # [2.9.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@2.9.0-alpha.0...@newskit-render/core@2.9.0) (2022-10-17)
 
 **Note:** Version bump only for package @newskit-render/core

package/README.md

@@ -1,6 +1,6 @@
 # @newskit-render/core
 
-А template website built using Next.js framework.
+А template website built using Next.js framework
 
 This package is used by [@newskit-render/create-render-app](https://www.npmjs.com/package/@newskit-render/create-render-app) as a template structure to scaffold the newly created project which the users of @newskit-render/create-render-app can use and modify for their purposes.
 
@@ -258,3 +258,23 @@ const AppContextProvider = ({ children }: { children: JSX.Element }) => {
 
 export { AppContextProvider, AppContext }
 ```
+
+### create-render-app effected comments
+
+You may see some lines of code that have comments next to them:
+
+```
+code here // create-render-app effected
+```
+
+Or around them:
+
+```
+// start create-render-app effected
+code here
+// end create-render-app effected
+```
+
+This comment is to denote that the line or lines in between are effected by the running of the [@newskit-render/create-render-app package](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/create-render-app).
+
+If you our touching / modifiying code with these comments you need to be aware that you may affect the successful running of the [@newskit-render/create-render-app package](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/create-render-app).

package/__tests__/pages/[articleSlug].test.tsx

@@ -96,6 +96,14 @@ jest.mock('newrelic', () => {
   }
 })
 
+// start create-render-app effected
+jest.mock('@newskit-render/feature-flags', () => ({
+  initAndGetFeatureFlag: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ test: 'test' })),
+}))
+// end create-render-app effected
+
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
   createApolloClient: jest.fn().mockImplementation(() => {
@@ -133,7 +141,14 @@ describe('Article', () => {
         req: { headers: { cookie: 'some-cookie', host: 'hostname' } },
         res: { setHeader: setHeaderMock },
       })
-      expect(response).toEqual({ props: { ...props, showAds: true, user } })
+      expect(response).toEqual({
+        props: {
+          ...props,
+          showAds: true,
+          user,
+          featureFlags: { test: 'test' }, // create-render-app effected
+        },
+      })
       expect(setHeaderMock).toHaveBeenCalledWith(
         'Cache-Control',
         'public, s-maxage=10, stale-while-revalidate=59'

package/__tests__/pages/home.test.tsx

@@ -25,6 +25,14 @@ jest.mock('cross-fetch', () =>
   )
 )
 
+// start create-render-app effected
+jest.mock('@newskit-render/feature-flags', () => ({
+  initAndGetFeatureFlag: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ test: 'test' })),
+}))
+// end create-render-app effected
+
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
   createApolloClient: jest.fn().mockImplementation(() => {
@@ -82,6 +90,7 @@ describe('getServerSideProps', () => {
           },
           showAds: true,
           user,
+          featureFlags: { test: 'test' }, // create-render-app effected
         },
       })
     )

package/__tests__/pages/relatedArticles.test.tsx

@@ -34,6 +34,14 @@ jest.mock('cross-fetch', () =>
   )
 )
 
+// start create-render-app effected
+jest.mock('@newskit-render/feature-flags', () => ({
+  initAndGetFeatureFlag: jest
+    .fn()
+    .mockImplementation(() => Promise.resolve({ test: 'test' })),
+}))
+// end create-render-app effected
+
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
   getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
@@ -61,7 +69,14 @@ describe('Article', () => {
         req: { headers: { cookie: 'some-cookie' } },
         res: { setHeader: setHeaderMock },
       })
-      expect(response).toEqual({ props: { ...props, showAds: true, user } })
+      expect(response).toEqual({
+        props: {
+          ...props,
+          showAds: true,
+          user,
+          featureFlags: { test: 'test' }, // create-render-app effected
+        },
+      })
       expect(setHeaderMock).toHaveBeenCalledWith(
         'Cache-Control',
         'public, s-maxage=10, stale-while-revalidate=59'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,24 +33,24 @@
     "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
-    "@apollo/client": "3.7.0",
+    "@apollo/client": "3.4.16",
     "@emotion-icons/material": "3.14.0",
     "@emotion-icons/material-outlined": "3.14.0",
     "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
-    "@newskit-render/api": "^1.2.0",
-    "@newskit-render/auth": "^1.1.0",
-    "@newskit-render/checkout": "^1.3.0",
-    "@newskit-render/feature-flags": "^1.1.0",
-    "@newskit-render/feed": "^1.1.0",
-    "@newskit-render/my-account": "^3.6.0",
-    "@newskit-render/shared-components": "^1.6.0",
-    "@newskit-render/standalone-components": "^1.5.0",
-    "@newskit-render/validation": "^1.2.0",
+    "@newskit-render/api": "^1.2.1",
+    "@newskit-render/auth": "^1.1.1",
+    "@newskit-render/checkout": "^1.3.2",
+    "@newskit-render/feature-flags": "^1.2.0",
+    "@newskit-render/feed": "^1.1.1",
+    "@newskit-render/my-account": "^3.7.0",
+    "@newskit-render/shared-components": "^1.6.1",
+    "@newskit-render/standalone-components": "^1.5.1",
+    "@newskit-render/validation": "^1.2.1",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "lodash.get": "4.4.2",
-    "newrelic": "9.2.0",
+    "newrelic": "7.1.0",
     "newskit": "6.1.0",
     "next": "12.3.0",
     "react": "18.2.0",

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -9,6 +9,7 @@ import {
 import { UserData } from '@newskit-render/my-account'
 import { Article } from '@newskit-render/standalone-components'
 import { getHost } from '@newskit-render/shared-components'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { fetchUser } from '../../../helpers/getUser'
@@ -17,6 +18,7 @@ import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
 import {
   twitterUsername as configTwitterUsername,
   gscId as configGscId,
+  optimizelysdkKey, // create-render-app effected
 } from '../../../config'
 import { fetcher } from '../../../helpers/getRecommendations'
 
@@ -89,6 +91,7 @@ export async function getServerSideProps(context) {
     }),
     await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
   ])
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
 
   addCacheHeaders(context.res)
   return {
@@ -101,6 +104,7 @@ export async function getServerSideProps(context) {
       showAds: true,
       user,
       articleId,
+      featureFlags, // create-render-app effected
     },
   }
 }

package/pages/[section]/[articleId]/relatedArticles.tsx

@@ -6,6 +6,8 @@ import { Article } from '@newskit-render/standalone-components'
 import { getHost } from '@newskit-render/shared-components'
 import { Block, Cell, TitleBar } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { fetchUser } from '../../../helpers/getUser'
 import { getAccountQueryUrl } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
@@ -83,6 +85,7 @@ export async function getServerSideProps(context) {
   const [user] = await Promise.all([
     await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
   ])
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
 
   addCacheHeaders(context.res)
 
@@ -91,6 +94,7 @@ export async function getServerSideProps(context) {
       showAds: true,
       user,
       articleId,
+      featureFlags, // create-render-app effected
     },
   }
 }

package/pages/[section]/index.tsx

@@ -5,6 +5,8 @@ import {
   ClientTypes,
 } from '@newskit-render/api'
 import { getHost } from '@newskit-render/shared-components'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../config' // create-render-app effected
 import { GET_PAGE } from '../../queries'
 import SectionPage from '../../components/section'
 import { fetchUser } from '../../helpers/getUser'
@@ -30,7 +32,10 @@ export async function getServerSideProps(context) {
     const [{ data: pageData }, pageUser] = await Promise.all([
       apolloClient.query({
         query: GET_PAGE,
-        variables: { channel: section, publisher: 'DEMO' },
+        variables: {
+          channel: section,
+          publisher: 'DEMO',
+        },
       }),
       await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
     ])
@@ -41,6 +46,7 @@ export async function getServerSideProps(context) {
       notFound: true,
     }
   }
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
 
   addCacheHeaders(context.res)
   return {
@@ -49,6 +55,7 @@ export async function getServerSideProps(context) {
       isIndexPage: true,
       showAds: true,
       user,
+      featureFlags, // create-render-app effected
     },
   }
 }

package/pages/_app.tsx

@@ -2,17 +2,10 @@ import React from 'react'
 import { AppContext as AppContextType, AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, styled } from 'newskit'
-import {
-  getFeatureFlags,
-  FeatureFlagsContextProvider,
-  FeatureFlag,
-  createFeatureFlagsInstance,
-} from '@newskit-render/feature-flags'
 import { Publisher } from '@newskit-render/api'
 import { AppContextProvider, AppContext } from '../context/app-context'
 import { logger } from '../helpers/logger'
 
-import { optimizelysdkKey } from '../config'
 import { InstrumentationContextProvider } from '../app-context/InstrumentationContextProvider'
 import { getTenant } from '../helpers/multiTenancy'
 import { GlobalStyling } from '../css'
@@ -24,23 +17,16 @@ if (!process.browser) {
   logger()
 }
 
-if (optimizelysdkKey) {
-  createFeatureFlagsInstance({
-    optimizelyConfig: { sdkKey: optimizelysdkKey },
-  })
-}
-
 const PageContainer = styled.div`
   position: relative;
   min-height: 100vh;
 `
 
 interface MyAppProps extends AppProps {
-  featureFlags?: FeatureFlag
   tenant: Publisher
 }
 
-function MyApp({ Component, pageProps, featureFlags, tenant }: MyAppProps) {
+function MyApp({ Component, pageProps, tenant }: MyAppProps) {
   return (
     <MultiTenancyProvider tenant={tenant}>
       <AppContextProvider>
@@ -56,18 +42,16 @@ function MyApp({ Component, pageProps, featureFlags, tenant }: MyAppProps) {
             />
           </Head>
           <InstrumentationContextProvider>
-            <FeatureFlagsContextProvider context={featureFlags}>
-              <AppContext.Consumer>
-                {({ theme }) => (
-                  <ThemeProvider theme={theme}>
-                    <Global styles={GlobalStyling} />
-                    <PageContainer>
-                      <Component {...pageProps} />
-                    </PageContainer>
-                  </ThemeProvider>
-                )}
-              </AppContext.Consumer>
-            </FeatureFlagsContextProvider>
+            <AppContext.Consumer>
+              {({ theme }) => (
+                <ThemeProvider theme={theme}>
+                  <Global styles={GlobalStyling} />
+                  <PageContainer>
+                    <Component {...pageProps} />
+                  </PageContainer>
+                </ThemeProvider>
+              )}
+            </AppContext.Consumer>
           </InstrumentationContextProvider>
         </>
       </AppContextProvider>
@@ -82,11 +66,10 @@ MyApp.getInitialProps = async ({ Component, ctx }: AppContextType) => {
     pageProps = await Component.getInitialProps(ctx)
   }
 
-  if (optimizelysdkKey) {
-    const featureFlags = await getFeatureFlags()
-    return { featureFlags, pageProps, tenant }
+  return {
+    pageProps,
+    tenant,
   }
-  return { pageProps, tenant }
 }
 
 export default MyApp

package/pages/_document.tsx

@@ -53,7 +53,7 @@ export default class MyDocument extends Document {
         ? this.props.__NEXT_DATA__.props.pageProps.showAds
         : false
 
-    const { featureFlags } = this.props.__NEXT_DATA__.props
+    const { featureFlags } = this.props.__NEXT_DATA__.props.pageProps
     return (
       <Html lang="en">
         <Head>
@@ -75,7 +75,9 @@ export default class MyDocument extends Document {
               featureFlags &&
               featureFlags.experimentation_web_flag && (
                 <ExperimentationWeb
-                  optimizelyWebConfig={{ scriptCdn: experimentationWeb }}
+                  optimizelyWebConfig={{
+                    scriptCdn: experimentationWeb,
+                  }}
                   reactHelmet={Helmet}
                 />
               )}

package/pages/account/cancellation/index.tsx

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 import validation from '../../../validation'
@@ -22,5 +24,9 @@ export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Cancellation')
-  return getProviderProps({ ...context, provider: 'Cancellation' })
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  return getProviderProps(
+    { ...context, provider: 'Cancellation' },
+    { featureFlags } // create-render-app effected
+  )
 }

package/pages/account/edit/[field].tsx

@@ -6,6 +6,8 @@ import {
   NotFound,
   componentMap,
 } from '@newskit-render/my-account'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import validation from '../../../validation'
 import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
@@ -43,5 +45,9 @@ export const getServerSideProps = async (context) => {
     // Logging the error for being captured by New Relic
     console.error(`An error ${context.res.statusCode} occurred on server`)
   }
-  return getProviderProps({ ...context, provider: 'EditField' })
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  return getProviderProps(
+    { ...context, provider: 'EditField' },
+    { featureFlags } // create-render-app effected
+  )
 }

package/pages/account/holiday-stop/book.tsx

@@ -1,6 +1,8 @@
 import { getProviderProps, HolidayStop } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
@@ -20,5 +22,9 @@ export default AccountHolidayStop
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Book a Holiday Stop')
-  return getProviderProps({ ...context, provider: 'HolidayStop' })
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  return getProviderProps(
+    { ...context, provider: 'HolidayStop' },
+    { featureFlags } // create-render-app effected
+  )
 }

package/pages/account/index.tsx

@@ -1,6 +1,8 @@
 import newrelic from 'newrelic'
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
 import React, { useContext } from 'react'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../config' // create-render-app effected
 import { AppContext } from '../../context/app-context'
 import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 
@@ -19,6 +21,10 @@ const AccountPersonalDetails = (props) => {
 export default AccountPersonalDetails
 
 export const getServerSideProps = async (context) => {
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
   newrelic.setTransactionName('Account: Personal details')
-  return getProviderProps({ ...context, provider: 'PersonalDetails' })
+  return getProviderProps(
+    { ...context, provider: 'PersonalDetails' },
+    { featureFlags } // create-render-app effected
+  )
 }

package/pages/account/newsletters-and-alerts/index.tsx

@@ -4,6 +4,8 @@ import {
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
@@ -23,5 +25,9 @@ export default AccountNewslettersAndAlerts
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Newsletters and Alerts')
-  return getProviderProps({ ...context, provider: 'NewslettersAndAlerts' })
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  return getProviderProps(
+    { ...context, provider: 'NewslettersAndAlerts' },
+    { featureFlags } // create-render-app effected
+  )
 }

package/pages/account/payment/index.tsx

@@ -5,6 +5,8 @@ import {
   PaymentProvider,
 } from '@newskit-render/my-account'
 import React, { useContext } from 'react'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
@@ -24,10 +26,14 @@ export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Edit Payment method')
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
 
-  return getProviderProps({
-    ...context,
-    provider: 'Payment',
-    paymentProvider: PaymentProvider.Zuora,
-  })
+  return getProviderProps(
+    {
+      ...context,
+      provider: 'Payment',
+      paymentProvider: PaymentProvider.Zuora,
+    },
+    { featureFlags } // create-render-app effected
+  )
 }

package/pages/account/subscription-and-billing/index.tsx

@@ -4,6 +4,8 @@ import {
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../../../config' // create-render-app effected
 import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
@@ -23,10 +25,14 @@ export default AccountSubscriptionAndBilling
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Subscription and Billing')
-  const result = await getProviderProps({
-    ...context,
-    provider: 'SubscriptionAndBilling',
-  })
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  const result = await getProviderProps(
+    {
+      ...context,
+      provider: 'SubscriptionAndBilling',
+    },
+    { featureFlags } // create-render-app effected
+  )
 
   return result
 }

package/pages/index.tsx

@@ -5,6 +5,8 @@ import {
   ClientTypes,
 } from '@newskit-render/api'
 import { getHost } from '@newskit-render/shared-components'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { optimizelysdkKey } from '../config' // create-render-app effected
 import { GET_PAGE } from '../queries'
 import SectionPage from '../components/section'
 import { fetchUser } from '../helpers/getUser'
@@ -24,10 +26,14 @@ export async function getServerSideProps(context) {
   const [{ data }, user] = await Promise.all([
     apolloClient.query({
       query: GET_PAGE,
-      variables: { channel: 'homepage', publisher: 'DEMO' },
+      variables: {
+        channel: 'homepage',
+        publisher: 'DEMO',
+      },
     }),
     await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
   ])
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
 
   addCacheHeaders(context.res)
   const { page } = data
@@ -36,6 +42,7 @@ export async function getServerSideProps(context) {
       page,
       showAds: true,
       user,
+      featureFlags, // create-render-app effected
     },
   }
 }

package/temp/_document.tsx

@@ -25,6 +25,7 @@ export default class MyDocument extends Document {
   render() {
     const helmet = Helmet.rewind()
     <% SHOWADS >
+    <% SHOWFEATUREFLAGS >
     return (
       <Html lang="en">
         <Head>