@newskit-render/core 1.29.4 → 1.32.1

package/CHANGELOG.md

@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.32.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.32.0...@newskit-render/core@1.32.1) (2022-03-09)
+
+
+### Bug Fixes
+
+* **PPDSR-633:** update temp header ([#622](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/622)) ([dc77a3a](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/dc77a3ae4e946523817a67a210516c88fc43f768))
+
+
+
+
+
+# [1.32.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.31.0...@newskit-render/core@1.32.0) (2022-03-09)
+
+
+### Features
+
+* **PPDSR-633:** Update payment failure to MAIN ([#618](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/618)) ([3de75ac](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/3de75acaed7fbd2e994d36f2c070fced6c2ea123))
+
+
+
+
+
+# [1.31.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.30.0...@newskit-render/core@1.31.0) (2022-03-09)
+
+
+### Features
+
+* **PPDSR-678:** add feed package ([#620](https://github.com/newscorp-ghfb/ncu-newskit-render/issues/620)) ([903cbdf](https://github.com/newscorp-ghfb/ncu-newskit-render/commit/903cbdf24e0ed0a1dea301a03f9d78cf7357187e))
+
+
+
+
+
+# [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)
 
 

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,25 +59,18 @@ const props: ArticleSlug = {
   gscId: '4320982',
 }
 
-const userMock = {
-  vxInstances: [
-    {
-      interactions: [
-        {
-          pastDue: {
-            isPastDue: false,
-            since: new Date(),
-          },
-        },
-      ],
-    },
-  ],
-} as UserData
+const user = {
+  paymentFailure: {
+    active: false,
+    startDate: null,
+  },
+  subscriptions: [{ endDate: null }],
+}
 
 jest.mock('cross-fetch', () =>
   jest.fn().mockImplementation(() =>
     Promise.resolve({
-      json: () => Promise.resolve(userMock),
+      json: () => Promise.resolve(user),
     })
   )
 )
@@ -93,13 +86,12 @@ jest.mock('@newskit-render/api', () => ({
       }),
     })
   }),
-  getMainSession: jest.fn(),
+  getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
 }))
 
 jest.mock('@newskit-render/my-account', () => {
   return {
     PastDueBannerExternal: 'PastDueBannerExternal',
-    getMainSession: jest.fn(),
   }
 })
 
@@ -138,7 +130,7 @@ describe('Article', () => {
         req: { headers: { cookie: 'some-cookie' } },
         res: { setHeader: setHeaderMock },
       })
-      expect(response).toEqual({ props: { ...props, showAds: true } })
+      expect(response).toEqual({ props: { ...props, showAds: true, user } })
       expect(setHeaderMock).toHaveBeenCalledWith(
         'Cache-Control',
         'public, s-maxage=10, stale-while-revalidate=59'

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

@@ -573,10 +573,6 @@ exports[`getServerSideProps Homepage 1`] = `
       </div>
     </div>
   </div>
-  <pastduebannerexternal
-    pastduebanner="[object Object]"
-    wrapper="NO_COMPONENT_SELECTOR"
-  />
   @media screen {
   .emotion-0 {
     background-color: #FFFFFF;

package/__tests__/pages/home.test.tsx

@@ -7,6 +7,14 @@ jest.mock('../../helpers/getYear', () => ({
   getYear: jest.fn().mockReturnValue('YYYY'),
 }))
 
+const user = {
+  paymentFailure: {
+    active: false,
+    startDate: null,
+  },
+  subscriptions: [{ endDate: null }],
+}
+
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
   createApolloClient: jest.fn().mockImplementation(() => {
@@ -23,16 +31,13 @@ jest.mock('@newskit-render/api', () => ({
       }),
     })
   }),
-  getMainSession: jest.fn(),
+  getAcsCookie: jest.fn().mockReturnValue({ Cookie: 'something' }),
 }))
 
 jest.mock('cross-fetch', () =>
   jest.fn().mockImplementation(() =>
     Promise.resolve({
-      json: () =>
-        Promise.resolve({
-          vxInstances: null,
-        }),
+      json: () => Promise.resolve(user),
     })
   )
 )
@@ -66,6 +71,7 @@ describe('getServerSideProps', () => {
             },
           },
           showAds: true,
+          user,
         },
       })
     )

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

@@ -573,10 +573,6 @@ exports[`Article should render tile and sub title 1`] = `
       </div>
     </div>
   </div>
-  <pastduebannerexternal
-    pastduebanner="[object Object]"
-    wrapper="NO_COMPONENT_SELECTOR"
-  />
   @media screen {
   .emotion-0 {
     background-color: #FFFFFF;

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.test.tsx

@@ -2,8 +2,10 @@ import { fireEvent } from '@testing-library/react'
 import { renderWithTheme } from '../../helpers/test-utils'
 import Header from '.'
 
-jest.mock('@newskit-render/my-account', () => {
+jest.mock('@newskit-render/shared-components', () => {
   return {
+    // @ts-ignore
+    ...jest.requireActual('@newskit-render/shared-components'),
     PastDueBannerExternal: 'PastDueBannerExternal',
   }
 })

package/components/header/index.tsx

@@ -12,13 +12,14 @@ import {
   IconFilledMenu,
   Image,
 } from 'newskit'
-import { PastDueBannerExternal } from '@newskit-render/my-account'
+import { UserData } from '@newskit-render/my-account'
 import {
   NextLink,
   theSunTheme,
   timesTheme,
   virginRadioTheme,
   ThemeDropdown,
+  PastDueBannerExternal,
 } from '@newskit-render/shared-components'
 import {
   renderCustomLightTheme as LightTheme,
@@ -30,7 +31,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 +80,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,
@@ -280,7 +286,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/helpers/__tests__/getUser.test.ts

@@ -13,7 +13,10 @@ 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 }))
-    await fetchUser('', 'http://localhost:3000/api/account/query')
+    await fetchUser(
+      { Cookie: 'test' },
+      'http://localhost:3000/api/account/query'
+    )
     expect(console.error).toHaveBeenCalledWith('Bad response from server')
   })
 
@@ -22,7 +25,22 @@ describe('getUser function', () => {
     fetchMock.mockImplementation(() =>
       Promise.resolve({ status: 200, json: mockJson })
     )
-    await fetchUser('', 'http://localhost:3000/api/account/query')
+    await fetchUser(
+      { Cookie: 'test' },
+      'http://localhost:3000/api/account/query'
+    )
     expect(mockJson).toHaveBeenCalled()
   })
+
+  it('should return null if no cookie', async () => {
+    const mockJson = jest.fn()
+    fetchMock.mockImplementation(() =>
+      Promise.resolve({ status: 200, json: mockJson })
+    )
+    await fetchUser(
+      "I'm not a cookie",
+      'http://localhost:3000/api/account/query'
+    )
+    expect(mockJson).not.toHaveBeenCalled()
+  })
 })

package/helpers/getUser.ts

@@ -1,5 +1,6 @@
 import fetch from 'cross-fetch'
-import { UserData } from './global-types'
+import { UserData } from '@newskit-render/my-account'
+import { MainAcsCookie } from '@newskit-render/api'
 
 interface UserHeaders {
   [key: string]: string
@@ -10,23 +11,26 @@ interface UserConfig {
   body: string
 }
 
-const userConfig = (session: string): UserConfig => ({
+const userConfig = (acsCookie: { Cookie: string }): UserConfig => ({
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',
-    'X-MAIN-SESSION': session,
+    ...acsCookie,
   },
-  body: JSON.stringify({ queryFragment: 'UserPaymentInstance' }),
+  body: JSON.stringify({ queryFragment: 'UserPaymentInfo' }),
 })
 
 export const fetchUser = async (
-  session: string,
+  acsCookie: MainAcsCookie,
   url: string
 ): Promise<UserData | null> => {
-  const response = await fetch(url, userConfig(session))
-  if (response.status >= 400) {
-    console.error('Bad response from server')
-    return null
+  if (typeof acsCookie === 'object') {
+    const response = await fetch(url, userConfig(acsCookie))
+    if (response.status >= 400) {
+      console.error('Bad response from server')
+      return null
+    }
+    return (await response.json()) as UserData
   }
-  return (await response.json()) as UserData
+  return null
 }

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.29.4",
+  "version": "1.32.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -35,12 +35,12 @@
     "@apollo/client": "3.4.16",
     "@newskit-render/api": "^0.15.0",
     "@newskit-render/auth": "^0.29.0",
-    "@newskit-render/checkout": "^0.24.2",
+    "@newskit-render/checkout": "^0.24.3",
     "@newskit-render/feature-flags": "^0.11.0",
-    "@newskit-render/my-account": "^0.142.3",
-    "@newskit-render/shared-components": "^0.37.2",
+    "@newskit-render/my-account": "^0.144.0",
+    "@newskit-render/shared-components": "^0.38.0",
     "@newskit-render/sitemap": "^0.35.0",
-    "@newskit-render/validation": "^0.36.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,12 +1,16 @@
 import React from 'react'
 import newrelic from 'newrelic'
-import { createApolloClient, ClientTypes } from '@newskit-render/api'
+import {
+  createApolloClient,
+  ClientTypes,
+  getAcsCookie,
+} 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 { fetchUser } from '../../../helpers/getUser'
+import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
 
 export type ArticleSlug = {
@@ -41,7 +45,9 @@ const Article: React.FC<ArticleSlug> = ({
 
 export async function getServerSideProps(context) {
   const apolloClient = await createApolloClient(ClientTypes.nkapi)
-  // const mainSession = getMainSession(context.req.headers.cookie)
+  const acsCookie = context.req.headers.cookie
+    ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
+    : ''
 
   const {
     params: { articleId, section, articleSlug },
@@ -51,15 +57,12 @@ export async function getServerSideProps(context) {
     `Article: /${section}/${articleId}/${articleSlug}`
   )
 
-  const [
-    { data },
-    // user
-  ] = await Promise.all([
+  const [{ data }, user] = await Promise.all([
     apolloClient.query({
       query: GET_UNIVERSAL_ARTICLE,
       variables: { publisher: 'DEMO', id: articleId },
     }),
-    // await fetchUser(mainSession, ACCOUNT_QUERY_URL),
+    await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
@@ -71,7 +74,7 @@ export async function getServerSideProps(context) {
       siteHost: process.env.SITE_HOST || '',
       gscId: process.env.GSC_ID || '',
       showAds: true,
-      // user,
+      user,
     },
   }
 }

package/pages/[section]/index.tsx

@@ -1,13 +1,13 @@
 import newrelic from 'newrelic'
 import {
   createApolloClient,
-  // getMainSession,
+  getAcsCookie,
   ClientTypes,
 } from '@newskit-render/api'
 import { GET_PAGE } from '../../queries'
 import SectionPage from '../../components/section'
-// import { fetchUser } from '../../helpers/getUser'
-// import { ACCOUNT_QUERY_URL } from '../../constants'
+import { fetchUser } from '../../helpers/getUser'
+import { ACCOUNT_QUERY_URL } from '../../constants'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
 export async function getServerSideProps(context) {
@@ -17,20 +17,17 @@ export async function getServerSideProps(context) {
     params: { section },
   } = context
 
-  // const mainSession = getMainSession(context.req.headers.cookie)
+  const acsCookie = context.req.headers.cookie
+    ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
+    : ''
 
   newrelic.setTransactionName(`Section: ${section}`)
-  const [
-    { data },
-    //  user
-  ] = await Promise.all([
+  const [{ data }, user] = await Promise.all([
     apolloClient.query({
       query: GET_PAGE,
       variables: { channel: section, publisher: 'DEMO' },
     }),
-
-    // TODO: Enable once Main add Subscriptions
-    // await fetchUser(mainSession, ACCOUNT_QUERY_URL),
+    await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
@@ -39,7 +36,7 @@ export async function getServerSideProps(context) {
       page: data.page,
       isIndexPage: true,
       showAds: true,
-      //  user,
+      user,
     },
   }
 }

package/pages/index.tsx

@@ -1,13 +1,13 @@
 import newrelic from 'newrelic'
 import {
   createApolloClient,
-  // getMainSession,
+  getAcsCookie,
   ClientTypes,
 } from '@newskit-render/api'
 import { GET_PAGE } from '../queries'
 import SectionPage from '../components/section'
-// import { fetchUser } from '../helpers/getUser'
-// import { ACCOUNT_QUERY_URL } from '../constants'
+import { fetchUser } from '../helpers/getUser'
+import { ACCOUNT_QUERY_URL } from '../constants'
 import { addCacheHeaders } from '../helpers/addCacheHeaders'
 
 export async function getServerSideProps(context) {
@@ -16,18 +16,16 @@ export async function getServerSideProps(context) {
   console.warn(context.req && context.req.headers)
 
   const apolloClient = await createApolloClient(ClientTypes.nkapi)
-  // const mainSession = getMainSession(context.req.headers.cookie)
+  const acsCookie = context.req.headers.cookie
+    ? getAcsCookie(ClientTypes.main, context.req.headers.cookie)
+    : ''
 
-  const [
-    { data },
-    // user
-  ] = await Promise.all([
+  const [{ data }, user] = await Promise.all([
     apolloClient.query({
       query: GET_PAGE,
       variables: { channel: 'homepage', publisher: 'DEMO' },
     }),
-    // TODO: Enable once Main add Subscriptions
-    // await fetchUser(mainSession, ACCOUNT_QUERY_URL),
+    await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
@@ -36,10 +34,9 @@ export async function getServerSideProps(context) {
     props: {
       page,
       showAds: true,
-      // user: (user || null),
+      user,
     },
   }
 }
 
-// TEST RELEASE_CLI
 export default SectionPage

package/temp/header.tsx

@@ -11,14 +11,13 @@ import {
   Block,
   IconFilledMenu,
 } from 'newskit'
-import { NextLink } from '@newskit-render/shared-components'
-import { PastDueBannerExternal } from '@newskit-render/my-account'
+import { UserData } from '@newskit-render/my-account'
+import { NextLink, PastDueBannerExternal } from '@newskit-render/shared-components'
 import { MainGrid } from '../layout/MainGrid'
 import NewsKitLogoFull from '../common/NewskitLogo'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
 import { handleEnterKeyPress } from '../../helpers/a11y'
-import { UserData } from '../../helpers/global-types'
 
 export const headerSize = 'sizing090'
 
@@ -89,21 +88,31 @@ const Navigation = styled.div`
 const pastDueBanner = {
   firstNotice: {
     title: "We haven't been able to take payment",
-    text: 'You may need to update your payment details to keep your subscription.',
+    text:
+      'You may need to update your payment details to keep your subscription.',
     button: 'Update payment details',
   },
   secondNotice: {
     title: 'Act now to keep your subscription',
-    text: 'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.',
+    text:
+      'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.',
     button: 'Update payment details',
   },
   terminated: {
     title: 'Your subscription has been terminated',
-    text: 'We didn’t receive payment for your subscription. To reactivate it, please call 0800 018 5177.',
+    text:
+      'We didn’t receive payment for your subscription. To reactivate it, please call 0800 018 5177.',
   },
   cancelled: {
     title: 'Your subscription has been cancelled.',
-    text: 'You’ll no longer have access to subscription benefits. To re-activate call 0800 555 1234.',
+    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,
@@ -229,7 +238,7 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
       </StyledHeader>
       <PastDueBannerExternal
         pastDueBanner={pastDueBanner}
-        vxInstances={user?.vxInstances}
+        user={user}
         wrapper={BannerContainer}
       />
     </>