@newskit-render/core 0.0.0-d55b7d88

package/context/multi-tenancy/MultiTenancy.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+// eslint-disable-next-line react/no-deprecated
+import { render } from 'react-dom'
+import { timesTheme } from '@newskit-render/shared-components'
+import { Publisher } from '@newskit-render/api'
+import { AppContext, AppContextProvider } from '../app-context'
+import MultiTenancyProvider, { useMultiTenancy } from '.'
+
+const container = document.createElement('div')
+document.body.appendChild(container)
+
+const TestComponent = ({ mockFunction }) => {
+  const accountData = useMultiTenancy()
+  mockFunction(accountData)
+  return null
+}
+
+describe('Multi-Tenancy context', () => {
+  it('should select the correct theme based on the tenant', () => {
+    render(
+      <MultiTenancyProvider tenant={Publisher.TIMES}>
+        <AppContextProvider>
+          <AppContext.Consumer>
+            {({ theme }) => <div>{JSON.stringify(theme)}</div>}
+          </AppContext.Consumer>
+        </AppContextProvider>
+      </MultiTenancyProvider>,
+      container
+    )
+
+    expect(container.textContent).toBe(JSON.stringify(timesTheme))
+  })
+
+  it('should receive proper context', () => {
+    const mockFunction = jest.fn()
+    render(
+      <MultiTenancyProvider tenant={Publisher.DEMO}>
+        <TestComponent mockFunction={mockFunction} />
+      </MultiTenancyProvider>,
+      container
+    )
+
+    expect(mockFunction).toHaveBeenCalledWith({
+      tenant: Publisher.DEMO,
+      getTenantString: expect.any(Function),
+    })
+  })
+})

package/context/multi-tenancy/index.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from 'react'
+import get from 'lodash.get'
+import { Publisher } from '@newskit-render/api'
+import { translationsMap } from '../../config'
+
+export interface MultiTenancyContextProps {
+  children?: React.ReactNode
+  tenant?: Publisher
+  getTenantString?: (key: string, defaultValue?: string) => string
+}
+
+const MultiTenancyContext = createContext<MultiTenancyContextProps>({})
+
+const MultiTenancyProvider: React.FC<MultiTenancyContextProps> = ({
+  tenant,
+  children,
+}) => (
+  <MultiTenancyContext.Provider
+    value={{
+      tenant,
+      getTenantString: (key: string, defaultValue: string = ''): string => {
+        const data = translationsMap[tenant]
+        return get(data, key, defaultValue)
+      },
+    }}
+  >
+    {children}
+  </MultiTenancyContext.Provider>
+)
+
+export const useMultiTenancy = () => useContext(MultiTenancyContext)
+export default MultiTenancyProvider

package/css/index.ts

@@ -0,0 +1,15 @@
+import { css } from 'newskit'
+
+export const GlobalStyling = css`
+  html,
+  body {
+    padding: 0;
+    margin: 0;
+    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, Segoe UI,
+      Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+      sans-serif;
+  }
+  * {
+    box-sizing: border-box;
+  }
+`

package/cypress/axe/terminal-log.js

@@ -0,0 +1,19 @@
+export const terminalLog = (violations) => {
+  cy.task(
+    'log',
+    `${violations.length} accessibility violation${
+      violations.length === 1 ? '' : 's'
+    } ${violations.length === 1 ? 'was' : 'were'} detected`
+  )
+  // pluck specific keys to keep the table readable
+  const violationData = violations.map(
+    ({ id, impact, description, nodes }) => ({
+      id,
+      impact,
+      description,
+      nodes: nodes.length,
+    })
+  )
+
+  cy.task('table', violationData)
+}

package/cypress/config/visual.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    defaultCommandTimeout: 20000,
+    baseUrl: 'http://localhost:3000',
+    video: false,
+    screenshotOnRunFailure: false,
+    specPattern: './cypress/visual/**/*.cy.{js,jsx,ts,tsx}',
+  },
+})

package/cypress/config/visual.skip.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: null,
+    video: false,
+    screenshotOnRunFailure: false,
+    specPattern: './cypress/visual/empty/**/*.cy.{js,jsx,ts,tsx}',
+  },
+})

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

@@ -0,0 +1,88 @@
+import { terminalLog } from '../../axe/terminal-log'
+
+const pages = [
+  { url: '/account', name: 'Personal Details' },
+  { url: '/account/edit/name', name: 'Name form' },
+  { url: '/account/edit/displayName', name: 'Display Name form' },
+  { url: '/account/edit/email', name: 'Email form' },
+  { url: '/account/edit/password', name: 'Password form' },
+  { url: '/account/edit/mobile', name: 'Mobile phone form' },
+  { url: '/account/edit/landline', name: 'Landline phone form' },
+  {
+    url: '/account/edit/address',
+    name: 'Address form',
+  },
+  {
+    url: '/account/subscription-and-billing',
+    name: 'Subscription and Billing',
+  },
+  // TODO: Urgerntly find the reason why this state is failing! Uncomment immediately after that
+  // {
+  //   url: '/account/payment',
+  //   name: 'Payment form',
+  //   skip: { skipFailures: true },
+  // error being caused by Stripe, ignore at this time
+  // },
+  {
+    url: '/account/newsletters-and-alerts',
+    name: 'Newsletters and Alerts',
+  },
+  {
+    url: '/account/edit/commenting-notifications',
+    name: 'Commenting Notifications form',
+  },
+  {
+    url: '/account/edit/delivery-instructions',
+    name: 'Delivery Instructions form',
+  },
+  {
+    url: '/account/holiday-stop',
+    name: 'Holiday Stops',
+  },
+]
+
+describe('Page accessibility', () => {
+  pages.forEach(({ url, name, skip }) => {
+    it(`Should pass a11y tests: ${name}`, () => {
+      cy.mockConsentAndVisit(url)
+      const isAddressForm = name === 'Address form'
+      if (isAddressForm) {
+        cy.get('[data-testid="full-address"]').should('be.visible')
+      }
+      cy.injectAxe()
+      if (isAddressForm) {
+        cy.configureAxe({
+          rules: [
+            {
+              id: 'autocomplete-valid',
+              enabled: false,
+            },
+          ],
+        })
+      }
+      cy.checkA11y(
+        {
+          exclude: ['meta[name="viewport"]'],
+        },
+        null,
+        terminalLog,
+        skip
+      )
+    })
+  })
+})
+
+describe('SkipToContent', () => {
+  beforeEach(() => {
+    cy.GetAcsSession()
+    cy.mockConsentAndVisit('/account')
+  })
+
+  it('should take the user to the beginning of the main area', () => {
+    cy.get('[data-testid="skip-to-content"]').as('skiptocontentBtn')
+    cy.get('@skiptocontentBtn').focus()
+    cy.get('@skiptocontentBtn').should('contain', 'Skip to main content')
+    cy.get('@skiptocontentBtn').click()
+    cy.focused().should('have.id', 'main')
+  })
+})

package/cypress/e2e/account/banners.cy.js

@@ -0,0 +1,169 @@
+import {
+  paymentFailureFirstNotice,
+  paymentFailureSecondNotice,
+  paymentFailureTerminatedNotice,
+  serviceCancellationDate,
+} from '../../fixtures/paymentFailure'
+
+describe('Banners', () => {
+  it('Should show first notice', () => {
+    cy.GetTnlAcsSession('tnl')
+    cy.mockConsent()
+    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(
+      'You may need to update your payment details to keep your subscription.'
+    )
+    cy.get('[data-testid="buttonLink"]').should('be.visible')
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
+    cy.contains('Update payment details')
+  })
+
+  it('Should show second notice', () => {
+    cy.GetTnlAcsSession('tnl')
+    cy.mockConsent()
+    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(
+      '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.get('[data-testid="banner-close-button"]').should('be.visible')
+    cy.contains('Update payment details')
+  })
+
+  it('Should show terminated notice', () => {
+    cy.GetTnlAcsSession('tnl')
+    cy.mockConsent()
+    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(
+      'We didn’t receive payment for your subscription. To reactivate it, please call XXXX-XXX-XXXX. Or click here.'
+    )
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
+  })
+
+  it('Should show to be cancelled notice', () => {
+    cy.GetTnlAcsSession('tnl')
+    cy.mockConsent()
+    cy.visitAndOverrideNextData(
+      '/account',
+      'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+      serviceCancellationDate
+    )
+
+    cy.get('[data-testid="past-due-banner"]').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 ${new Date(
+        serviceCancellationDate
+      ).getDate()}/${
+        new Date(serviceCancellationDate).getMonth() + 1
+      }/${new Date(
+        serviceCancellationDate
+      ).getFullYear()}. To re-activate your subscription call XXXX-XXX-XXXX.`
+    )
+    cy.get('[data-testid="banner-close-button"]').should('be.visible')
+  })
+
+  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
+          },
+        })
+      },
+    })
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      return false
+    })
+
+    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 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 not show banner once it has been dismissed', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    const date = new Date(Date.now() + 20 * 30 * 3600 * 1000)
+
+    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.').should('exist')
+    cy.get('[data-testid="banner-close-button"]').filter(':visible').click()
+    cy.reload()
+    cy.get('[data-testid="past-due-banner"]').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.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(
+        'cancelledBanner',
+        new Date(new Date().setDate(new Date().getDate() - 7)).toDateString()
+      )
+    })
+    cy.reload()
+    cy.get('[data-testid="past-due-banner"]').should('not.exist')
+    cy.clearLocalStorage()
+  })
+})

package/cypress/e2e/account/cancellation.cy.js

@@ -0,0 +1,219 @@
+import { paymentFailure } from '../../fixtures/paymentFailure'
+
+import { serviceCancellationDate } from '../../fixtures/paymentFailure'
+
+describe('Cancellation page', () => {
+  describe('Find a better name', () => {
+    beforeEach(() => {
+      cy.GetTnlAcsSession('digitalCard')
+      cy.mockConsentAndVisit('/account/cancellation')
+    })
+
+    it('Should show user cancellation reasons', () => {
+      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.contains('Select one option from the list below.')
+
+      cy.contains(
+        'label',
+        'I only subscribed to read a specific article/redeem an offer'
+      )
+      cy.contains(
+        'label',
+        'I cannot justify paying for my current subscription'
+      )
+      cy.contains(
+        'label',
+        'I do not have enough time to read the edition everyday'
+      )
+      cy.contains('label', 'I prefer another news subscription service')
+      cy.contains('label', 'I do not enjoy the journalism')
+      cy.contains('label', 'I am travelling or moving abroad')
+      cy.contains('label', 'Other')
+      cy.contains('label', 'Prefer not to say')
+
+      cy.contains('[data-testid="primary-button"]', 'Continue cancellation')
+      cy.contains('[data-testid="secondary-button"]', 'Keep subscription')
+
+      //Redirects to Subscription and Billing page
+      cy.get('[data-testid="secondary-button"]').click()
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/account/subscription-and-billing')
+      })
+    })
+    it('Should show user text field when selecting Other as option', () => {
+      cy.contains('Select one option from the list below.')
+      cy.get('[type="radio"]').check('Other')
+      cy.contains('(please state)')
+
+      cy.get('textarea[name="other"]').clear()
+      cy.get('textarea[name="other"]').type('Thanks my business') //There is no validation for the text area
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains('Are you sure you want to cancel your subscription?')
+      cy.contains('Cancel subscription')
+    })
+    it('Should cancel user subscription', () => {
+      cy.contains('Select one option from the list below.')
+      cy.contains(
+        'I only subscribed to read a specific article/redeem an offer'
+      ).click()
+      cy.get('[data-testid="primary-button"]').click()
+
+      //Cancelation confirmation modal
+      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('Please note:')
+      cy.contains(
+        'Your subscription full access will be revoked by the end of your current bill cycle.'
+      )
+      cy.contains('Cancel subscription')
+      cy.contains('Keep subscription')
+
+      cy.intercept('POST', '/api/account/mutate', {
+        statusCode: 200,
+        body: { data: { cancelSubscription: { success: true } } },
+      })
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        'Cancelling your subscription'
+      )
+
+      // Post-cancellation modal
+      cy.get('[data-testid="dialog-content"]').should('be.visible')
+      cy.contains('Subscription cancelled')
+      cy.contains(
+        'Sorry to see you go, cancellation will be effective immediately and any current subscription benefits will be removed from your account.'
+      )
+      cy.contains(
+        'If you change your mind or cancelled by mistake, speak to one of our advisors on XXXX-XXX-XXXX.'
+      )
+      cy.contains('Back to account')
+
+      cy.get('[data-testid="centered-button"]').click()
+
+      cy.location().should((loc) => {
+        expect(loc.pathname).to.eq('/account/subscription-and-billing')
+      })
+
+      cy.visitAndOverrideNextData(
+        '/account/subscription-and-billing',
+        'props.pageProps.user.subscriptions[0].serviceCancellationDate',
+        serviceCancellationDate
+      )
+
+      cy.get('[data-testid="inline-message"]').contains(
+        'Your subscription will end soon'
+      )
+      cy.get('[data-testid="inline-message"]').contains(
+        'If you change your mind or cancelled by mistake, speak to one of our advisors on XXXX-XXX-XXXX.'
+      )
+      cy.get('a[href="/account/cancellation"]').should('not.exist')
+    })
+    it('Should show validation error messages when user tries to cancell subscription without selecting a cancellation reason', () => {
+      cy.contains('Select one option from the list below.')
+      cy.get('[data-testid="primary-button"]').click()
+      cy.contains('Please, select one option')
+    })
+    it('Should select only one cancellation reason', () => {
+      cy.contains('Select one option from the list below.')
+
+      cy.contains(
+        'I only subscribed to read a specific article/redeem an offer'
+      ).click()
+
+      cy.get(
+        'input[value="I only subscribed to read a specific article/redeem an offer"]'
+      ).should('be.checked')
+      cy.get(
+        'input[value="I cannot justify paying for my current subscription"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I do not have enough time to read the edition everyday"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I prefer another news subscription service"]'
+      ).should('not.be.checked')
+      cy.get('input[value="I do not enjoy the journalism"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="I am travelling or moving abroad"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="Other"]').should('not.be.checked')
+      cy.get('input[value="Prefer not to say"]').should('not.be.checked')
+
+      cy.contains('I prefer another news subscription service').click()
+
+      cy.get(
+        'input[value="I only subscribed to read a specific article/redeem an offer"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I cannot justify paying for my current subscription"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I do not have enough time to read the edition everyday"]'
+      ).should('not.be.checked')
+      cy.get(
+        'input[value="I prefer another news subscription service"]'
+      ).should('be.checked')
+      cy.get('input[value="I do not enjoy the journalism"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="I am travelling or moving abroad"]').should(
+        'not.be.checked'
+      )
+      cy.get('input[value="Other"]').should('not.be.checked')
+      cy.get('input[value="Prefer not to say"]').should('not.be.checked')
+    })
+    it('Should show error toast when canceling subscription if internal server error occures', () => {
+      cy.intercept('POST', '/api/account/mutate', { statusCode: 500 })
+
+      cy.contains('Select one option from the list below.')
+      cy.contains('I am travelling or moving abroad').click()
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        'You will lose unlimited access to exclusive content and benefits.'
+      )
+      cy.get('[data-testid="primary-button"]').click()
+
+      cy.contains(
+        '[data-testid="toast-container"]',
+        "Sorry, we're unable to save your cancellation right now. Please try again or come back later."
+      )
+    })
+  })
+
+  it('Should show outstanding payment modal for user in payment failure', () => {
+    cy.GetTnlAcsSession('digitalCard')
+    cy.mockConsent()
+    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')
+    cy.contains(
+      'If you wish to cancel your subscription update your payment details or speak to one of our advisors on XXXX-XXX-XXXX.'
+    )
+    cy.contains('Update payment details')
+
+    cy.get('[data-testid="centered-button"]').click()
+
+    cy.location().should((loc) => {
+      expect(loc.pathname).to.eq('/account/payment')
+    })
+    cy.contains('Edit your payment method')
+  })
+})