@newskit-render/core 1.85.6 → 1.87.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.86.0](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.86.0-alpha.0...@newskit-render/core@1.86.0) (2022-09-06)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
+## [1.85.6](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.85.6-alpha.1...@newskit-render/core@1.85.6) (2022-09-05)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [1.85.5](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@1.85.5-alpha.0...@newskit-render/core@1.85.5) (2022-09-05)
 
 **Note:** Version bump only for package @newskit-render/core

package/cypress/e2e/account/accessibility.spec.js

@@ -33,6 +33,10 @@ const pages = [
     url: '/account/edit/commenting-notifications',
     name: 'Commenting Notifications form',
   },
+  {
+    url: '/account/edit/delivery-instructions',
+    name: 'delivery instructions form',
+  },
 ]
 
 describe('Page accessibility', () => {

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

@@ -1,3 +1,5 @@
+import * as printSubscriptionPageProps from '../../fixtures/print-subscriptions/print-subscription-response.json'
+import { paymentFailure } from '../../fixtures/paymentFailure'
 // These tests are skiped now, until CPS resolves their issue with subsriptions.
 describe('Account Subscription & Cancellation', () => {
   it('Should show no subscription view', () => {
@@ -13,23 +15,12 @@ describe('Account Subscription & Cancellation', () => {
   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.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].status',
+      'Pending Activation'
+    )
     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.'
@@ -43,23 +34,12 @@ describe('Account Subscription & Cancellation', () => {
     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.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      date.toISOString()
+    )
     cy.contains('You’ve previously had a subscription that has now expired')
 
     cy.contains(
@@ -110,22 +90,12 @@ describe('Account Subscription & Cancellation', () => {
     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.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      date.toISOString()
+    )
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription will end soon.')
     cy.contains(
@@ -163,22 +133,12 @@ describe('Account Subscription & Cancellation', () => {
     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.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      date.toISOString()
+    )
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription will end soon.')
     cy.get('button[data-testid="banner-close-button"]').click({
@@ -193,22 +153,11 @@ describe('Account Subscription & Cancellation', () => {
     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.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      date.toISOString()
+    )
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription has been cancelled.').then(() => {
       window.localStorage.setItem(
@@ -224,25 +173,12 @@ describe('Account Subscription & Cancellation', () => {
   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.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.paymentFailure',
+      paymentFailure
+    )
     cy.get('a[href="/account/cancellation"]').should('be.visible').click()
 
     cy.contains('You have outstanding payments')
@@ -265,4 +201,81 @@ describe('Account Subscription & Cancellation', () => {
       '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.'
     )
   })
+
+  it('should show your deliveries section if the subscription has print', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+
+    cy.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions',
+      printSubscriptionPageProps.props.pageProps.user.subscriptions
+    )
+    cy.contains('Your deliveries')
+  })
+
+  it('should be able to add your delivery instructions', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/edit/delivery-instructions')
+    cy.contains('h1', 'Delivery instructions')
+    cy.contains('Where should we leave your Newspaper?')
+    cy.get('[type="radio"]').first().should('be.checked')
+    // mock sussesful api call
+    cy.intercept('POST', '/api/account/mutate', {
+      statusCode: 200,
+      body: { data: { updateUserSubscription: { success: true } } },
+    })
+
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains(
+      '[data-testid="toast-container"]',
+      'Updating your delivery instructions'
+    )
+
+    // Redirects to Subscription and billing page
+    cy.contains(
+      '[data-testid="toast-container"]',
+      'Your delivery instructions were succesfully updated. This may take up to 48hrs to come into effect.'
+    )
+  })
+
+  it('should be able to add your custom delivery instructions', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsentAndVisit('/account/edit/delivery-instructions')
+    cy.contains('h1', 'Delivery instructions')
+    cy.contains('Where should we leave your Newspaper?')
+
+    // cy.get('[value="Other (Please state)"]').first().check()
+    cy.get('[type="radio"]').check('Other (Please state)')
+    cy.contains(
+      'Please note that if you choose a delivery location that is not secure we cannot be liable for lost or stolen newspapers.'
+    )
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains('Please enter your delivery instructions.')
+    cy.get('input[name="other"]')
+      .clear()
+      .type(
+        'This is more than seventy Characters. Lorem ipsum dolor sit amet, consectetur.'
+      )
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains('You cannot exceed 70 characters')
+    cy.get('input[name="other"]').clear().type('Ring the bell')
+    // mock sussesful api call
+    cy.intercept('POST', '/api/account/mutate', {
+      statusCode: 200,
+      body: { data: { updateUserSubscription: { success: true } } },
+    })
+
+    cy.get('[data-testid="primary-button"]').scrollIntoView().click()
+    cy.contains(
+      '[data-testid="toast-container"]',
+      'Updating your delivery instructions'
+    )
+
+    // Redirects to Subscription and billing page
+    cy.contains(
+      '[data-testid="toast-container"]',
+      'Your delivery instructions were succesfully updated. This may take up to 48hrs to come into effect.'
+    )
+  })
 })

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

@@ -1,26 +1,19 @@
+import {
+  paymentFailureFirstNotice,
+  paymentFailureSecondNotice,
+  paymentFailureTerminatedNotice,
+} from '../../fixtures/paymentFailure'
+
 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.visitAndOverrideNextData(
+      '/account',
+      'props.pageProps.user.paymentFailure',
+      paymentFailureFirstNotice
+    )
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains("We haven't been able to take payment")
     cy.contains(
@@ -33,27 +26,12 @@ describe('Payment Failer', () => {
   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.visitAndOverrideNextData(
+      '/account',
+      'props.pageProps.user.paymentFailure',
+      paymentFailureSecondNotice
+    )
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Act now to keep your subscription')
     cy.contains(
@@ -66,27 +44,11 @@ describe('Payment Failer', () => {
   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.visitAndOverrideNextData(
+      '/account',
+      'props.pageProps.user.paymentFailure',
+      paymentFailureTerminatedNotice
+    )
     cy.get('[data-testid="past-due-banner"]').should('be.visible')
     cy.contains('Your subscription has been terminated')
     cy.contains(
@@ -119,7 +81,6 @@ describe('Payment Failer', () => {
         })
       },
     })
-
     cy.contains('You’ve previously had a subscription that has now expired')
 
     cy.contains(

package/cypress/fixtures/paymentFailure.js

@@ -0,0 +1,19 @@
+export const paymentFailure = {
+  active: true,
+  startDate: new Date(Date.now() - 24 * 35 * 3600 * 1000),
+}
+
+export const paymentFailureFirstNotice = {
+  active: true,
+  startDate: new Date(Date.now() - 24 * 3600 * 1000).toISOString(),
+}
+
+export const paymentFailureSecondNotice = {
+  active: true,
+  startDate: new Date(Date.now() - 24 * 27 * 3600 * 1000).toISOString(),
+}
+
+export const paymentFailureTerminatedNotice = {
+  active: true,
+  startDate: new Date(Date.now() - 24 * 35 * 3600 * 1000).toISOString(),
+}

package/cypress/fixtures/print-subscriptions/print-subscription-response.json

@@ -0,0 +1,50 @@
+{
+  "props": {
+    "pageProps": {
+      "user": {
+        "paymentFailure": {
+          "__typename": "CustomerPaymentFailure",
+          "active": false,
+          "startDate": null
+        },
+        "subscriptions": [
+          {
+            "id": "SUB-0010708256",
+            "startDate": "2022-08-01T13:22:33",
+            "serviceCancellationDate": null,
+            "isActive": true,
+            "currency": "GBP",
+            "price": 0,
+            "type": "Print",
+            "status": "Active",
+            "billingDetails": {
+              "__typename": "BillingDetails",
+              "billCycleDay": null,
+              "paymentMethod": {
+                "__typename": "PaymentMethod",
+                "cardType": null,
+                "cardNumber": null,
+                "type": null,
+                "expirationYear": null,
+                "expirationMonth": null
+              }
+            },
+            "__typename": "Subscription"
+          }
+        ],
+        "__typename": "User",
+        "cpn": "4AAA039158001"
+      },
+      "env": { "LOQACCOUNT_KEY": "" }
+    },
+    "tenant": "DEMO",
+    "__N_SSP": true
+  },
+  "page": "/account/subscription-and-billing",
+  "query": {},
+  "buildId": "development",
+  "isFallback": false,
+  "gssp": true,
+  "appGip": true,
+  "scriptLoader": []
+}

package/cypress/plugins/index.js

@@ -17,24 +17,35 @@
  */
 import fs from 'fs'
 import path from 'path'
-
+import { loadEnvConfig } from '@next/env'
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+  const projectDir = process.cwd()
+  loadEnvConfig(projectDir)
   const conf = config
 
-  const dirPath = config.integrationFolder==="./cypress/e2e" ? path.resolve('./cypress/e2e') : path.resolve('./cypress/visual')
+  const dirPath =
+    config.integrationFolder === './cypress/e2e'
+      ? path.resolve('./cypress/e2e')
+      : path.resolve('./cypress/visual')
   fs.readdir(dirPath, function (err, files) {
     if (err) {
-        return console.log('Unable to scan directory: ' + err);
-    } 
+      return console.log('Unable to scan directory: ' + err)
+    }
     //listing all files using forEach. For this script to work the folder must only contain folders with spec files
     files.forEach(function (file) {
-        conf.integrationFolder = `${dirPath}/${file}`
-    });
-return conf
-});
+      conf.integrationFolder = `${dirPath}/${file}`
+    })
+    return conf
+  })
+  const printVisualPath = path.resolve('./cypress/visual')
 
+  fs.readdir(printVisualPath, function (err, files) {
+    files.forEach(function (file) {
+      console.log(file, 'file logged')
+    })
+  })
   on('task', {
     log(message) {
       console.log(message)
@@ -43,7 +54,6 @@ return conf
     },
     table(message) {
       console.table(message)
-
       return null
     },
   })

package/cypress/support/commands.js

@@ -1,4 +1,5 @@
 //Note: Check periodically if these consent cookie values exprire
+import _ from 'lodash'
 const nuktSPConsentValue = 'JABCDEFGHI'
 const consentUUIDValue = 'ff8ac797-02c4-4fb4-81f2-22f8ba2e8723_8'
 
@@ -79,3 +80,24 @@ Cypress.Commands.add('getZuoraElement', (selector) => {
     .then(cy.wrap)
     .find(selector)
 })
+
+Cypress.Commands.add(
+  'visitAndOverrideNextData',
+  (url, originalObject, objToOverrideWith) => {
+    cy.visit(url, {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            _.set(o, `${originalObject}`, objToOverrideWith)
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+  }
+)

package/cypress/visual/account/print-visual-regression.spec.js

@@ -0,0 +1,17 @@
+import * as printSubscriptionPageProps from '../../fixtures/print-subscriptions/print-subscription-response.json'
+
+describe('Visual regression for print and digi_print subscriptions', () => {
+  it('should show sections for print user subscribtions', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    cy.visitAndOverrideNextData(
+      '/account/subscription-and-billing',
+      'props.pageProps.user.subscriptions',
+      printSubscriptionPageProps.props.pageProps.user.subscriptions
+    )
+
+    cy.eyesOpen()
+    cy.eyesCheckWindow('Subscription and Billing page for print subscriptions')
+    cy.eyesClose()
+  })
+})

package/cypress/visual/account/visual-regression.spec.js

@@ -18,6 +18,10 @@ const pages = [
     url: '/account/edit/commenting-notifications',
     pageName: 'Commenting Notifications form',
   },
+  {
+    url: '/account/edit/delivery-instructions',
+    name: 'delivery instructions form',
+  },
 ]
 
 describe('Visual regression', () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.85.6",
+  "version": "1.87.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -19,6 +19,7 @@
     "cy:run": "cypress run --config-file cypress/config/config.e2e.json -b chrome --headless",
     "cy:vis": "cypress run --config-file cypress/config/config.visual.json -b chrome --headless",
     "cy:open": "cypress open --config-file cypress/config/config.e2e.json -b chrome",
+    "cy:open:vis": "cypress open --config-file cypress/config/config.visual.json -b chrome",
     "test:e2e": "yarn cy:run",
     "test:e2e:ci": "cypress run --env -b chrome --headless",
     "start:test:server": "next build && next start",
@@ -35,13 +36,13 @@
     "@apollo/client": "3.4.16",
     "@newskit-render/api": "^0.37.1",
     "@newskit-render/auth": "^0.45.1",
-    "@newskit-render/checkout": "^0.54.6",
+    "@newskit-render/checkout": "^0.54.7-alpha.0",
     "@newskit-render/feature-flags": "^0.25.1",
     "@newskit-render/feed": "^0.27.1",
-    "@newskit-render/my-account": "^2.4.1",
-    "@newskit-render/shared-components": "^0.71.1",
-    "@newskit-render/standalone-components": "^0.35.1",
-    "@newskit-render/validation": "^0.52.1",
+    "@newskit-render/my-account": "^2.6.0-alpha.0",
+    "@newskit-render/shared-components": "^0.72.0-alpha.0",
+    "@newskit-render/standalone-components": "^0.35.2-alpha.0",
+    "@newskit-render/validation": "^0.53.0-alpha.0",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",
     "lodash.get": "4.4.2",

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

@@ -23,5 +23,10 @@ export default AccountSubscriptionAndBilling
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Subscription and Billing')
-  return getProviderProps({ ...context, provider: 'SubscriptionAndBilling' })
+  const result = await getProviderProps({
+    ...context,
+    provider: 'SubscriptionAndBilling',
+  })
+
+  return result
 }