@newskit-render/core 1.42.3 → 1.45.0

package/components/footer/__snapshots__/index.test.tsx.snap

@@ -255,7 +255,7 @@ exports[`Footer tests should render footer 1`] = `
           >
             <svg
               class="emotion-5"
-              height="40px"
+              height="48px"
               viewBox="0 0 244 40"
             >
               <title>
@@ -263,15 +263,17 @@ exports[`Footer tests should render footer 1`] = `
               </title>
               <path
                 d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                fill="#aebfff"
+                fill="white"
               />
               <path
                 d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                fill="#3358cc"
+                fill="white"
+                fill-opacity="0.4"
               />
               <path
                 d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                fill="#577ffb"
+                fill="white"
+                fill-opacity="0.701961"
               />
             </svg>
           </div>

package/components/header/index.test.tsx

@@ -53,4 +53,21 @@ describe('Header tests', () => {
       '/section-three'
     )
   })
+
+  test('render Account link if there is user data', () => {
+    const user = {
+      firstName: '',
+      lastName: '',
+      cpn: '',
+      email: '',
+      hash: '',
+      mobile: '',
+      phoneNumber: '',
+      dateOfBirth: '',
+      subscriptions: [],
+      paymentFailure: { active: false },
+    }
+    const { getByTestId } = renderWithTheme(Header, { user })
+    expect(getByTestId('account-link')).toBeInTheDocument()
+  })
 })

package/components/header/index.tsx

@@ -31,12 +31,14 @@ import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
 import { AppContext } from '../../app-context/AppContext'
 import { handleEnterKeyPress } from '../../helpers/a11y'
+import IconNavLink from '../common/iconNavLink'
+import { IconAccount } from '../common/icons/IconAccount'
 
-export const headerSize = 'sizing090'
+export const headerSize = 'sizing100'
 
 const StyledHeader = styled.div`
   ${getSizingCssFromTheme('height', headerSize)}
-  ${getColorCssFromTheme('backgroundColor', 'customInterfaceBrand')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   a,
   a:visited:not(:disabled) {
     ${getColorCssFromTheme('color', 'white')};
@@ -44,14 +46,14 @@ const StyledHeader = styled.div`
     line-height: ${getFontsFromTheme('fontLineHeight040')};
   }
   ${getMediaQueryFromTheme('xs')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing000')};
     ${getSizingCssFromTheme('paddingRight', 'sizing000')};
   }
   ${getMediaQueryFromTheme('lg')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing090')};
     ${getSizingCssFromTheme('paddingRight', 'sizing090')};
   }
@@ -111,14 +113,14 @@ const NavigationContainer = styled.div<NavigationProps>`
   overflow: auto;
   width: 100%;
   min-height: 100vh;
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   left: 0;
   ${getSizingCssFromTheme('top', headerSize)}
-  z-index: 1;
+  z-index: 2;
   display: ${(props) => (props.show ? 'block' : 'none')};
 
   ${getMediaQueryFromTheme('md')} {
-    display: block;
+    display: flex;
     position: relative;
     overflow: hidden;
     width: initial;
@@ -127,6 +129,7 @@ const NavigationContainer = styled.div<NavigationProps>`
     left: initial;
     top: initial;
     z-index: 1;
+    ${getSizingCssFromTheme('height', 'sizing080')}
   }
 `
 
@@ -146,12 +149,10 @@ const Navigation = styled.div`
 const NavButton = ({
   buttonText,
   href,
-  isMobile,
   ariaLabel,
 }: {
   buttonText: string
   href: string
-  isMobile: boolean
   isLast?: boolean
   ariaLabel?: string
 }) => (
@@ -159,9 +160,12 @@ const NavButton = ({
     as="span"
     spaceInline={{
       xs: 'space000',
-      md: 'space050',
+      md: 'space040',
+    }}
+    spaceStack={{
+      xs: 'space050',
+      md: 'space000',
     }}
-    spaceStack={isMobile ? 'space050' : ''}
   >
     <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
   </Block>
@@ -228,8 +232,11 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                 stackDistribution="flex-end"
                 wrap="nowrap"
               >
-                <NavigationContainer show={showMenu}>
-                  <Navigation>
+                <NavigationContainer
+                  show={showMenu}
+                  data-testid="NavigationContainer"
+                >
+                  <Navigation data-testid="Navigation">
                     {showMenu && (
                       <Block
                         spaceStack="space050"
@@ -239,21 +246,28 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                     <NavButton
                       buttonText="Section One"
                       href="/section-one"
-                      isMobile={showMenu}
                       ariaLabel="Section One Link"
                     />
                     <NavButton
                       buttonText="Section Two"
                       href="/section-two"
-                      isMobile={showMenu}
                       ariaLabel="Section Two Link"
                     />
                     <NavButton
                       buttonText="Section Three"
                       href="/section-three"
-                      isMobile={showMenu}
                       ariaLabel="Section Three Link"
                     />
+                    {user && (
+                      <IconNavLink
+                        icon={<IconAccount data-testid="account-link" />}
+                        href="/account"
+                        text="Account"
+                        spaceInline="space040"
+                        typographyPreset="utilityMeta020"
+                        stylePreset="linkStandaloneInverse"
+                      />
+                    )}
                   </Navigation>
                 </NavigationContainer>
                 <Visible xs sm>

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

@@ -1,3 +1,25 @@
+describe('Account without user', () => {
+  beforeEach(() => {
+    cy.mockConsentAndVisit('/account')
+  })
+
+  it('Should Display default fallback values', () => {
+    cy.get('[data-testid="ContentListIntroduction"]').should('have.length', 3)
+    cy.get('[data-testid="ContentListItems"]').should('have.length', 3)
+    cy.contains('Please enter your name')
+    cy.contains('Please call customer service on xxxx-xxx-xxxx')
+    cy.contains('Please enter your display name')
+    cy.contains(
+      'Your display name is used across our websites or apps when leaving comments on articles'
+    )
+    cy.contains('[email@address]')
+    cy.contains('******************')
+    cy.contains('Please enter your mobile telephone number')
+    cy.contains('Please enter your landline telephone number')
+    cy.contains('Please enter your address')
+  })
+})
+
 describe('My account personal details', () => {
   beforeEach(() => {
     cy.GetAcsSession()
@@ -77,6 +99,10 @@ describe('My account personal details', () => {
     )
   })
 
+  it.only('Should Display date of birth', () => {
+    cy.contains('21/03/1988')
+  })
+
   it('Should go to edit page and change display name ', () => {
     cy.get('a[href="/account/edit/displayName"]')
       .should('be.visible')
@@ -176,7 +202,7 @@ describe('My account personal details', () => {
       .children()
       .should(
         'contain',
-        'Email sent to temp.account@tempaccount.com with a password reset link. If you haven’t received it in a couple of minutes, you may request a new link by clicking on the button below.'
+        'Email sent to render.e2e.default@yopmail.com with a password reset link. If you haven’t received it in a couple of minutes, you may request a new link by clicking on the button below.'
       )
   })
 

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

@@ -219,4 +219,49 @@ describe('Account Subscription & Cancellation', () => {
     cy.get('[data-testid="banner-container"]').should('not.exist')
     cy.clearLocalStorage()
   })
+
+  it('should show modal when Cancel subscription link is clicked but user is in payment failure', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.paymentFailure = {
+              active: true,
+              startDate: new Date().toISOString(),
+            }
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('a[href="/account/cancellation"]').should('be.visible').click()
+
+    cy.contains('You have outstanding payments')
+  })
+
+  it('should show paypal subscription', () => {
+    cy.GetAcsSession('paypalSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.contains('[data-testid="payment-type"]', 'Paypal account')
+  })
+
+  it('should show inline message for paypal subscription', () => {
+    cy.GetAcsSession('paypalSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.get('a[href="/account/payment"]')
+      .should('be.visible')
+      .click({ force: true })
+    cy.contains(
+      '[data-testid="Zuora-inline"]',
+      'To update your Paypal credentials, please speak to one of our advisors on xxxx-xxx-xxxx or add a new payment method via credit/debit card using the form below.'
+    )
+  })
 })

package/cypress/e2e/account/main-api.spec.js

@@ -21,7 +21,7 @@ describe('MAIN API', () => {
       cy.get('@mutateUser').then((updatedUser) => {
         expect(updatedUser.status).to.eq(200)
         expect(updatedUser.body.data.updateUser.email).to.eq(
-          'temp.account@tempaccount.com'
+          'render.e2e.default@yopmail.com'
         )
       })
     })
@@ -43,7 +43,7 @@ describe('MAIN API', () => {
       cy.get('@mutateUser').then((updatedUser) => {
         expect(updatedUser.status).to.eq(200)
         expect(updatedUser.body.data.updateUser.email).to.eq(
-          'temp.account@tempaccount.com'
+          'render.e2e.default@yopmail.com'
         )
       })
     })
@@ -63,7 +63,7 @@ describe('MAIN API', () => {
       }).as('user')
       cy.get('@user').then((response) => {
         expect(response.status).to.eq(200)
-        expect(response.body.email).to.eq('temp.account@tempaccount.com')
+        expect(response.body.email).to.eq('render.e2e.default@yopmail.com')
         expect(response.body.mobile).to.eq('+447777777778')
         expect(response.body.firstName).to.eq('John')
         expect(response.body.lastName).to.eq('Smith')
@@ -85,7 +85,7 @@ describe('MAIN API', () => {
       }).as('userSubscription')
       cy.get('@userSubscription').then((response) => {
         expect(response.status).to.eq(200)
-        expect(response.body.cpn).to.eq('4AAA038732032')
+        expect(response.body.cpn).to.eq('4AAA038765003')
         assert.isArray(response.body.subscriptions)
       })
     })

package/cypress/support/commands.js

@@ -11,8 +11,8 @@ Cypress.Commands.add('mockConsent', () => {
 
 const userMap = {
   default: {
-    username: 'temp.account@tempaccount.com',
-    password: 'asdasd1A',
+    username: 'render.e2e.default@yopmail.com',
+    password: 'Ad45p0-swq151@',
   },
   noSub: {
     username: 'render.e2e.no-sub@yopmail.com',
@@ -25,7 +25,11 @@ const userMap = {
   withSub: {
     username: 'render.e2e.sub@yopmail.com',
     password: 'Ad45p0-swq151@',
-  }
+  },
+  paypalSub: {
+    username: 'render-paypal-payment@yopmail.com',
+    password: 'testing123',
+  },
 }
 
 Cypress.Commands.add('GetAcsSession', (user = 'default') => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.42.3",
+  "version": "1.45.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,13 +33,14 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.18.0",
-    "@newskit-render/auth": "^0.31.2",
-    "@newskit-render/checkout": "^0.26.1",
+    "@newskit-render/api": "^0.18.1",
+    "@newskit-render/auth": "^0.31.3",
+    "@newskit-render/checkout": "^0.26.4",
     "@newskit-render/feature-flags": "^0.13.0",
-    "@newskit-render/feed": "^0.5.1",
-    "@newskit-render/my-account": "^0.151.1",
-    "@newskit-render/shared-components": "^0.43.1",
+    "@newskit-render/feed": "^0.5.3",
+    "@newskit-render/my-account": "^0.152.4",
+    "@newskit-render/shared-components": "^0.45.1",
+    "@newskit-render/standalone-components": "^0.2.1",
     "@newskit-render/validation": "^0.39.1",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

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

@@ -4,11 +4,15 @@ import {
   createApolloClient,
   ClientTypes,
   getAcsCookie,
+  Publisher,
 } from '@newskit-render/api'
 import { UserData } from '@newskit-render/my-account'
+import {
+  recommendationsProvider,
+  Article,
+} from '@newskit-render/standalone-components'
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
-import { highlights, relatedArticles } from '../../../helpers/mocks/articleMock'
 import { fetchUser } from '../../../helpers/getUser'
 import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
@@ -20,6 +24,7 @@ export type ArticleSlug = {
   siteHost: string
   gscId?: string
   user?: UserData
+  recommendations: Article[]
 }
 const Article: React.FC<ArticleSlug> = ({
   universalArticle,
@@ -28,7 +33,11 @@ const Article: React.FC<ArticleSlug> = ({
   siteHost,
   gscId,
   user,
+  recommendations,
 }) => {
+  const highlitedArticles = recommendations.slice(0, 4)
+  const relatedArticles = recommendations.slice(4, 12)
+
   return (
     <ArticlePage
       articleURL={articleURL}
@@ -36,7 +45,7 @@ const Article: React.FC<ArticleSlug> = ({
       siteHost={siteHost}
       gscId={gscId}
       twitterUsername={twitterUsername}
-      highlights={highlights}
+      highlights={highlitedArticles}
       relatedArticles={relatedArticles}
       user={user}
     />
@@ -57,11 +66,12 @@ export async function getServerSideProps(context) {
     `Article: /${section}/${articleId}/${articleSlug}`
   )
 
-  const [{ data }, user] = await Promise.all([
+  const [{ data }, recommendations, user] = await Promise.all([
     apolloClient.query({
       query: GET_UNIVERSAL_ARTICLE,
       variables: { publisher: 'DEMO', id: articleId },
     }),
+    await recommendationsProvider({ articleId, publisher: Publisher.SUN_UK }),
     await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
   ])
 
@@ -74,6 +84,7 @@ export async function getServerSideProps(context) {
       siteHost: process.env.SITE_HOST || '',
       gscId: process.env.GSC_ID || '',
       showAds: true,
+      recommendations,
       user,
     },
   }

package/pages/api/news-sitemap.ts

@@ -1,10 +1,18 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import { newsSitemap, PublisherGroup } from '@newskit-render/feed'
+import { newsSitemap } from '@newskit-render/feed'
+import { Publisher } from '@newskit-render/api'
+
+/* We do not have sitemap date for Demo so using Virgin,
+ * This can be removed and replace with just - publisher: process.env.PUBLISHER as PublisherGroup, in created projects
+ */
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   newsSitemap({
     res,
-    publisher: process.env.PUBLISHER as PublisherGroup,
+    publisher:
+      process.env.PUBLISHER === 'DEMO'
+        ? Publisher.VIRGIN
+        : (process.env.PUBLISHER as Publisher),
     domain: new URL(process.env.SITE_HOST as string).host,
     publicationName: process.env.SITEMAP_PUBLICATION_NAME as string,
   })

package/pages/api/sitemap.ts

@@ -1,9 +1,10 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-import {
-  genericSitemap,
-  PublisherGroup,
-  CustomStaticPage,
-} from '@newskit-render/feed'
+import { genericSitemap, CustomStaticPage } from '@newskit-render/feed'
+import { Publisher } from '@newskit-render/api'
+
+/* We do not have sitemap date for Demo so using Virgin,
+ * This can be removed and replace with just - publisher: process.env.PUBLISHER as PublisherGroup, in created projects
+ */
 
 const defaultCustomStaticPagesCollection: CustomStaticPage[] = [
   {
@@ -14,7 +15,10 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) =>
   genericSitemap({
     res,
     query: req.query,
-    publisher: process.env.PUBLISHER as PublisherGroup,
+    publisher:
+      process.env.PUBLISHER === 'DEMO'
+        ? Publisher.VIRGIN
+        : (process.env.PUBLISHER as Publisher),
     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,