@newskit-render/core 1.66.0 → 1.68.0

package/{app-context/AppContext.tsx → context/app-context/index.tsx}

@@ -1,6 +1,8 @@
 import React, { useState } from 'react'
 import { UncompiledTheme } from 'newskit'
 import { sharedTheme } from '@newskit-render/shared-components'
+import { useMultiTenancy } from '../multi-tenancy'
+import { themesMap } from '../../config'
 
 type AppContextType = {
   theme: UncompiledTheme
@@ -12,7 +14,9 @@ const AppContext = React.createContext({
 } as AppContextType)
 
 const AppContextProvider = ({ children }: { children: JSX.Element }) => {
-  const [theme, setTheme] = useState(sharedTheme)
+  const { tenant } = useMultiTenancy()
+  const tenantTheme = themesMap[tenant]
+  const [theme, setTheme] = useState(tenantTheme)
 
   return (
     <AppContext.Provider value={{ theme, setTheme }}>

package/context/index.tsx

@@ -0,0 +1,2 @@
+export * from './app-context'
+export * from './multi-tenancy'

package/context/multi-tenancy/MultiTenancy.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from 'react-dom'
+import { timesTheme } from '@newskit-render/shared-components'
+import { Publisher } from '@newskit-render/api'
+import { AppContext, AppContextProvider } from '../app-context'
+import MultiTenancyProvider, { useMultiTenancy } from '.'
+
+const container = document.createElement('div')
+document.body.appendChild(container)
+
+const TestComponent = ({ mockFunction }) => {
+  const accountData = useMultiTenancy()
+  mockFunction(accountData)
+  return null
+}
+
+describe('Multi-Tenancy context', () => {
+  it('should select the correct theme based on the tenant', () => {
+    render(
+      <MultiTenancyProvider tenant={Publisher.TIMES}>
+        <AppContextProvider>
+          <AppContext.Consumer>
+            {({ theme }) => <div>{JSON.stringify(theme)}</div>}
+          </AppContext.Consumer>
+        </AppContextProvider>
+      </MultiTenancyProvider>,
+      container
+    )
+
+    expect(container.textContent).toBe(JSON.stringify(timesTheme))
+  })
+
+  it('should receive proper context', () => {
+    const mockFunction = jest.fn()
+    render(
+      <MultiTenancyProvider tenant={Publisher.DEMO}>
+        <TestComponent mockFunction={mockFunction} />
+      </MultiTenancyProvider>,
+      container
+    )
+
+    expect(mockFunction).toHaveBeenCalledWith({
+      tenant: Publisher.DEMO,
+      getTenantString: expect.any(Function),
+    })
+  })
+})

package/context/multi-tenancy/index.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext } from 'react'
+import get from 'lodash.get'
+import { Publisher } from '@newskit-render/api'
+import { translationsMap } from '../../config'
+
+export interface MultiTenancyContextProps {
+  tenant?: Publisher
+  getTenantString?: (key: string, defaultValue?: string) => string
+}
+
+const MultiTenancyContext = createContext<MultiTenancyContextProps>({})
+
+const MultiTenancyProvider: React.FC<MultiTenancyContextProps> = ({
+  tenant,
+  children,
+}) => (
+  <MultiTenancyContext.Provider
+    value={{
+      tenant,
+      getTenantString: (key: string, defaultValue: string = ''): string => {
+        const data = translationsMap[tenant]
+        return get(data, key, defaultValue)
+      },
+    }}
+  >
+    {children}
+  </MultiTenancyContext.Provider>
+)
+
+export const useMultiTenancy = () => useContext(MultiTenancyContext)
+export default MultiTenancyProvider

package/css/index.ts

@@ -0,0 +1,224 @@
+import { css } from 'newskit'
+
+export 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;
+  }
+`

package/cypress/support/commands.js

@@ -1,12 +1,16 @@
+//Note: Check periodically if these consent cookie values exprire
+const nuktSPConsentValue = 'JABCDEFGHI'
+const consentUUIDValue = 'ff8ac797-02c4-4fb4-81f2-22f8ba2e8723_8'
+
 Cypress.Commands.add('mockConsentAndVisit', (url) => {
-  cy.setCookie('nukt_sp_consent', 'JABCDEFGHI')
-  cy.setCookie('consentUUID', '28cfcd1e-6916-4488-9d84-54f2618eaa14')
+  cy.setCookie('nukt_sp_consent', nuktSPConsentValue)
+  cy.setCookie('consentUUID', consentUUIDValue)
   cy.visit(url)
 })
 
 Cypress.Commands.add('mockConsent', () => {
-  cy.setCookie('nukt_sp_consent', 'JABCDEFGHI')
-  cy.setCookie('consentUUID', '28cfcd1e-6916-4488-9d84-54f2618eaa14')
+  cy.setCookie('nukt_sp_consent', nuktSPConsentValue)
+  cy.setCookie('consentUUID', consentUUIDValue)
 })
 
 const userMap = {

package/helpers/__tests__/createThemeDropdownObject.test.ts

@@ -13,17 +13,17 @@ describe('createThemeDropdownObject', () => {
       },
       clientNavigationLogos: {
         'The-Sun': {
-          src: 'navigationPrimary-brandMark-sun.svg',
+          src: '/MyAccount/navigationPrimary-brandMark-sun.svg',
           width: '115px',
           top: '0',
         },
         'Virgin-Radio': {
-          src: 'navigationPrimary-brandMark-vr.svg',
+          src: '/MyAccount/navigationPrimary-brandMark-vr.svg',
           width: '150px',
           top: '0',
         },
         'The-Times': {
-          src: 'navigationPrimary-brandMark-times.svg',
+          src: '/MyAccount/navigationPrimary-brandMark-times.svg',
           width: '150px',
           top: '0',
         },

package/helpers/__tests__/getRecommendation.test.ts

@@ -0,0 +1,62 @@
+import { getRecommendations, fetcher } from '../getRecommendations'
+import { recomendationsMock } from '../mocks/getRecommendationsMock'
+
+jest.mock('../getRecommendations', () => {
+  return {
+    fetcher: jest.fn().mockImplementationOnce(() => {
+      return recomendationsMock
+    }),
+    getRecommendations: jest.fn().mockImplementationOnce(() => {
+      return recomendationsMock
+    }),
+  }
+})
+jest.mock('@newskit-render/standalone-components', () => {
+  return {
+    recommendationsProvider: jest.fn().mockResolvedValueOnce([
+      {
+        href:
+          'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1',
+        tag: 'FOOT ON THE GAZ',
+        text:
+          'Bale considering short deal with new club before RETIRING after World Cup',
+        title: 'FOOT ON THE GAZ',
+      },
+      {
+        href:
+          'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-a21f115694-1.jpg?strip=all&w=600&h=338&crop=1',
+        tag: 'TOUGH TIMES',
+        text:
+          'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
+        title: 'TOUGH TIMES',
+      },
+      {
+        href: null,
+        tag: 'TOUGH TIMES',
+        text:
+          'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
+        title: 'TOUGH TIMES',
+      },
+    ]),
+  }
+})
+
+describe('getRecommendations function', () => {
+  it('should return recomendations', async () => {
+    const result = await getRecommendations({
+      articleId: 'test-1',
+      publisher: 'nukapi',
+      userId: 'user-1',
+    })
+    expect(result).toEqual(recomendationsMock)
+  })
+})
+describe('fetcher function', () => {
+  it('should retun json object', async () => {
+    const result = await fetcher({
+      url: 'http://localhost:3000',
+      args: { articleId: 'test-2' },
+    })
+    expect(result).toEqual(recomendationsMock)
+  })
+})

package/helpers/createThemeDropdownObject.ts

@@ -15,17 +15,17 @@ const clientHeaderImages = {
 
 const clientNavigationLogos = {
   'The-Sun': {
-    src: 'navigationPrimary-brandMark-sun.svg',
+    src: '/MyAccount/navigationPrimary-brandMark-sun.svg',
     width: '115px',
     top: '0',
   },
   'Virgin-Radio': {
-    src: 'navigationPrimary-brandMark-vr.svg',
+    src: '/MyAccount/navigationPrimary-brandMark-vr.svg',
     width: '150px',
     top: '0',
   },
   'The-Times': {
-    src: 'navigationPrimary-brandMark-times.svg',
+    src: '/MyAccount/navigationPrimary-brandMark-times.svg',
     width: '150px',
     top: '0',
   },

package/helpers/getRecommendations.ts

@@ -0,0 +1,29 @@
+import { Fetcher } from 'swr'
+import {
+  recommendationsProvider,
+  Article,
+} from '@newskit-render/standalone-components'
+
+interface Recommendations {
+  publisher: string
+  articleId: string
+  userId?: string
+}
+
+export const fetcher: Fetcher<Article[]> = async (url): Promise<Article[]> => {
+  const res = await fetch(url)
+  return res.json()
+}
+
+export const getRecommendations = async ({
+  articleId,
+  publisher,
+  userId,
+}: Recommendations): Promise<Article[]> => {
+  const recommendations = await recommendationsProvider({
+    articleId,
+    publisher,
+    userId,
+  })
+  return recommendations
+}

package/helpers/global-types.ts

@@ -1,3 +1,11 @@
+declare global {
+  interface Window {
+    utag: Record<string, TealiumData>
+  }
+}
+interface TealiumData {
+  data: Record<string, string>
+}
 export enum ContentType {
   article,
   post,

package/{__tests__/pages/mocks.ts → helpers/mocks/getRecommendationsMock.ts}

@@ -1,8 +1,4 @@
-import { Article } from '@newskit-render/standalone-components'
-
-test.skip('Workaround', () => 1)
-
-export const mockArticles: Article[] = [
+export const recomendationsMock = [
   {
     href:
       'https://www.thesun.co.uk/wp-content/uploads/2022/03/image-656eaa885d.jpg?strip=all&w=600&h=338&crop=1',
@@ -24,6 +20,6 @@ export const mockArticles: Article[] = [
     tag: 'TOUGH TIMES',
     text:
       'I only made £5k last year - I sold £801k villa for cash, says Claire Sweeney',
-    title: 'TOUGH TIMES',
+    title: 'TOUGH TIME',
   },
 ]

package/helpers/multiTenancy.ts

@@ -0,0 +1,19 @@
+import { Publisher } from '@newskit-render/api'
+
+const demoTenantRegex = /(newskit-render|localhost)/
+const timesTenantRegex = /times/
+
+const isDemoTenant = (host: string) => demoTenantRegex.test(host)
+const isTimesTenant = (host: string) => timesTenantRegex.test(host)
+
+export const getTenant = (host: string): Publisher => {
+  switch (true) {
+    case isTimesTenant(host):
+      return Publisher.TIMES
+    case isDemoTenant(host):
+      return Publisher.DEMO
+
+    default:
+      return Publisher.DEMO
+  }
+}

package/jest.config.js

@@ -30,8 +30,7 @@ const customJestConfig = {
   testPathIgnorePatterns: [
     '<rootDir>/cypress/',
     '<rootDir>/node_modules/',
-    '<rootDir>/.next/',
-    '<rootDir>/config/'
+    '<rootDir>/.next/'
   ],
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.66.0",
+  "version": "1.68.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,24 +33,26 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.32.0",
-    "@newskit-render/auth": "^0.41.0",
-    "@newskit-render/checkout": "^0.41.0",
+    "@newskit-render/api": "^0.34.0",
+    "@newskit-render/auth": "^0.42.0",
+    "@newskit-render/checkout": "^0.44.0",
     "@newskit-render/feature-flags": "^0.22.0",
-    "@newskit-render/feed": "^0.20.0",
-    "@newskit-render/my-account": "^0.171.0",
-    "@newskit-render/shared-components": "^0.58.0",
-    "@newskit-render/standalone-components": "^0.18.0",
+    "@newskit-render/feed": "^0.23.0",
+    "@newskit-render/my-account": "^0.174.0",
+    "@newskit-render/shared-components": "^0.61.0",
+    "@newskit-render/standalone-components": "^0.21.0",
     "@newskit-render/validation": "^0.48.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
+    "lodash.get": "4.4.2",
     "newrelic": "7.1.0",
     "newskit": "5.4.5",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
-    "react-hook-form": "7.8.4"
+    "react-hook-form": "7.8.4",
+    "swr": "1.3.0"
   },
   "devDependencies": {
     "@apollo/react-testing": "4.0.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,
     },
   }
 }