@newskit-render/core 1.27.8 → 1.30.0

package/CHANGELOG.md

@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.30.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.29.5...@newskit-render/core@1.30.0) (2022-03-07)
+
+
+### Features
+
+* **PPDSR-627:** update-account-cancellation ([#593](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/593)) ([9b70d1c](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/9b70d1c8c670541b3d084073f372274951006ade))
+
+
+
+
+
+## [1.29.5](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.29.4...@newskit-render/core@1.29.5) (2022-03-03)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.29.4](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.29.3...@newskit-render/core@1.29.4) (2022-03-02)
+
+
+### Bug Fixes
+
+* **PPDSR-680:** changed overflow on homepage nav to remove the scroller ([#614](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/614)) ([f7e4d21](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/f7e4d2196399eae72ef26b71d6e925ab6c82efb1))
+
+
+
+
+
+## [1.29.3](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.29.2...@newskit-render/core@1.29.3) (2022-03-01)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.29.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.29.1...@newskit-render/core@1.29.2) (2022-03-01)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.29.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.29.0...@newskit-render/core@1.29.1) (2022-03-01)
+
+
+### Bug Fixes
+
+* **PPDSR-667:** make theme selector overridable ([#610](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/610)) ([4017c6b](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/4017c6baf796dbad2727712d60b9719fb190efcb))
+
+
+
+
+
+# [1.29.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.28.0...@newskit-render/core@1.29.0) (2022-02-28)
+
+
+### Features
+
+* **PPDSR-474:** intergate new MAIN Zuora mutation ([#604](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/604)) ([bf62a52](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/bf62a5270f5d5d0236e67222db81697f5e74cd01))
+
+
+
+
+
+# [1.28.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.8...@newskit-render/core@1.28.0) (2022-02-25)
+
+
+### Features
+
+* **PPDSR-542:** sitemap add support for custom urls ([#601](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/601)) ([dd51e1f](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/dd51e1ff4404b44ba64381f987551f4f88da9b8f))
+
+
+
+
+
 ## [1.27.8](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.27.7...@newskit-render/core@1.27.8) (2022-02-25)
 
 **Note:** Version bump only for package @newskit-render/core

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

@@ -5,7 +5,7 @@ import Article, {
 } from '../../pages/[section]/[articleId]/[articleSlug]'
 import { renderWithQuery } from '../../helpers/test-utils'
 import { getUniversalArticleMock } from '../../helpers/mocks'
-import { URL, Slug, UserData } from '../../helpers/global-types'
+import { URL, Slug } from '../../helpers/global-types'
 
 const props: ArticleSlug = {
   universalArticle: {
@@ -59,20 +59,7 @@ const props: ArticleSlug = {
   gscId: '4320982',
 }
 
-const userMock = {
-  vxInstances: [
-    {
-      interactions: [
-        {
-          pastDue: {
-            isPastDue: false,
-            since: new Date(),
-          },
-        },
-      ],
-    },
-  ],
-} as UserData
+const userMock = {}
 
 jest.mock('cross-fetch', () =>
   jest.fn().mockImplementation(() =>

package/__tests__/pages/__snapshots__/home.test.tsx.snap

@@ -290,7 +290,7 @@ exports[`getServerSideProps Homepage 1`] = `
   .emotion-12 {
     display: block;
     position: relative;
-    overflow: auto;
+    overflow: hidden;
     width: initial;
     min-height: initial;
     background-color: initial;

package/components/article/__tests__/__snapshots__/index.test.tsx.snap

@@ -290,7 +290,7 @@ exports[`Article should render tile and sub title 1`] = `
   .emotion-12 {
     display: block;
     position: relative;
-    overflow: auto;
+    overflow: hidden;
     width: initial;
     min-height: initial;
     background-color: initial;

package/components/article/index.tsx

@@ -14,6 +14,7 @@ import {
   Divider,
 } from 'newskit'
 import { SEOComponent } from '@newskit-render/shared-components'
+import { UserData } from '@newskit-render/my-account'
 import MetaBoxComponent from './MetaBox'
 import Ad from '../ad'
 import Highlights from './Highlights'
@@ -27,7 +28,6 @@ import {
   Topic,
   Byline,
   ParagraphBlock,
-  UserData,
 } from '../../helpers/global-types'
 import ShareButton from '../common/ShareButton'
 import Layout from '../layout'

package/components/header/index.tsx

@@ -12,7 +12,7 @@ import {
   IconFilledMenu,
   Image,
 } from 'newskit'
-import { PastDueBannerExternal } from '@newskit-render/my-account'
+import { PastDueBannerExternal, UserData } from '@newskit-render/my-account'
 import {
   NextLink,
   theSunTheme,
@@ -30,7 +30,6 @@ import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
 import { AppContext } from '../../app-context/AppContext'
 import { handleEnterKeyPress } from '../../helpers/a11y'
-import { UserData, VxInstance } from '../../helpers/global-types'
 
 export const headerSize = 'sizing090'
 
@@ -80,6 +79,12 @@ const pastDueBanner = {
     text:
       'You’ll no longer have access to subscription benefits. To re-activate call 0800 555 1234.',
   },
+  toBeCancelled: {
+    title: 'Your subscription will end soon.',
+    phoneNumber: '0800 555 1234',
+    text:
+      'You have cacelled your subscription and will lose access to all benefits on ##DATE##. To re-activate your subcsription call ##PHONE_NUMBER##.',
+  },
   treshold: {
     firstNotice: 26,
     secondNotice: 30,
@@ -110,7 +115,7 @@ const NavigationContainer = styled.div<NavigationProps>`
   ${getMediaQueryFromTheme('md')} {
     display: block;
     position: relative;
-    overflow: auto;
+    overflow: hidden;
     width: initial;
     min-height: initial;
     background-color: initial;
@@ -280,7 +285,7 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
       </StyledHeader>
       <PastDueBannerExternal
         pastDueBanner={pastDueBanner}
-        vxInstances={user?.vxInstances as VxInstance[]}
+        user={user}
         wrapper={BannerContainer}
       />
     </>

package/components/layout/LayoutTemplate.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
+import { UserData } from '@newskit-render/my-account'
 import Header from '../header'
 import Footer from '../footer'
 import { Gutter } from './Gutter'
 import { LayoutProps } from './layoutTypes'
 import { MainGrid } from './MainGrid'
-import { UserData } from '../../helpers/global-types'
 
 const LayoutTemplate: React.FC<LayoutProps> = ({
   children,

package/components/layout/layoutTypes.ts

@@ -1,6 +1,6 @@
 import React from 'react'
 import { GridProps } from 'newskit'
-import { UserData } from '../../helpers/global-types'
+import { UserData } from '@newskit-render/my-account'
 
 export type LayoutProps = {
   children: React.ReactNode

package/components/section/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Cell } from 'newskit'
-
-import { Page, UserData } from '../../helpers/global-types'
+import { UserData } from '@newskit-render/my-account'
+import { Page } from '../../helpers/global-types'
 import Layout from '../layout'
 import pageBlock from './pageBlock'
 import SectionTitleBar from '../common/SectionTitleBar'

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

@@ -258,8 +258,8 @@ describe('My account personal details', () => {
     cy.get('input[name="city"]').clear().type('London')
     cy.get('input[name="county"]').clear().type('Kent')
     cy.get('input[name="postcode"]').clear().type('SE1 9GF')
-    cy.get('select[name="country"]').select('GB')
-
+    cy.get('[data-testid="select-chevron-button"]').click({ force: true })
+    cy.get('[data-testid="United States"]').click({ multiple: true })
     cy.get('[data-testid="primary-button"]').click()
     cy.contains(
       'Your address can’t contain special characters. Please try again.'
@@ -293,7 +293,8 @@ describe('My account personal details', () => {
     cy.get('input[name="city"]').clear().type('London')
     cy.get('input[name="county"]').clear().type('Kent')
     cy.get('input[name="postcode"]').clear().type('SE1 9GF')
-    cy.get('select[name="country"]').select('GB')
+    cy.get('[data-testid="select-chevron-button"]').click({ force: true })
+    cy.get('[data-testid="United States"]').click({ multiple: true })
 
     cy.get('[data-testid="primary-button"]').click()
     cy.contains('[data-testid="toast-container"]', 'Updating your address...')

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

@@ -1,42 +1,42 @@
-describe('My account Payment page', () => {
-  beforeEach(() => {
-    cy.mockConsentAndVisit('/account/payment')
-  })
+// describe('My account Payment page', () => {
+//   beforeEach(() => {
+//     cy.mockConsentAndVisit('/account/payment')
+//   })
 
-  it('should load the zuora iFrame', () => {
-    cy.get('iframe').should('exist')
-  })
+//   it('should load the zuora iFrame', () => {
+//     cy.get('iframe').should('exist')
+//   })
 
-  // it('should successully send the form', () => {
-  //   if (Cypress.config('chromeWebSecurity')) {
-  //     throw new Error(
-  //       'To get Zuora element `chromeWebSecurity` must be disabled'
-  //     )
-  //   }
+//   it('should successully send the form', () => {
+//     if (Cypress.config('chromeWebSecurity')) {
+//       throw new Error(
+//         'To get Zuora element `chromeWebSecurity` must be disabled'
+//       )
+//     }
 
-  //   cy.get('iframe').should('exist')
-  //   cy.getZuoraElement('input[name="field_creditCardHolderName"]').type(
-  //     'Gabriel Dimitrov'
-  //   )
-  //   cy.getZuoraElement('input[name="field_creditCardNumber"]').type(
-  //     '4111 1111 1111 1111'
-  //   )
-  //   cy.getZuoraElement('input[name="field_cardSecurityCode"]').type('123')
-  //   cy.getZuoraElement('input[name="field_creditCardPostalCode"]').type(
-  //     'E11 9HB'
-  //   )
+//     cy.get('iframe').should('exist')
+//     cy.getZuoraElement('input[name="field_creditCardHolderName"]').type(
+//       'Gabriel Dimitrov'
+//     )
+//     cy.getZuoraElement('input[name="field_creditCardNumber"]').type(
+//       '4111 1111 1111 1111'
+//     )
+//     cy.getZuoraElement('input[name="field_cardSecurityCode"]').type('123')
+//     cy.getZuoraElement('input[name="field_creditCardPostalCode"]').type(
+//       'E11 9HB'
+//     )
 
-  //   cy.getZuoraElement('select[name="field_creditCardExpirationMonth"]').select(
-  //     '11'
-  //   )
-  //   cy.getZuoraElement('select[name="field_creditCardExpirationYear"]').select(
-  //     '2026'
-  //   )
-  //   cy.getZuoraElement('#submitButton').click()
+//     cy.getZuoraElement('select[name="field_creditCardExpirationMonth"]').select(
+//       '11'
+//     )
+//     cy.getZuoraElement('select[name="field_creditCardExpirationYear"]').select(
+//       '2026'
+//     )
+//     cy.getZuoraElement('#submitButton').click()
 
-  //   cy.contains(
-  //     '[data-testid="toast-container"]',
-  //     'Your payment method has been updated'
-  //   )
-  // })
-})
+//     cy.contains(
+//       '[data-testid="toast-container"]',
+//       'Your payment method has been updated'
+//     )
+//   })
+// })

package/helpers/__tests__/createThemeDropdownObject.test.ts

@@ -0,0 +1,34 @@
+import { createThemeDropdownObject } from '../createThemeDropdownObject'
+
+describe('createThemeDropdownObject', () => {
+  const setTheme = jest.fn()
+  test('should return themeDropdownObject', () => {
+    const themeDropdownObject = createThemeDropdownObject(setTheme)
+    expect(themeDropdownObject).toEqual({
+      setTheme,
+      clientHeaderImages: {
+        'The-Sun': 'display-personalDetails-header-sun.svg',
+        'Virgin-Radio': 'display-personalDetails-header-vr.svg',
+        'The-Times': 'display-personalDetails-header-times.svg',
+      },
+      clientNavigationLogos: {
+        'The-Sun': {
+          src: 'navigationPrimary-brandMark-sun.svg',
+          width: '115px',
+          top: '0',
+        },
+        'Virgin-Radio': {
+          src: 'navigationPrimary-brandMark-vr.svg',
+          width: '150px',
+          top: '0',
+        },
+        'The-Times': {
+          src: 'navigationPrimary-brandMark-times.svg',
+          width: '150px',
+          top: '0',
+        },
+      },
+      options: expect.any(Object),
+    })
+  })
+})

package/helpers/createThemeDropdownObject.ts

@@ -0,0 +1,49 @@
+import { UncompiledTheme } from 'newskit'
+import {
+  sharedTheme,
+  timesTheme,
+  virginRadioTheme,
+  theSunTheme,
+  ThemeDropdownObject,
+} from '@newskit-render/shared-components'
+
+const clientHeaderImages = {
+  'The-Sun': 'display-personalDetails-header-sun.svg',
+  'Virgin-Radio': 'display-personalDetails-header-vr.svg',
+  'The-Times': 'display-personalDetails-header-times.svg',
+}
+
+const clientNavigationLogos = {
+  'The-Sun': {
+    src: 'navigationPrimary-brandMark-sun.svg',
+    width: '115px',
+    top: '0',
+  },
+  'Virgin-Radio': {
+    src: 'navigationPrimary-brandMark-vr.svg',
+    width: '150px',
+    top: '0',
+  },
+  'The-Times': {
+    src: 'navigationPrimary-brandMark-times.svg',
+    width: '150px',
+    top: '0',
+  },
+}
+
+export const createThemeDropdownObject = (
+  setTheme: (T: UncompiledTheme) => void
+): ThemeDropdownObject => {
+  const themeDropdownObject = {
+    setTheme,
+    clientHeaderImages,
+    clientNavigationLogos,
+    options: {
+      sharedTheme,
+      timesTheme,
+      virginRadioTheme,
+      theSunTheme,
+    },
+  }
+  return themeDropdownObject
+}

package/helpers/getUser.ts

@@ -1,5 +1,5 @@
 import fetch from 'cross-fetch'
-import { UserData } from './global-types'
+import { UserData } from '@newskit-render/my-account'
 
 interface UserHeaders {
   [key: string]: string

package/helpers/global-types.ts

@@ -3,35 +3,6 @@ export enum ContentType {
   post,
 }
 
-export interface UserData {
-  firstName?: string
-  lastName?: string
-  cpn?: string
-  email?: string
-  hash?: string
-  customData?: string
-  displayName?: string
-  vxInstances?: VxInstance[]
-}
-
-export interface VxInstance {
-  spec?: {
-    description: string
-    id: string
-    isActive: string
-    name: string
-  }
-  interactions: [SubscriptionPaymentInstance]
-}
-
-export interface PastDue {
-  isPastDue: boolean
-  since: Date
-}
-export interface SubscriptionPaymentInstance {
-  pastDue: PastDue
-}
-
 export type RadioPost = {
   id: number
   type: ContentType

package/infrastructure/.circleci/config.yml

@@ -240,7 +240,6 @@ orbs:
                 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
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.MAIN_CLIENT_ID=${MAIN_CLIENT_ID}"' >> $BASH_ENV
@@ -259,6 +258,8 @@ 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_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
                 echo 'export HELM_VALUES="--values $HELM_PATH/values-$HELM_VAL_ENV.yaml"' >> $BASH_ENV
                 echo 'export HELM_INSTALL="helm install --atomic $HELM_VALUES $HELM_OPT_SET $HELM_OPT_NAMESPACE"' >> $BASH_ENV

package/infrastructure/helm/values-dev.yaml

@@ -10,6 +10,7 @@ envs:
   NEWSKIT_API_ENV_URL: 'https://newskit.dev.newsapis.co.uk/graphql'
   SITE_HOST: ''
   PUBLISHER: ''
+  TITLE: ''
   SITEMAP_PUBLICATION_NAME: ''
   SITEMAP_FIRST_PUBLICATION_DATE: ''
   TWITTER_USERNAME: ''

package/infrastructure/helm/values-pr.yaml

@@ -10,6 +10,7 @@ envs:
   NEWSKIT_API_ENV_URL: 'https://newskit.dev.newsapis.co.uk/graphql'
   SITE_HOST: ''
   PUBLISHER: ''
+  TITLE: ''
   SITEMAP_PUBLICATION_NAME: ''
   SITEMAP_FIRST_PUBLICATION_DATE: ''
   TWITTER_USERNAME: ''

package/infrastructure/helm/values-prod.yaml

@@ -10,6 +10,7 @@ envs:
   NEWSKIT_API_ENV_URL: 'https://newskit.newsapis.co.uk/graphql'
   SITE_HOST: ''
   PUBLISHER: ''
+  TITLE: ''
   SITEMAP_PUBLICATION_NAME: ''
   SITEMAP_FIRST_PUBLICATION_DATE: ''
   TWITTER_USERNAME: ''

package/infrastructure/helm/values-staging.yaml

@@ -10,6 +10,7 @@ envs:
   NEWSKIT_API_ENV_URL: 'https://newskit.staging.newsapis.co.uk/graphql'
   SITE_HOST: ''
   PUBLISHER: ''
+  TITLE: ''
   SITEMAP_PUBLICATION_NAME: ''
   SITEMAP_FIRST_PUBLICATION_DATE: ''
   TWITTER_USERNAME: ''

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.27.8",
+  "version": "1.30.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,14 +33,14 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.14.2",
-    "@newskit-render/auth": "^0.28.2",
-    "@newskit-render/checkout": "^0.23.4",
-    "@newskit-render/feature-flags": "^0.10.2",
-    "@newskit-render/my-account": "^0.140.2",
-    "@newskit-render/shared-components": "^0.36.1",
-    "@newskit-render/sitemap": "^0.34.2",
-    "@newskit-render/validation": "^0.34.3",
+    "@newskit-render/api": "^0.15.0",
+    "@newskit-render/auth": "^0.29.0",
+    "@newskit-render/checkout": "^0.24.2",
+    "@newskit-render/feature-flags": "^0.11.0",
+    "@newskit-render/my-account": "^0.143.0",
+    "@newskit-render/shared-components": "^0.37.2",
+    "@newskit-render/sitemap": "^0.35.0",
+    "@newskit-render/validation": "^0.37.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",

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

@@ -1,10 +1,10 @@
 import React from 'react'
 import newrelic from 'newrelic'
 import { createApolloClient, ClientTypes } from '@newskit-render/api'
+import { UserData } from '@newskit-render/my-account'
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { highlights, relatedArticles } from '../../../helpers/mocks/articleMock'
-import { UserData } from '../../../helpers/global-types'
 // import { fetchUser } from '../../../helpers/getUser'
 // import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'

package/pages/account/cancellation/index.tsx

@@ -2,10 +2,18 @@ import React, { useContext } from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
 import { AppContext } from '../../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountCancellation = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <Cancellation {...props} customTheme={theme} setTheme={setTheme} />
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  return (
+    <Cancellation
+      {...props}
+      customTheme={theme}
+      themeDropdownObject={themeDropdownObject}
+    />
+  )
 }
 
 export default AccountCancellation

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

@@ -8,10 +8,12 @@ import {
 } from '@newskit-render/my-account'
 import validation from '../../../validation'
 import { AppContext } from '../../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountEditField = (props) => {
   const doesEditPageExist = Object.keys(componentMap).includes(props.data.type)
   const { theme, setTheme } = useContext(AppContext)
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
 
   if (doesEditPageExist) {
     return (
@@ -19,7 +21,7 @@ const AccountEditField = (props) => {
         {...props}
         validation={validation}
         customTheme={theme}
-        setTheme={setTheme}
+        themeDropdownObject={themeDropdownObject}
       />
     )
   }

package/pages/account/index.tsx

@@ -2,10 +2,18 @@ import newrelic from 'newrelic'
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
 import React, { useContext } from 'react'
 import { AppContext } from '../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../helpers/createThemeDropdownObject'
 
 const AccountPersonalDetails = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <PersonalDetails {...props} customTheme={theme} setTheme={setTheme} />
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  return (
+    <PersonalDetails
+      {...props}
+      customTheme={theme}
+      themeDropdownObject={themeDropdownObject}
+    />
+  )
 }
 
 export default AccountPersonalDetails

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

@@ -5,11 +5,17 @@ import {
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountNewslettersAndAlerts = (props) => {
   const { theme, setTheme } = useContext(AppContext)
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
   return (
-    <NewslettersAndAlerts {...props} customTheme={theme} setTheme={setTheme} />
+    <NewslettersAndAlerts
+      {...props}
+      customTheme={theme}
+      themeDropdownObject={themeDropdownObject}
+    />
   )
 }
 

package/pages/account/payment/index.tsx

@@ -6,10 +6,18 @@ import {
 } from '@newskit-render/my-account'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountCancellation = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <Payment {...props} customTheme={theme} setTheme={setTheme} />
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  return (
+    <Payment
+      {...props}
+      customTheme={theme}
+      themeDropdownObject={themeDropdownObject}
+    />
+  )
 }
 
 export default AccountCancellation

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

@@ -5,14 +5,16 @@ import {
 import newrelic from 'newrelic'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountSubscriptionAndBilling = (props) => {
   const { theme, setTheme } = useContext(AppContext)
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
   return (
     <SubscriptionAndBilling
       {...props}
       customTheme={theme}
-      setTheme={setTheme}
+      themeDropdownObject={themeDropdownObject}
     />
   )
 }

package/pages/api/sitemap.ts

@@ -1,6 +1,15 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import { genericSitemap, PublisherGroup } from '@newskit-render/sitemap'
+import {
+  genericSitemap,
+  PublisherGroup,
+  CustomStaticPage,
+} from '@newskit-render/sitemap'
 
+const defaultCustomStaticPagesCollection: CustomStaticPage[] = [
+  {
+    channel: 'test-custom-page',
+  },
+]
 const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   genericSitemap({
     res,
@@ -9,6 +18,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) =>
     domain: new URL(process.env.SITE_HOST as string).host,
     firstArticleDate: process.env.SITEMAP_FIRST_PUBLICATION_DATE as string,
     publicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
+    customStaticPageCollection: defaultCustomStaticPagesCollection,
   })
 
 export default handler

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

@@ -2,14 +2,16 @@ import { AccountCreation, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
 import validation from '../../../validation'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const AccountCreationPage = (props) => {
   const { theme, setTheme } = useContext(AppContext)
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
   return (
     <AccountCreation
       {...props}
       customTheme={theme}
-      setTheme={setTheme}
+      themeDropdownObject={themeDropdownObject}
       validation={validation}
     />
   )

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

@@ -1,10 +1,18 @@
 import { PaymentDetails, getProviderProps } from '@newskit-render/checkout'
 import React, { useContext } from 'react'
 import { AppContext } from '../../../app-context/AppContext'
+import { createThemeDropdownObject } from '../../../helpers/createThemeDropdownObject'
 
 const PaymentDetailsPage = (props) => {
   const { theme, setTheme } = useContext(AppContext)
-  return <PaymentDetails {...props} customTheme={theme} setTheme={setTheme} />
+  const themeDropdownObject = createThemeDropdownObject(setTheme)
+  return (
+    <PaymentDetails
+      {...props}
+      customTheme={theme}
+      themeDropdownObject={themeDropdownObject}
+    />
+  )
 }
 
 export default PaymentDetailsPage