@newskit-render/core 1.59.0 → 1.68.0

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

@@ -1,16 +1,13 @@
 import React from 'react'
+import useSWR from 'swr'
 import newrelic from 'newrelic'
 import {
   createApolloClient,
   ClientTypes,
   getAcsCookie,
-  Publisher,
 } from '@newskit-render/api'
 import { UserData } from '@newskit-render/my-account'
-import {
-  recommendationsProvider,
-  Article,
-} from '@newskit-render/standalone-components'
+import { Article } from '@newskit-render/standalone-components'
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { fetchUser } from '../../../helpers/getUser'
@@ -21,6 +18,7 @@ import {
   twitterUsername as configTwitterUsername,
   gscId as configGscId,
 } from '../../../config'
+import { fetcher } from '../../../helpers/getRecommendations'
 
 export type ArticleSlug = {
   universalArticle: UniversalArticle
@@ -29,8 +27,9 @@ export type ArticleSlug = {
   siteHost: string
   gscId?: string
   user?: UserData
-  recommendations: Article[]
+  articleId: string
 }
+
 const Article: React.FC<ArticleSlug> = ({
   universalArticle,
   articleURL,
@@ -38,8 +37,17 @@ const Article: React.FC<ArticleSlug> = ({
   siteHost,
   gscId,
   user,
-  recommendations,
+  articleId,
 }) => {
+  let userId
+  if (typeof window !== 'undefined') {
+    userId = window?.utag?.data['cp.utag_main_v_id']
+  }
+
+  const { data: recommendations = [] } = useSWR<Article[]>(
+    `/api/recommendations/${articleId}/${userId}`,
+    fetcher
+  )
   const highlitedArticles = recommendations.slice(0, 4)
   const relatedArticles = recommendations.slice(4, 12)
 
@@ -71,12 +79,11 @@ export async function getServerSideProps(context) {
     `Article: /${section}/${articleId}/${articleSlug}`
   )
 
-  const [{ data }, recommendations, user] = await Promise.all([
+  const [{ data }, user] = await Promise.all([
     apolloClient.query({
       query: GET_UNIVERSAL_ARTICLE,
       variables: { publisher: 'DEMO', id: articleId },
     }),
-    await recommendationsProvider({ articleId, publisher: Publisher.SUN_UK }),
     await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
@@ -89,8 +96,8 @@ export async function getServerSideProps(context) {
       siteHost: configSiteHost || '',
       gscId: configGscId || '',
       showAds: true,
-      recommendations,
       user,
+      articleId,
     },
   }
 }

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

@@ -1,10 +1,8 @@
 import React from 'react'
 import newrelic from 'newrelic'
-import { getAcsCookie, ClientTypes, Publisher } from '@newskit-render/api'
-import {
-  recommendationsProvider,
-  Article,
-} from '@newskit-render/standalone-components'
+import useSWR from 'swr'
+import { getAcsCookie, ClientTypes } from '@newskit-render/api'
+import { Article } from '@newskit-render/standalone-components'
 import { Block, Cell, TitleBar } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
 import { fetchUser } from '../../../helpers/getUser'
@@ -12,45 +10,58 @@ import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
 import Layout from '../../../components/layout'
 import { BasicRow } from '../../../components/section/layouts'
+import { fetcher } from '../../../helpers/getRecommendations'
 
 export type RelatedArticles = {
   user?: UserData
-  recommendations: Article[]
+  articleId
 }
 
 const RelatedArticlesPage: React.FC<RelatedArticles> = ({
   user,
-  recommendations,
-}) => (
-  <Layout dataTestId="SectionGrid" user={user}>
-    <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
-      <Block spaceStack="space080" />
-      <Block spaceStack="space080">
-        <TitleBar
-          overrides={{
-            spaceInset: {
-              xs: 'spaceInsetSquish000',
-            },
-            heading: {
-              typographyPreset: {
-                xs: 'editorialHeadline050',
-                md: 'editorialHeadline060',
-                xl: 'editorialHeadline070',
+  articleId,
+}) => {
+  let userId: string
+  if (typeof window !== 'undefined') {
+    userId = window?.utag?.data['cp.utag_main_v_id']
+  }
+
+  const { data: recommendationData = [] } = useSWR<Article[]>(
+    `/api/recommendations/${articleId}/${userId}`,
+    fetcher
+  )
+  const recommendations = recommendationData.slice(0, 18)
+  return (
+    <Layout dataTestId="SectionGrid" user={user}>
+      <Cell xs={12} md={10} mdOffset={1} data-testid="SectionCell">
+        <Block spaceStack="space080" />
+        <Block spaceStack="space080">
+          <TitleBar
+            overrides={{
+              spaceInset: {
+                xs: 'spaceInsetSquish000',
               },
-              stylePreset: 'inkContrast',
-            },
-          }}
-        >
-          Related Articles
-        </TitleBar>
-      </Block>
-      <BasicRow
-        colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' }}
-        articles={recommendations}
-      />
-    </Cell>
-  </Layout>
-)
+              heading: {
+                typographyPreset: {
+                  xs: 'editorialHeadline050',
+                  md: 'editorialHeadline060',
+                  xl: 'editorialHeadline070',
+                },
+                stylePreset: 'inkContrast',
+              },
+            }}
+          >
+            Related Articles
+          </TitleBar>
+        </Block>
+        <BasicRow
+          colums={{ xs: '1fr', md: '1fr 1fr', lg: '1fr 1fr 1fr' }}
+          articles={recommendations}
+        />
+      </Cell>
+    </Layout>
+  )
+}
 
 export async function getServerSideProps(context) {
   newrelic.setTransactionName('RelatedArticlesPage')
@@ -65,19 +76,17 @@ export async function getServerSideProps(context) {
     ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
     : ''
 
-  const [recommendations, user] = await Promise.all([
-    await recommendationsProvider({ articleId, publisher: Publisher.SUN_UK }),
+  const [user] = await Promise.all([
     await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
 
-  const recommendationsToShow = recommendations.slice(0, 18)
   return {
     props: {
-      recommendations: recommendationsToShow,
       showAds: true,
       user,
+      articleId,
     },
   }
 }

package/pages/_app.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { AppProps } from 'next/app'
+import { AppContext as AppContextType, AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, css, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
@@ -9,9 +9,14 @@ import {
   FeatureFlag,
   createFeatureFlagsInstance,
 } from '@newskit-render/feature-flags'
-import { AppContextProvider, AppContext } from '../app-context/AppContext'
+import { Publisher } from '@newskit-render/api'
+import { AppContextProvider, AppContext } from '../context/app-context'
 import { logger } from '../helpers/logger'
+
 import { optimizelysdkKey } from '../config'
+import { getTenant } from '../helpers/multiTenancy'
+import { GlobalStyling } from '../css'
+import MultiTenancyProvider from '../context/multi-tenancy'
 
 if (!process.browser) {
   // eslint-disable-next-line global-require
@@ -25,229 +30,6 @@ if (optimizelysdkKey) {
   })
 }
 
-const GlobalStyling = css`
-  @font-face {
-    font-family: GillSansMTStd-Medium;
-    src: url('/fonts/GillSansMTStd-Medium.otf');
-  }
-  @font-face {
-    font-family: TimesModern-Bold;
-    src: url('/fonts/TimesDigital-Bold.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TimesModern-Regular;
-    src: url('/fonts/TimesDigital-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TimesDigitalW04-Regular;
-    src: url('/fonts/TimesDigitalW04-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: Montserrat;
-    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-Bold;
-    src: url('/fonts/TheSun-Bold.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-HeavyNarrow;
-    src: url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-Regular;
-    src: url('/fonts/TheSun-Regular.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: TheSun-Medium;
-    src: url('/fonts/TheSun-Medium.ttf') format('truetype');
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-regular-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-regular-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-italic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-italic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-medium-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-medium-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-mediumitalic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-bold-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-bold-webfont.woff') format('woff');
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'DM Sans';
-    src: url('/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/dmsans-bolditalic-webfont.woff') format('woff');
-    font-style: italic;
-    font-weight: 700;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-bold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-bold-webfont.woff') format('woff');
-    font-weight: 700;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-bolditalic-webfont.woff') format('woff');
-    font-weight: normal;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-extrabold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-extrabold-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-extrabolditalic-webfont.woff') format('woff');
-    font-weight: 800;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-italic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-italic-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-light-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-light-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-lightitalic-webfont.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-medium-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-medium-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-mediumitalic-webfont.woff') format('woff');
-    font-weight: 500;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-regular-webfont.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-semibold-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-  }
-  @font-face {
-    font-family: 'Poppins';
-    src: url('/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),
-      url('/fonts/poppins-semibolditalic-webfont.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-  }
-  @font-face {
-    font-family: 'DM Mono';
-    src: url('/fonts/dmmono-medium.woff2') format('woff2'),
-      url('/fonts/dmmono-medium.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-regular.woff2') format('woff2'),
-      url('/fonts/bitter-regular.woff') format('woff');
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-medium.woff2') format('woff2'),
-      url('/fonts/bitter-medium.woff') format('woff');
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-mediumitalic.woff2') format('woff2'),
-      url('/fonts/bitter-mediumitalic.woff') format('woff');
-    font-style: italic;
-    font-weight: 500;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Bitter';
-    src: url('/fonts/bitter-semibold.woff2') format('woff2'),
-      url('/fonts/bitter-semibold.woff') format('woff');
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-  }
-
-  html,
-  body {
-    padding: 0;
-    margin: 0;
-    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, Segoe UI,
-      Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
-      sans-serif;
-  }
-  * {
-    box-sizing: border-box;
-  }
-`
-
 const PageContainer = styled.div`
   position: relative;
   min-height: 100vh;
@@ -255,52 +37,56 @@ const PageContainer = styled.div`
 
 interface MyAppProps extends AppProps {
   featureFlags?: FeatureFlag
+  tenant: Publisher
 }
 
-function MyApp({ Component, pageProps, featureFlags }: MyAppProps) {
+function MyApp({ Component, pageProps, featureFlags, tenant }: MyAppProps) {
   return (
-    <AppContextProvider>
-      <>
-        <Head>
-          <meta name="robots" content="max-image-preview:standard" />
-          <meta name="robots" content="max-video-preview:0" />
-          <meta google-site-verification="google-site-verification=9IZcsqYKeNo_Wlkwq6WBqgpqZuiwPGJw90Ug_LAENt4" />
-          <meta
-            name="viewport"
-            content="initial-scale=1.0, width=device-width"
-            key="viewport"
-          />
-        </Head>
-        <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>
+    <MultiTenancyProvider tenant={tenant}>
+      <AppContextProvider>
+        <>
+          <Head>
+            <meta name="robots" content="max-image-preview:standard" />
+            <meta name="robots" content="max-video-preview:0" />
+            <meta google-site-verification="google-site-verification=9IZcsqYKeNo_Wlkwq6WBqgpqZuiwPGJw90Ug_LAENt4" />
+            <meta
+              name="viewport"
+              content="initial-scale=1.0, width=device-width"
+              key="viewport"
+            />
+          </Head>
+          <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>
+    </MultiTenancyProvider>
   )
 }
 
-MyApp.getInitialProps = async ({ Component, ctx }) => {
+MyApp.getInitialProps = async ({ Component, ctx }: AppContextType) => {
   let pageProps = {}
+  const tenant = getTenant(ctx.req?.headers?.host)
   if (Component.getInitialProps) {
     pageProps = await Component.getInitialProps(ctx)
   }
 
   if (optimizelysdkKey) {
     const featureFlags = await getFeatureFlags()
-    return { featureFlags, pageProps }
+    return { featureFlags, pageProps, tenant }
   }
-  return { pageProps }
+  return { pageProps, tenant }
 }
 
 export default MyApp

package/pages/account/cancellation/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 import validation from '../../../validation'
 

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

@@ -7,7 +7,7 @@ import {
   componentMap,
 } from '@newskit-render/my-account'
 import validation from '../../../validation'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountEditField = (props) => {

package/pages/account/index.tsx

@@ -1,7 +1,7 @@
 import newrelic from 'newrelic'
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
 import React, { useContext } from 'react'
-import { AppContext } from '../../app-context/AppContext'
+import { AppContext } from '../../context/app-context'
 import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 
 const AccountPersonalDetails = (props) => {

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

@@ -4,7 +4,7 @@ import {
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountNewslettersAndAlerts = (props) => {

package/pages/account/payment/index.tsx

@@ -5,7 +5,7 @@ import {
   PaymentProvider,
 } from '@newskit-render/my-account'
 import React, { useContext } from 'react'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountCancellation = (props) => {

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

@@ -4,7 +4,7 @@ import {
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountSubscriptionAndBilling = (props) => {

package/pages/api/auth/[...nextauth].ts

@@ -3,4 +3,8 @@ import { NextApiRequest, NextApiResponse } from 'next'
 import { oktaClientId, oktaClientSecret, oktaDomain } from '../../../config'
 
 export default (req: NextApiRequest, res: NextApiResponse) =>
-  createAuthRoute(req, res, { oktaClientId, oktaClientSecret, oktaDomain })
+  createAuthRoute(req, res, {
+    clientId: oktaClientId,
+    clientSecret: oktaClientSecret,
+    issuer: oktaDomain,
+  })

package/pages/api/recommendations/[...slug].ts

@@ -0,0 +1,21 @@
+import { NextApiRequest, NextApiResponse } from 'next'
+import { Publisher } from '@newskit-render/api'
+import { getRecommendations } from '../../../helpers/getRecommendations'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  try {
+    const [articleId, userId] = req.query.slug as string[]
+    const result = await getRecommendations({
+      articleId,
+      publisher: Publisher.SUN_UK,
+      userId,
+    })
+    res.setHeader('Content-Type', 'application/json')
+    res.end(JSON.stringify(result))
+  } catch (error) {
+    res.json(error)
+    res.status(405).end()
+  }
+}
+
+export default handler

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

@@ -1,6 +1,6 @@
 import { AccountCreation, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import validation from '../../../validation'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 

package/pages/checkout/payment-details/index.tsx

@@ -1,6 +1,6 @@
 import { PaymentDetails, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
-import { AppContext } from '../../../app-context/AppContext'
+import { AppContext } from '../../../context/app-context'
 import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const PaymentDetailsPage = (props) => {