@newskit-render/core 1.33.1 → 1.42.1

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

@@ -0,0 +1,222 @@
+describe('Account Subscription & Cancellation', () => {
+  it('Should show no subscription view', () => {
+    cy.GetAcsSession('noSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.contains('You don’t have a subscription')
+    cy.contains('Start a subscription and get access to all benefits.')
+    cy.get('[data-testid="primary-button"]')
+      .should('have.attr', 'href', '/title-storefrount')
+      .contains('View subscription options')
+  })
+
+  it('Should show Pending Activation view', () => {
+    cy.GetAcsSession('expiredSub')
+    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.subscriptions[0].status =
+              'Pending Activation'
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.contains('Your subscription is being activated')
+    cy.contains(
+      'Your membership is being set up at the moment, so you can’t access your subscription and billing details yet.'
+    )
+    cy.contains(
+      'Setting up your account can take a couple of hours, so please come back and try again later.'
+    )
+  })
+
+  it('Should show expired subscription view', () => {
+    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.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')
+  })
+
+  it('should got through cancellation workflow', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.contains('h1', 'Subscription & Billing')
+    cy.contains(
+      'All your subscription details, including payment info and transactions.'
+    )
+    cy.contains('4AAA038742030')
+    cy.contains('************1111')
+    cy.contains('expiry date 01/31')
+
+    cy.get('a[href="/account/cancellation"]').should('be.visible').click()
+
+    cy.get('[type="radio"]').first().check()
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains('Are you sure you want to cancel your subscription?')
+    cy.contains(
+      'You will lose unlimited access to exclusive content and benefits.'
+    )
+    cy.contains(
+      'Your subscription full access will be revoked by the end of your current bill cycle.'
+    )
+
+    // mock sussesful cancellation
+    cy.intercept('POST', '/api/account/mutate', {
+      statusCode: 200,
+      body: { data: { cancelSubscription: { success: true } } },
+    })
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.get('[data-testid="dialog-content"]').should('be.visible')
+    // go back to subscription and billing
+    cy.contains('Back to account').click()
+    cy.intercept('/account/subscription-and-billing')
+    // reload with correct mock data to show past banner
+    const date = new Date(Date.now() + 20 * 30 * 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.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription will end soon.')
+    cy.contains(
+      `You have cancelled your subscription and will lose access to all benefits on ${date.getDate()}/${
+        date.getMonth() + 1
+      }/${date.getFullYear()}. To re-activate your subscription call XXXX-XXX-XXXX.`
+    )
+    cy.contains(
+      'If you change your mind or cancelled by mistake, speak to one of our advisors on XXXX-XXX-XXXX'
+    )
+  })
+
+  it('Should show warning when you dont give a cancellation reason', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/cancellation')
+    cy.contains('Please tell us why you want to cancel')
+    cy.contains(
+      'We value your opinion and this information will help us understand how we can improve our product and the services we provide.'
+    )
+    cy.get('[data-testid="primary-button"]').click()
+    cy.contains('Please, select one option')
+  })
+
+  it('Should display textfield for other', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/cancellation')
+    cy.contains('Please tell us why you want to cancel')
+    cy.get('[type="radio"]').check('Other')
+    cy.get('input[name="extra"]').clear().type('Thanks my buisness')
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains('Are you sure you want to cancel your subscription?')
+  })
+
+  it('Should not show banner once it has been dismissed', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() + 20 * 30 * 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.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription will end soon.')
+    cy.get('[data-testid="close-banner"]').click({
+      force: true,
+      multiple: true,
+    })
+    cy.reload()
+    cy.get('[data-testid="banner-container"]').should('not.exist')
+  })
+
+  it('Should not display banner if set date is passed current date', () => {
+    cy.GetAcsSession('withSub')
+    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.subscriptions[0].serviceCancellationDate = date.toISOString()
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('[data-testid="banner-container"]').should('be.visible')
+    cy.contains('Your subscription has been cancelled.').then(() => {
+      window.localStorage.setItem(
+        'cancelledBanner',
+        new Date(new Date().setDate(new Date().getDate() - 7)).toDateString()
+      )
+    })
+    cy.reload()
+    cy.get('[data-testid="banner-container"]').should('not.exist')
+    cy.clearLocalStorage()
+  })
+})

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

@@ -13,7 +13,7 @@ const data = {
         },
         children: [
           {
-            name: 'LEAD_1_AND_2',
+            name: 'SUPPLEMENT_LEAD_AND_4_STACK',
             type: 'slice',
             children: [
               {
@@ -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',
+                      },
+                    ],
                   },
                 },
               },
@@ -245,7 +257,7 @@ const data = {
             ],
           },
           {
-            name: 'LEAD_1_AND_2',
+            name: 'SUPPLEMENT_LEAD_AND_4_STACK',
             type: 'slice',
             children: [
               {
@@ -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.33.1",
+  "version": "1.42.1",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -33,19 +33,19 @@
   },
   "dependencies": {
     "@apollo/client": "3.4.16",
-    "@newskit-render/api": "^0.16.0",
-    "@newskit-render/auth": "^0.29.0",
-    "@newskit-render/checkout": "^0.24.3",
-    "@newskit-render/feature-flags": "^0.11.0",
-    "@newskit-render/feed": "^0.3.1",
-    "@newskit-render/my-account": "^0.144.1",
-    "@newskit-render/shared-components": "^0.38.0",
-    "@newskit-render/validation": "^0.37.0",
+    "@newskit-render/api": "^0.18.0",
+    "@newskit-render/auth": "^0.31.1",
+    "@newskit-render/checkout": "^0.26.0",
+    "@newskit-render/feature-flags": "^0.12.0",
+    "@newskit-render/feed": "^0.5.1",
+    "@newskit-render/my-account": "^0.151.0",
+    "@newskit-render/shared-components": "^0.43.0",
+    "@newskit-render/validation": "^0.39.1",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "newrelic": "7.1.0",
     "newskit": "5.1.1",
-    "next": "12.0.10",
+    "next": "12.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-helmet": "6.1.0",
@@ -86,7 +86,7 @@
     "jest-junit": "12.0.0",
     "jest-watch-typeahead": "0.6.3",
     "lint-staged": "12.1.7",
-    "next-transpile-modules": "8.0.0",
+    "next-transpile-modules": "9.0.0",
     "prettier": "2.0.5",
     "prettier-eslint": "11.0.0",
     "prettier-eslint-cli": "5.0.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 {