@newskit-render/core 1.9.3 → 1.14.1

package/CHANGELOG.md

@@ -3,6 +3,158 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.14.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.14.0...@newskit-render/core@1.14.1) (2022-01-20)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.14.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.13.4...@newskit-render/core@1.14.0) (2022-01-20)
+
+
+### Features
+
+* **PPDSR-543:** Update newskitAPI  session ([#564](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/564)) ([1e60be8](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/1e60be84984fc5fa163a9ab2e29d1e6a4eb4a935))
+
+
+
+
+
+## [1.13.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.13.3...@newskit-render/core@1.13.4) (2022-01-19)
+
+
+### Bug Fixes
+
+* **PPDSR-628:** add new fonts ([#557](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/557)) ([541bc58](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/541bc5832dea4abd7d94f93f9c5ff32704da2326))
+
+
+
+
+
+## [1.13.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.13.2...@newskit-render/core@1.13.3) (2022-01-19)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.13.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.13.1...@newskit-render/core@1.13.2) (2022-01-18)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.13.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.13.0...@newskit-render/core@1.13.1) (2022-01-18)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.13.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.12.1...@newskit-render/core@1.13.0) (2022-01-14)
+
+
+### Features
+
+* **PPDSR-604:** Add husky & commitlint ([#558](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/558)) ([c67fc76](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/c67fc76276c8607f7604ae6ac0d0cae1ecb5b4f0))
+
+
+
+
+
+## [1.12.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.12.0...@newskit-render/core@1.12.1) (2022-01-13)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.12.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.11.4...@newskit-render/core@1.12.0) (2022-01-13)
+
+
+### Features
+
+* **PPDSR-632:** Fix newsletter query ([#559](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/559)) ([38085d1](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/38085d1418bb42237a41b4bad0394fc8cabdf2a4))
+
+
+
+
+
+## [1.11.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.11.3...@newskit-render/core@1.11.4) (2022-01-13)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.11.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.11.2...@newskit-render/core@1.11.3) (2022-01-11)
+
+
+### Bug Fixes
+
+* update release cli version ([#556](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/556)) ([d613fe1](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/d613fe1f5b96fc3f66547f2310a12c0b3810e940))
+
+
+
+
+
+## [1.11.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.11.1...@newskit-render/core@1.11.2) (2022-01-11)
+
+
+### Bug Fixes
+
+* bump release-cli to latest to fix pipeline ([#554](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/554)) ([46a0c13](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/46a0c13231f89445360126bc596476ca13716b37))
+
+
+
+
+
+## [1.11.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.11.0...@newskit-render/core@1.11.1) (2022-01-07)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.11.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.10.1...@newskit-render/core@1.11.0) (2022-01-06)
+
+
+### Features
+
+* **PPDSR-605:** Move PrimaryNavigation to Shared Components ([#550](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/550)) ([fcc1cda](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/fcc1cda59d4cfcc42b1487ee8ba782c7d5f83bb7))
+
+
+
+
+
+## [1.10.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.10.0...@newskit-render/core@1.10.1) (2022-01-05)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+# [1.10.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.9.3...@newskit-render/core@1.10.0) (2022-01-05)
+
+
+### Features
+
+* **PPDSR-594:** Add themes to account package ([#538](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/538)) ([e34a53a](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/e34a53a944ae8d1420c27459f1ef5ca3ba4160d0))
+
+
+
+
+
 ## [1.9.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.9.2...@newskit-render/core@1.9.3) (2022-01-05)
 
 **Note:** Version bump only for package @newskit-render/core

package/README.md

@@ -1,6 +1,6 @@
 # @newskit-render/core
 
-А website blueprint built with Next.js.
+А template website built using Next.js.
 
 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 projects which the users of @newskit-render/create-render-app can use and modify for their purposes.
 

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

@@ -1,7 +1,8 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { act } from 'react-dom/test-utils'
-import { renderCustomLightTheme, renderCustomDarkTheme } from '../theme'
+import { sharedTheme } from '@newskit-render/shared-components'
+import { renderCustomDarkTheme } from '../theme'
 import { AppContextProvider, AppContext } from './AppContext'
 
 const container = document.createElement('div')
@@ -30,7 +31,7 @@ describe('AppContext tests', () => {
       container
     )
 
-    expect(container.textContent).toBe(JSON.stringify(renderCustomLightTheme))
+    expect(container.textContent).toBe(JSON.stringify(sharedTheme))
   })
 
   it('setTheme should switch the theme', () => {

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { UncompiledTheme } from 'newskit'
-import { renderCustomLightTheme } from '../theme'
+import { sharedTheme } from '@newskit-render/shared-components'
 
 type AppContextType = {
   theme: UncompiledTheme
@@ -8,11 +8,11 @@ type AppContextType = {
 }
 
 const AppContext = React.createContext({
-  theme: renderCustomLightTheme,
+  theme: sharedTheme,
 } as AppContextType)
 
 const AppContextProvider = ({ children }: { children: JSX.Element }) => {
-  const [theme, setTheme] = useState(renderCustomLightTheme)
+  const [theme, setTheme] = useState(sharedTheme)
 
   return (
     <AppContext.Provider value={{ theme, setTheme }}>

package/components/header/index.tsx

@@ -21,7 +21,7 @@ import { MainGrid } from '../layout/MainGrid'
 import NewsKitLogoFull from '../common/NewskitLogo'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
-import { AppContext } from '../../context/AppContext'
+import { AppContext } from '../../app-context/AppContext'
 import { getKey } from '../../helpers/articleUtil'
 import { handleEnterKeyPress } from '../../helpers/a11y'
 import { UserData, VxInstance } from '../../helpers/global-types'

package/infrastructure/.circleci/config.yml

@@ -239,6 +239,7 @@ orbs:
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set envs.TEALIUM_ENV=${TEALIUM_ENV}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.NEW_RELIC_LICENSE_KEY=${NEW_RELIC_LICENSE_KEY}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.MAIN_GRAPHQL_URL=${MAIN_GRAPHQL_URL}"' >> $BASH_ENV
+                echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.MAIN_COOKIE_NAME=${MAIN_COOKIE_NAME}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.MAIN_USER_ID=${MAIN_USER_ID}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.MAIN_AUDIENCE=${MAIN_AUDIENCE}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.MAIN_OAUTH_TOKEN=${MAIN_OAUTH_TOKEN}"' >> $BASH_ENV

package/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

package/next.config.js

@@ -5,38 +5,43 @@ const withTM = require('next-transpile-modules')([
   '@newskit-render/my-account',
   '@newskit-render/validation',
 ])
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
 
-module.exports = withTM({
-  webpack: (config, options) => {
-    if (options.isServer) {
-      config.externals = ['react', ...config.externals]
-    }
+module.exports = withBundleAnalyzer(
+  withTM({
+    webpack: (config, options) => {
+      if (options.isServer) {
+        config.externals = ['react', ...config.externals]
+      }
 
-    config.resolve.alias.newskit = path.resolve(
-      __dirname,
-      '.',
-      'node_modules',
-      'newskit'
-    )
-    config.resolve.alias.react = path.resolve(
-      __dirname,
-      '.',
-      'node_modules',
-      'react'
-    )
+      config.resolve.alias.newskit = path.resolve(
+        __dirname,
+        '.',
+        'node_modules',
+        'newskit'
+      )
+      config.resolve.alias.react = path.resolve(
+        __dirname,
+        '.',
+        'node_modules',
+        'react'
+      )
 
-    return config
-  },
-  async rewrites() {
-    return [
-      {
-        source: '/sitemap.xml',
-        destination: '/api/sitemap',
-      },
-      {
-        source: '/news-sitemap.xml',
-        destination: '/api/news-sitemap',
-      },
-    ]
-  },
-})
+      return config
+    },
+    async rewrites() {
+      return [
+        {
+          source: '/sitemap.xml',
+          destination: '/api/sitemap',
+        },
+        {
+          source: '/news-sitemap.xml',
+          destination: '/api/news-sitemap',
+        },
+      ]
+    },
+  })
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.9.3",
+  "version": "1.14.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -24,17 +24,20 @@
     "pact:test": "NEWSKIT_API_ENV_URL='http://localhost:4343' jest --config=jest.config.pact.js",
     "pact:publish": "pact-broker publish ./__pacts__/pacts --consumer-app-version=$(git describe --match '*core*' --abbrev=0) --tag='dev' --broker-base-url=$PACT_BROKER_URL --broker-token=$PACT_BROKER_TOKEN",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx . --color && prettier --check './**/*.{js,jsx,ts,tsx,json}'",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --color --fix && prettier --write './**/*.{js,jsx,ts,tsx,json}'"
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --color --fix && prettier --write './**/*.{js,jsx,ts,tsx,json}'",
+    "precommit:lint": "eslint",
+    "precommit": "lint-staged",
+    "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@newskit-render/api": "^0.5.0",
-    "@newskit-render/auth": "^0.22.2",
-    "@newskit-render/checkout": "^0.9.0",
-    "@newskit-render/my-account": "^0.116.2",
-    "@newskit-render/shared-components": "^0.20.0",
-    "@newskit-render/sitemap": "^0.25.3",
-    "@newskit-render/validation": "^0.27.0",
+    "@newskit-render/api": "^0.9.0",
+    "@newskit-render/auth": "^0.25.0",
+    "@newskit-render/checkout": "^0.15.2",
+    "@newskit-render/my-account": "^0.124.1",
+    "@newskit-render/shared-components": "^0.26.1",
+    "@newskit-render/sitemap": "^0.28.0",
+    "@newskit-render/validation": "^0.30.0",
     "cross-fetch": "^3.1.4",
     "graphql": "^15.6.0",
     "newrelic": "^7.1.0",
@@ -48,6 +51,7 @@
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",
     "@emotion/jest": "^11.3.0",
+    "@next/bundle-analyzer": "^12.0.8",
     "@pact-foundation/pact": "^9.12.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.2",
@@ -75,6 +79,7 @@
     "jest": "^27.2.4",
     "jest-junit": "^12.0.0",
     "jest-watch-typeahead": "^0.6.3",
+    "lint-staged": "^12.1.7",
     "next-transpile-modules": "^8.0.0",
     "prettier": "^2.0.5",
     "prettier-eslint": "^11.0.0",
@@ -83,6 +88,14 @@
     "typescript": "^4.4.3",
     "wait-on": "^5.3.0"
   },
+  "precommit": [
+    "precommit"
+  ],
+  "lint-staged": {
+    "**/*.(ts|tsx)": [
+      "yarn run precommit:lint"
+    ]
+  },
   "publishConfig": {
     "access": "public"
   },

package/pages/_app.tsx

@@ -3,7 +3,7 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, css, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
-import { AppContextProvider, AppContext } from '../context/AppContext'
+import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
 
 if (!process.browser) {
@@ -13,6 +13,215 @@ if (!process.browser) {
 }
 
 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;

package/pages/account/cancellation/index.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import validation from '../../../validation'
+import { AppContext } from '../../../app-context/AppContext'
 
-const CancellationPage = (props) => {
-  return <Cancellation {...props} validation={validation} />
+const AccountCancellation = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <Cancellation {...props} customTheme={theme} setTheme={setTheme} />
 }
 
-export default CancellationPage
+export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Cancellation')

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import newrelic from 'newrelic'
 import {
   EditField,
@@ -7,12 +7,21 @@ import {
   componentMap,
 } from '@newskit-render/my-account'
 import validation from '../../../validation'
+import { AppContext } from '../../../app-context/AppContext'
 
 const AccountEditField = (props) => {
   const doesEditPageExist = Object.keys(componentMap).includes(props.data.type)
+  const { theme, setTheme } = useContext(AppContext)
 
   if (doesEditPageExist) {
-    return <EditField {...props} validation={validation} />
+    return (
+      <EditField
+        {...props}
+        validation={validation}
+        customTheme={theme}
+        setTheme={setTheme}
+      />
+    )
   }
   return <NotFound />
 }

package/pages/account/index.tsx

@@ -1,7 +1,14 @@
-import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
+import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
+import React, { useContext } from 'react'
+import { AppContext } from '../../app-context/AppContext'
+
+const AccountPersonalDetails = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <PersonalDetails {...props} customTheme={theme} setTheme={setTheme} />
+}
 
-export default PersonalDetails
+export default AccountPersonalDetails
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Personal details')