@newskit-render/core 1.34.0 → 1.40.0

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

@@ -0,0 +1,137 @@
+describe('Payment Failer', () => {
+  it('Should show first notice', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    cy.visit('/account', {
+      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(Date.now() - 24 * 3600 * 1000).toISOString(),
+            }
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains("We haven't been able to take payment")
+    cy.contains(
+      'You may need to update your payment details to keep your subscription.'
+    )
+    cy.get('[data-testid="buttonLink"]').should('be.visible')
+    cy.contains('Update payment details')
+  })
+
+  it('Should show second notice', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    cy.visit('/account', {
+      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(
+                Date.now() - 24 * 27 * 3600 * 1000
+              ).toISOString(),
+            }
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Act now to keep your subscription')
+    cy.contains(
+      'We’ve tried several times, but haven’t been able to take payment. Please update your payment details to keep your subscription.'
+    )
+    cy.get('[data-testid="buttonLink"]').should('be.visible')
+    cy.contains('Update payment details')
+  })
+
+  it('Should show terminated notice', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    cy.visit('/account', {
+      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(
+                Date.now() - 24 * 35 * 3600 * 1000
+              ).toISOString(),
+            }
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription has been terminated')
+    cy.contains(
+      'We didn’t receive payment for your subscription. To reactivate it, please call XXXX-XXX-XXXX.'
+    )
+  })
+
+  it('Should show expired subscription view with terminated notice', () => {
+    cy.GetAcsSession('expiredSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() - 24 * 35 * 3600 * 1000)
+    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: date.toISOString(),
+            }
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+
+    cy.contains('You’ve previously had a subscription that has now expired')
+
+    cy.contains(
+      `On ${date.toLocaleDateString(
+        'en-GB'
+      )} your Digital subscription expired. You can can re-subscribe by confirming a few details or view other packages that are available.`
+    )
+    cy.get('[data-testid="primary-button"]')
+      .should('have.attr', 'href', '/title-re-subscribe')
+      .contains('Re-subscribe')
+    cy.get('[data-testid="secondary-button"]')
+      .should('have.attr', 'href', '/title-subscription-options')
+      .contains('View subscription options')
+  })
+})

package/cypress/support/commands.js

@@ -4,7 +4,32 @@ Cypress.Commands.add('mockConsentAndVisit', (url) => {
   cy.visit(url)
 })
 
-Cypress.Commands.add('GetAcsSession', () => {
+Cypress.Commands.add('mockConsent', () => {
+  cy.setCookie('nukt_sp_consent', 'JABCDEFGHI')
+  cy.setCookie('consentUUID', '28cfcd1e-6916-4488-9d84-54f2618eaa14')
+})
+
+const userMap = {
+  default: {
+    username: 'temp.account@tempaccount.com',
+    password: 'asdasd1A',
+  },
+  noSub: {
+    username: 'render.e2e.no-sub@yopmail.com',
+    password: 'Ad45p0-swq151@',
+  },
+  expiredSub: {
+    username: 'tim.newsuk3@yopmail.com',
+    password: 'Ad45p0-swq151@',
+  },
+  withSub: {
+    username: 'render.e2e.sub@yopmail.com',
+    password: 'Ad45p0-swq151@',
+  }
+}
+
+Cypress.Commands.add('GetAcsSession', (user = 'default') => {
+  const { username, password } = userMap[user]
   cy.request({
     method: 'POST',
     url: 'https://login.staging-thesun.co.uk/services/session',
@@ -16,8 +41,8 @@ Cypress.Commands.add('GetAcsSession', () => {
       gotoUrl: 'https://login.staging-thesun.co.uk/',
       sso: false,
       authCredentials: {
-        username: 'temp.account@tempaccount.com',
-        password: 'asdasd1A',
+        username,
+        password,
       },
     },
   }).then((response) => {

package/helpers/global-types.ts

@@ -123,8 +123,8 @@ export type Page = {
 export type Media = Image | Video
 
 export type Image = {
-  crops?: ImageCrop[]
-  crop: ImageCrop
+  crops: ImageCrop[]
+  crop?: ImageCrop
 }
 
 export type Video = {

package/helpers/mocks/getPageMock.ts

@@ -80,10 +80,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt',
+                      },
+                    ],
                   },
                 },
               },
@@ -106,10 +109,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt 2',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt 2',
+                      },
+                    ],
                   },
                 },
               },
@@ -131,12 +137,15 @@ const data = {
                       },
                     ],
                   },
-                  media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt 3',
+                  media: [
+                    {
+                      crops: {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt 3',
+                      },
                     },
-                  },
+                  ],
                 },
               },
               {
@@ -158,10 +167,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt 3',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt 3',
+                      },
+                    ],
                   },
                 },
               },
@@ -312,10 +324,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt',
+                      },
+                    ],
                   },
                 },
               },
@@ -338,10 +353,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt 2',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt 2',
+                      },
+                    ],
                   },
                 },
               },
@@ -364,10 +382,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt 3',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt 3',
+                      },
+                    ],
                   },
                 },
               },
@@ -390,10 +411,13 @@ const data = {
                     ],
                   },
                   media: {
-                    crop: {
-                      url: 'some-url-to-image',
-                      alt: 'image alt 3',
-                    },
+                    crops: [
+                      {
+                        url:
+                          'https://www.thesun.co.uk/wp-content/uploads/2022/03/SPORT-PREVIEW-Amadou-Onana-to-WHU.jpg?strip=all&w=620&h=413&crop=1',
+                        alt: 'image alt 3',
+                      },
+                    ],
                   },
                 },
               },

package/infrastructure/.circleci/config.yml

@@ -645,7 +645,7 @@ orbs:
                 source $BASH_ENV
                 CURRENT_VERSION=$(jq -r .version ./package.json)
 
-                npm install --no-save release-documentation-cli@5.2.0
+                npm install --no-save release-documentation-cli@5.2.4
 
                 # If your tags are prefixed (i.e. lerna) check the --tagFilter parameter
                 echo "Creating a release request for $CURRENT_VERSION to be deployed to production."
@@ -670,7 +670,7 @@ orbs:
                 export CURRENT_VERSION=$(jq -r .version ./package.json)
                 echo "export CURRENT_VERSION=$CURRENT_VERSION" >> $BASH_ENV
 
-                npm install --no-save release-documentation-cli@5.2.0
+                npm install --no-save release-documentation-cli@5.2.4
 
                 # If your tags are prefixed (i.e. lerna) check the --tagFilter parameter
                 $(npm bin)/release promote

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.34.0",
+  "version": "1.40.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,13 +33,13 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.16.0",
+    "@newskit-render/api": "^0.17.0",
     "@newskit-render/auth": "^0.30.0",
-    "@newskit-render/checkout": "^0.25.0",
+    "@newskit-render/checkout": "^0.25.4",
     "@newskit-render/feature-flags": "^0.11.0",
-    "@newskit-render/feed": "^0.4.0",
-    "@newskit-render/my-account": "^0.145.0",
-    "@newskit-render/shared-components": "^0.39.0",
+    "@newskit-render/feed": "^0.4.1",
+    "@newskit-render/my-account": "^0.149.0",
+    "@newskit-render/shared-components": "^0.42.0",
     "@newskit-render/validation": "^0.38.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

package/pages/[section]/index.tsx

@@ -22,13 +22,24 @@ export async function getServerSideProps(context) {
     : ''
 
   newrelic.setTransactionName(`Section: ${section}`)
-  const [{ data }, user] = await Promise.all([
-    apolloClient.query({
-      query: GET_PAGE,
-      variables: { channel: section, publisher: 'DEMO' },
-    }),
-    await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
-  ])
+
+  let data
+  let user
+  try {
+    const [{ data: pageData }, pageUser] = await Promise.all([
+      apolloClient.query({
+        query: GET_PAGE,
+        variables: { channel: section, publisher: 'DEMO' },
+      }),
+      await fetchUser(acsCookie, ACCOUNT_QUERY_URL),
+    ])
+    data = pageData
+    user = pageUser
+  } catch (e) {
+    return {
+      notFound: true,
+    }
+  }
 
   addCacheHeaders(context.res)
   return {

package/pages/_error.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { NotFound, GenericError } from '@newskit-render/my-account'
 import Error from 'next/error'
-import FourOhFour from '../components/404/404'
 import { getCircularReplacer } from '../helpers/getCircularReplacer'
+import ErrorPage from '../components/ErrorPage/ErrorPage'
 
 CustomError.getInitialProps = ({ res, err, asPath }) => {
   let statusCode = 404
@@ -33,8 +33,24 @@ function CustomError({ statusCode, asPath }) {
     return <GenericError />
   }
   if (statusCode === 404) {
-    return <FourOhFour />
+    return (
+      <ErrorPage
+        title="Page not found"
+        errorMassage={`
+      We can't seem to find what you're looking for. If you typed a URL
+      into your browser, it might be worth checking and trying again.`}
+      />
+    )
   }
+  if (statusCode === 500 || statusCode === 502) {
+    return (
+      <ErrorPage
+        title="Server-side error occurred"
+        errorMassage="We could not fetch the data from the server"
+      />
+    )
+  }
+
   return <Error statusCode={statusCode} />
 }