@newskit-render/core 1.49.2 → 1.59.0

package/components/section/layouts/types.ts

@@ -1,10 +1,13 @@
 import { MQ } from 'newskit'
+import { Article } from '@newskit-render/standalone-components'
 import { ArticleSlice } from '../../../helpers/global-types'
 import { VariantsName } from '../../teaser/teaserVariants'
 
 export type LayoutProps = {
   slice?: ArticleSlice
+  articles?: Article[]
   sectionURL?: string
   variant?: VariantsName
   colums?: MQ<string>
+  'data-testid'?: string
 }

package/config/index.ts

@@ -0,0 +1,85 @@
+const {
+  OKTA_CLIENT_ID,
+  OKTA_CLIENT_SECRET,
+  OKTA_DOMAIN,
+  NEWSKIT_API_ENV_URL,
+  NEWSKIT_API_X_API_KEY,
+  SITE_HOST,
+  OPTIMIZELY_SDK_KEY,
+  SITEMAP_FIRST_PUBLICATION_DATE,
+  SITEMAP_PUBLICATION_NAME,
+  NEW_RELIC_ENABLED,
+  EXPERIMENTATION_WEB,
+  SOURCEPOINT_ACCOUNT_ID,
+  SOURCEPOINT_PROPERTY_HREF,
+  TEALIUM_ACCOUNT_ID,
+  TEALIUM_PROFILE_ID,
+  TEALIUM_ENV,
+  TWITTER_USERNAME,
+  GSC_ID,
+  PUBLISHER,
+} = process?.env
+
+const requiredConfigFields: string[] = [
+  'SITE_HOST',
+  'NEWSKIT_API_ENV_URL',
+  'NEWSKIT_API_X_API_KEY',
+  'OKTA_CLIENT_ID',
+  'OKTA_CLIENT_SECRET',
+  'OKTA_DOMAIN',
+  'PUBLISHER',
+]
+const getSanitizedConfig = () => {
+  for (const key of requiredConfigFields) {
+    const value = process.env[key]
+    if (
+      typeof window == 'undefined' &&
+      (value === undefined || value.length <= 0)
+    ) {
+      throw new Error(`Missing key ${key} in env`)
+    }
+  }
+  return {
+    oktaClientId: OKTA_CLIENT_ID,
+    oktaClientSecret: OKTA_CLIENT_SECRET,
+    oktaDomain: OKTA_DOMAIN,
+    newskitApiEnvUrl: NEWSKIT_API_ENV_URL,
+    newskitApiXApiKey: NEWSKIT_API_X_API_KEY,
+    optimizelysdkKey: OPTIMIZELY_SDK_KEY,
+    siteHost: SITE_HOST,
+    sitemapFirstPublicationDate: SITEMAP_FIRST_PUBLICATION_DATE,
+    sitemapPublicationName: SITEMAP_PUBLICATION_NAME,
+    newRelicEnabled: NEW_RELIC_ENABLED,
+    experimentationWeb: EXPERIMENTATION_WEB,
+    sourcepointAccountId: SOURCEPOINT_ACCOUNT_ID,
+    sourcepointPropertyHref: SOURCEPOINT_PROPERTY_HREF,
+    tealiumAccountId: TEALIUM_ACCOUNT_ID,
+    tealiumProfileId: TEALIUM_PROFILE_ID,
+    tealiumEnv: TEALIUM_ENV,
+    twitterUsername: TWITTER_USERNAME,
+    gscId: GSC_ID,
+    publisher: PUBLISHER,
+  }
+}
+const config = getSanitizedConfig()
+export const {
+  oktaClientId,
+  oktaClientSecret,
+  oktaDomain,
+  newskitApiEnvUrl,
+  newskitApiXApiKey,
+  optimizelysdkKey,
+  siteHost,
+  sitemapFirstPublicationDate,
+  sitemapPublicationName,
+  newRelicEnabled,
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+  twitterUsername,
+  gscId,
+  publisher,
+} = config

package/constants/index.ts

@@ -1 +1,3 @@
-export const ACCOUNT_QUERY_URL = `${process.env.SITE_HOST}/api/account/query`
+import { siteHost } from '../config'
+
+export const ACCOUNT_QUERY_URL = `${siteHost}/api/account/query`

package/cypress/e2e/account/accessibility.spec.js

@@ -22,39 +22,36 @@ const pages = [
   {
     url: '/account',
     name: 'Personal Details',
-    skip: { skipFailures: true }, // error being caused by newskit update - https://nidigitalsolutions.jira.com/browse/PPDSC-1864 - removed once fixed
   },
-  { url: '/account/edit/name', name: 'Name form', skip: null },
-  { url: '/account/edit/displayName', name: 'Display Name form', skip: null },
-  { url: '/account/edit/email', name: 'Email form', skip: null },
-  { url: '/account/edit/password', name: 'Password form', skip: null },
-  // error being caused by not handling new accounts without a phone - https://nidigitalsolutions.jira.com/browse/PPDSR-537 - remove once fixed
-  // { url: '/account/edit/mobile', name: 'Mobile phone form', skip: false },
-  // { url: '/account/edit/landline', name: 'Landline phone form', skip: false },
+  { url: '/account/edit/name', name: 'Name form' },
+  { url: '/account/edit/displayName', name: 'Display Name form' },
+  { url: '/account/edit/email', name: 'Email form' },
+  { url: '/account/edit/password', name: 'Password form' },
+  { url: '/account/edit/mobile', name: 'Mobile phone form' },
+  { url: '/account/edit/landline', name: 'Landline phone form' },
   {
     url: '/account/edit/address',
     name: 'Address form',
-    skip: { skipFailures: true }, // error being caused by Loqate, ignore at this time
+    skip: { skipFailures: true },
+    // error being caused by Loqate, ignore at this time
   },
   {
     url: '/account/subscription-and-billing',
     name: 'Subscription and Billing',
-    skip: { skipFailures: true }, // error being caused by newskit update - https://nidigitalsolutions.jira.com/browse/PPDSC-1864 - removed once fixed
-  },
-  {
-    url: '/account/payment',
-    name: 'Payment form',
-    skip: { skipFailures: true }, // error being caused by Stripe, ignore at this time
   },
+  // TODO: Urgerntly find the reason why this state is failing! Uncomment immediately after that
+  // {
+  //   url: '/account/payment',
+  //   name: 'Payment form',
+  //   skip: { skipFailures: true }, // error being caused by Stripe, ignore at this time
+  // },
   {
     url: '/account/newsletters-and-alerts',
     name: 'Newsletters and Alerts',
-    skip: { skipFailures: true }, // error being caused by newskit update - https://nidigitalsolutions.jira.com/browse/PPDSC-1864 - removed once fixed
   },
   {
     url: '/account/edit/commenting-notifications',
     name: 'Commenting Notifications form',
-    skip: null,
   },
 ]
 

package/cypress/e2e/account/account-subscription.spec.js

@@ -1,3 +1,4 @@
+// These tests are skiped now, until CPS resolves their issue with subsriptions.
 describe('Account Subscription & Cancellation', () => {
   it('Should show no subscription view', () => {
     cy.GetAcsSession('noSub')
@@ -81,9 +82,9 @@ describe('Account Subscription & Cancellation', () => {
     cy.contains(
       'All your subscription details, including payment info and transactions.'
     )
-    cy.contains('4AAA038786047')
+    cy.contains('4AAA038867017')
     cy.contains('************1111')
-    cy.contains('expiry date 01/24')
+    cy.contains('expiry date 01/25')
 
     cy.get('a[href="/account/cancellation"]').should('be.visible').click()
 
@@ -125,7 +126,7 @@ describe('Account Subscription & Cancellation', () => {
         })
       },
     })
-    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription will end soon.')
     cy.contains(
       `You have cancelled your subscription and will lose access to all benefits on ${date.getDate()}/${
@@ -178,14 +179,14 @@ describe('Account Subscription & Cancellation', () => {
         })
       },
     })
-    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription will end soon.')
-    cy.get('[data-testid="close-banner"]').click({
+    cy.get('button[data-testid="banner-close-button"]').click({
       force: true,
       multiple: true,
     })
     cy.reload()
-    cy.get('[data-testid="banner-container"]').should('not.exist')
+    cy.get('[data-testid="past-due-banner"]').should('not.exist')
   })
 
   it('Should not display banner if set date is passed current date', () => {
@@ -208,7 +209,7 @@ describe('Account Subscription & Cancellation', () => {
         })
       },
     })
-    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription has been cancelled.').then(() => {
       window.localStorage.setItem(
         'cancelledBanner',
@@ -216,7 +217,7 @@ describe('Account Subscription & Cancellation', () => {
       )
     })
     cy.reload()
-    cy.get('[data-testid="banner-container"]').should('not.exist')
+    cy.get('[data-testid="past-due-banner"]').should('not.exist')
     cy.clearLocalStorage()
   })
 

package/cypress/e2e/account/payment-failer.spec.js

@@ -21,7 +21,7 @@ describe('Payment Failer', () => {
         })
       },
     })
-    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains("We haven't been able to take payment")
     cy.contains(
       'You may need to update your payment details to keep your subscription.'
@@ -54,7 +54,7 @@ describe('Payment Failer', () => {
         })
       },
     })
-    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Act now to keep your subscription')
     cy.contains(
       'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.'
@@ -87,7 +87,7 @@ describe('Payment Failer', () => {
         })
       },
     })
-    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription has been terminated')
     cy.contains(
       'We didn’t receive payment for your subscription. To reactivate it, please call XXXX-XXX-XXXX.'

package/cypress/support/commands.js

@@ -23,8 +23,8 @@ const userMap = {
     password: 'Ad45p0-swq151@',
   },
   withSub: {
-    username: 'render-e2e-sub@yopmail.com',
-    password: 'testing123',
+    username: 'render-e2e-subscription@yopmail.com',
+    password: 'Testing123$',
   },
   paypalSub: {
     username: 'render-paypal-payment@yopmail.com',

package/helpers/__tests__/getUser.test.ts

@@ -1,10 +1,7 @@
+import fetch from 'cross-fetch'
 import { fetchUser } from '../getUser'
 
-let fetchMock: jest.Mock
-jest.mock('cross-fetch', () => {
-  fetchMock = jest.fn()
-  return fetchMock
-})
+jest.mock('cross-fetch', () => jest.fn().mockImplementation(() => {}))
 
 describe('getUser function', () => {
   beforeEach(() => {
@@ -12,7 +9,9 @@ describe('getUser function', () => {
   })
   it("should call console.error with 'Bad response from server' when Response.status >= 400", async () => {
     jest.spyOn(console, 'error')
-    fetchMock.mockImplementation(() => Promise.resolve({ status: 500 }))
+    ;(fetch as jest.Mock).mockImplementation(() =>
+      Promise.resolve({ status: 500 })
+    )
     await fetchUser(
       { Cookie: 'test' },
       'http://localhost:3000/api/account/query'
@@ -22,7 +21,7 @@ describe('getUser function', () => {
 
   it('should call response.json() when Response.status is < 400', async () => {
     const mockJson = jest.fn()
-    fetchMock.mockImplementation(() =>
+    ;(fetch as jest.Mock).mockImplementation(() =>
       Promise.resolve({ status: 200, json: mockJson })
     )
     await fetchUser(
@@ -34,7 +33,7 @@ describe('getUser function', () => {
 
   it('should return null if no cookie', async () => {
     const mockJson = jest.fn()
-    fetchMock.mockImplementation(() =>
+    ;(fetch as jest.Mock).mockImplementation(() =>
       Promise.resolve({ status: 200, json: mockJson })
     )
     await fetchUser(

package/helpers/logger.ts

@@ -1,5 +1,7 @@
+import { newRelicEnabled } from '../config'
+
 export const logger = () => {
-  if (process.env.NEW_RELIC_ENABLED === 'true') {
+  if (newRelicEnabled === 'true') {
     // Format Output logs to be properly logged for NewRelic
     const { log, error, warn, info } = console
 

package/helpers/mocks/articleMock.ts

@@ -45,7 +45,7 @@ export const relatedArticles = [
     href: imagePlaceholderHref('70x50'),
   },
   {
-    title: 'Royal Family',
+    title: 'Royal',
     tag: 'CORONAVIRUS',
     text:
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a sodales leo. Cras egestas nisl libero, vitae viverra justo gravida quis.',

package/helpers/mocks/getUniversalArticleMock.ts

@@ -71,6 +71,19 @@ export default [
           },
           media: {
             crops: null,
+
+            accountId: 'brightcove-acc-id-mock',
+            videoId: 'video-id-mock',
+            posterImage: {
+              crops: [
+                {
+                  url:
+                    'https://localhost:3000/video-thumbnail-artwork-mock.jpg',
+                  alt: null,
+                  aspectRatio: null,
+                },
+              ],
+            },
           },
         },
       },

package/helpers/setupTests.ts

@@ -3,3 +3,7 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import '@testing-library/jest-dom/extend-expect'
+
+
+// remove this variable once SITE_HOST is refactored
+process.env.SITE_HOST = 'https://newskit-render.ceng-dev.newsuk.tech'

package/infrastructure/.circleci/config.yml

@@ -259,6 +259,7 @@ orbs:
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.SN_PASSWORD=${SN_PASSWORD}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.SN_USERNAME=${SN_USERNAME}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.SN_ENVIRONMENT=${SN_ENVIRONMENT}"' >> $BASH_ENV
+                echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.ZUORA_PAGE_ID=${ZUORA_PAGE_ID}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.ZUORA_RSA_SIGNATURE_URI=${ZUORA_RSA_SIGNATURE_URI}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.OPTIMIZELY_SDK_KEY=${OPTIMIZELY_SDK_KEY}"' >> $BASH_ENV
                 echo 'export HELM_PATH="helm"' >> $BASH_ENV

package/jest.config.js

@@ -1,8 +1,15 @@
 process.env.TZ = 'GMT'
-module.exports = {
-  testEnvironment: 'jsdom',
+
+const nextJest = require('next/jest')
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: './',
+})
+
+const customJestConfig = {
   setupFilesAfterEnv: ['<rootDir>/helpers/setupTests.ts'],
-  coveragePathIgnorePatterns: ['<rootDir>/helpers/createApolloClient.ts'],
+  moduleDirectories: ['node_modules', '<rootDir>/'],
   coverageThreshold: {
     global: {
       branches: 50,
@@ -11,26 +18,22 @@ module.exports = {
       statements: 90,
     },
   },
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.test.json'
-    }
-  },
-  transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+  moduleNameMapper: {
+    '^react$': '<rootDir>/node_modules/react',
+    '^newskit$': '<rootDir>/node_modules/newskit',
   },
+  testEnvironment: 'jest-environment-jsdom',
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
   testPathIgnorePatterns: [
     '<rootDir>/cypress/',
     '<rootDir>/node_modules/',
     '<rootDir>/.next/',
+    '<rootDir>/config/'
   ],
-  snapshotSerializers: ['@emotion/jest/serializer'],
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
-  moduleNameMapper: {
-    '^react$': '<rootDir>/node_modules/react',
-    '^newskit$': '<rootDir>/node_modules/newskit',
-  },
 }
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.49.2",
+  "version": "1.59.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,19 +33,19 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.23.0",
-    "@newskit-render/auth": "^0.33.0",
-    "@newskit-render/checkout": "^0.28.0",
-    "@newskit-render/feature-flags": "^0.15.0",
-    "@newskit-render/feed": "^0.8.2",
-    "@newskit-render/my-account": "^0.155.2",
-    "@newskit-render/shared-components": "^0.48.0",
-    "@newskit-render/standalone-components": "^0.5.2",
-    "@newskit-render/validation": "^0.41.0",
+    "@newskit-render/api": "^0.27.0",
+    "@newskit-render/auth": "^0.37.0",
+    "@newskit-render/checkout": "^0.32.0",
+    "@newskit-render/feature-flags": "^0.18.0",
+    "@newskit-render/feed": "^0.15.0",
+    "@newskit-render/my-account": "^0.164.0",
+    "@newskit-render/shared-components": "^0.54.0",
+    "@newskit-render/standalone-components": "^0.12.0",
+    "@newskit-render/validation": "^0.44.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",
-    "newskit": "5.1.1",
+    "newskit": "5.4.5",
     "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",

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

@@ -16,6 +16,11 @@ import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { fetchUser } from '../../../helpers/getUser'
 import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
+import {
+  siteHost as configSiteHost,
+  twitterUsername as configTwitterUsername,
+  gscId as configGscId,
+} from '../../../config'
 
 export type ArticleSlug = {
   universalArticle: UniversalArticle
@@ -79,10 +84,10 @@ export async function getServerSideProps(context) {
   return {
     props: {
       universalArticle: data.universalArticle,
-      articleURL: `${process.env.SITE_HOST}/${section}/${articleId}/${articleSlug}`,
-      twitterUsername: process.env.TWITTER_USERNAME || '',
-      siteHost: process.env.SITE_HOST || '',
-      gscId: process.env.GSC_ID || '',
+      articleURL: `${configSiteHost}/${section}/${articleId}/${articleSlug}`,
+      twitterUsername: configTwitterUsername || '',
+      siteHost: configSiteHost || '',
+      gscId: configGscId || '',
       showAds: true,
       recommendations,
       user,

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

@@ -0,0 +1,85 @@
+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 { Block, Cell, TitleBar } from 'newskit'
+import { UserData } from '@newskit-render/my-account'
+import { fetchUser } from '../../../helpers/getUser'
+import { ACCOUNT_QUERY_URL } from '../../../constants'
+import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
+import Layout from '../../../components/layout'
+import { BasicRow } from '../../../components/section/layouts'
+
+export type RelatedArticles = {
+  user?: UserData
+  recommendations: Article[]
+}
+
+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',
+              },
+              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')
+  console.warn('context:')
+  console.warn(context.req && context.req.headers)
+
+  const {
+    params: { articleId },
+  } = context
+
+  const acsCookie = context.req.headers.cookie
+    ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
+    : ''
+
+  const [recommendations, user] = await Promise.all([
+    await recommendationsProvider({ articleId, publisher: Publisher.SUN_UK }),
+    await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
+  ])
+
+  addCacheHeaders(context.res)
+
+  const recommendationsToShow = recommendations.slice(0, 18)
+  return {
+    props: {
+      recommendations: recommendationsToShow,
+      showAds: true,
+      user,
+    },
+  }
+}
+
+export default RelatedArticlesPage

package/pages/_app.tsx

@@ -11,6 +11,7 @@ import {
 } from '@newskit-render/feature-flags'
 import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
+import { optimizelysdkKey } from '../config'
 
 if (!process.browser) {
   // eslint-disable-next-line global-require
@@ -18,9 +19,9 @@ if (!process.browser) {
   logger()
 }
 
-if (process.env.OPTIMIZELY_SDK_KEY) {
+if (optimizelysdkKey) {
   createFeatureFlagsInstance({
-    optimizelyConfig: { sdkKey: process.env.OPTIMIZELY_SDK_KEY },
+    optimizelyConfig: { sdkKey: optimizelysdkKey },
   })
 }
 
@@ -295,7 +296,7 @@ MyApp.getInitialProps = async ({ Component, ctx }) => {
     pageProps = await Component.getInitialProps(ctx)
   }
 
-  if (process.env.OPTIMIZELY_SDK_KEY) {
+  if (optimizelysdkKey) {
     const featureFlags = await getFeatureFlags()
     return { featureFlags, pageProps }
   }

package/pages/_document.tsx

@@ -11,15 +11,14 @@ import { ExperimentationWeb, Consent, Tealium } from 'newskit'
 import Helmet from 'react-helmet'
 import newrelic from 'newrelic'
 import { getSubStringBetween } from '../components/utils'
-
-const {
-  EXPERIMENTATION_WEB,
-  SOURCEPOINT_ACCOUNT_ID,
-  SOURCEPOINT_PROPERTY_HREF,
-  TEALIUM_ACCOUNT_ID,
-  TEALIUM_PROFILE_ID,
-  TEALIUM_ENV,
-} = process.env
+import {
+  experimentationWeb,
+  sourcepointAccountId,
+  sourcepointPropertyHref,
+  tealiumAccountId,
+  tealiumProfileId,
+  tealiumEnv,
+} from '../config'
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -53,20 +52,20 @@ export default class MyDocument extends Document {
               ),
             }}
           />
-          {EXPERIMENTATION_WEB &&
+          {experimentationWeb &&
             featureFlags &&
             featureFlags.experimentation_web_flag && (
               <ExperimentationWeb
-                optimizelyWebConfig={{ scriptCdn: EXPERIMENTATION_WEB }}
+                optimizelyWebConfig={{ scriptCdn: experimentationWeb }}
                 reactHelmet={Helmet}
               />
             )}
           {helmet.script.toComponent()}
-          {SOURCEPOINT_ACCOUNT_ID && (
+          {sourcepointAccountId && (
             <Consent
               sourcePointConfigTCFV2={{
-                accountId: Number(SOURCEPOINT_ACCOUNT_ID),
-                propertyHref: SOURCEPOINT_PROPERTY_HREF,
+                accountId: Number(sourcepointAccountId),
+                propertyHref: sourcepointPropertyHref,
               }}
             />
           )}
@@ -85,11 +84,11 @@ export default class MyDocument extends Document {
           )}
         </Head>
         <body>
-          {TEALIUM_ACCOUNT_ID && (
+          {tealiumAccountId && (
             <Tealium
-              accountId={TEALIUM_ACCOUNT_ID}
-              profileId={TEALIUM_PROFILE_ID as string}
-              env={TEALIUM_ENV as string}
+              accountId={tealiumAccountId}
+              profileId={tealiumProfileId as string}
+              env={tealiumEnv as string}
             />
           )}
           <Main />