@newskit-render/core 4.8.0-alpha.0 → 4.8.0-alpha.2

package/context/app-context/paymentMethodContext.tsx

@@ -18,7 +18,7 @@ export const paymentMethodContext = {
   items: [
     {
       label: 'Debit/Credit Card',
-      href: '[baseURL]/payment',
+      href: '[baseURL]/payment/credit-card',
       default: 'Debit/Credit Card',
       labelIcon: {
         Icon: IconCreditCard,
@@ -33,7 +33,7 @@ export const paymentMethodContext = {
     },
     {
       label: 'Direct Debit',
-      href: '[baseURL]/payment-direct-debit',
+      href: '[baseURL]/payment/direct-debit',
       default: 'Direct Debit',
       labelIcon: {
         Icon: IconDirectDebit,

package/cypress/e2e/account/payment-page.cy.js

@@ -6,15 +6,54 @@ describe('My account Payment methods page', () => {
 
   it('should show payment options', () => {
     cy.get('[data-testid="content-list-item-0"]')
-      .should('have.attr', 'href', '/account/payment')
+      .should('have.attr', 'href', '/account/payment/credit-card')
       .contains('Debit/Credit Card')
 
     cy.get('[data-testid="content-list-item-1"]')
-      .should('have.attr', 'href', '/account/payment-direct-debit')
+      .should('have.attr', 'href', '/account/payment/direct-debit')
       .contains('Direct Debit')
   })
 })
 
+describe('My account credit card payment method page', () => {
+  beforeEach(() => {
+    cy.mockConsentAndVisit('/account/payment/credit-card')
+  })
+
+  it('should load the zuora iFrame', () => {
+    cy.get('iframe').should('exist')
+  })
+  it('should show the credit card payment page title', () => {
+    cy.get('[data-testid="introduction-title"]').contains('Debit/Credit Card')
+  })
+})
+describe('My account direct debit payment method page', () => {
+  beforeEach(() => {
+    cy.mockConsentAndVisit('/account/payment/direct-debit')
+  })
+
+  it('should load the zuora iFrame', () => {
+    cy.get('iframe').should('exist')
+  })
+  it('should show the credit card payment page title', () => {
+    cy.get('[data-testid="introduction-title"]').contains(
+      'Set up a Direct Debit'
+    )
+  })
+})
+describe('My account /payment when used without payment method', () => {
+  beforeEach(() => {
+    cy.mockConsentAndVisit('/account/payment')
+  })
+  it('should load the Zuora iframe', () => {
+    cy.get('iframe').should('exist')
+  })
+  it('should show the generic payment page - the Zuora credit card iframe', () => {
+    cy.get('[data-testid="introduction-title"]').contains(
+      'Edit your payment method'
+    )
+  })
+})
 // describe('My account Payment page', () => {
 //   beforeEach(() => {
 //     cy.mockConsentAndVisit('/account/payment')

package/cypress.config.ts

@@ -32,8 +32,6 @@ export default defineConfig({
       return config
     },
     baseUrl: 'http://localhost:3000',
-    video: false,
-    screenshotOnRunFailure: false,
     specPattern: './cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
     excludeSpecPattern: './cypress/e2e/checkout/*.cy.{js,jsx,ts,tsx}',
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "4.8.0-alpha.0",
+  "version": "4.8.0-alpha.2",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -41,12 +41,12 @@
     "@emotion/styled": "11.9.3",
     "@newskit-render/api": "^1.6.8",
     "@newskit-render/auth": "^1.4.0",
-    "@newskit-render/checkout": "^3.3.4-alpha.0",
+    "@newskit-render/checkout": "^3.3.4-alpha.1",
     "@newskit-render/feature-flags": "^1.4.11",
     "@newskit-render/feed": "^1.5.0",
-    "@newskit-render/my-account": "^6.10.0-alpha.0",
-    "@newskit-render/shared-components": "^3.13.0-alpha.0",
-    "@newskit-render/standalone-components": "^3.10.2-alpha.0",
+    "@newskit-render/my-account": "^6.10.0-alpha.1",
+    "@newskit-render/shared-components": "^3.13.0-alpha.1",
+    "@newskit-render/standalone-components": "^3.10.2-alpha.1",
     "@newskit-render/validation": "^1.8.1",
     "@next/font": "13.1.6",
     "cross-fetch": "3.1.5",

package/pages/account/add/[field].tsx

@@ -1,18 +1,18 @@
 import React from 'react'
 import newrelic from 'newrelic'
-import { AddField, NotFound, addComponentMap } from '@newskit-render/my-account'
+import { AddField, addComponentMap } from '@newskit-render/my-account'
 import validation from '../../../validation'
+import { DynamicPage } from '@newskit-render/my-account'
 
-const AccountAddField = (props) => {
-  const doesAddPageExist = Object.keys(addComponentMap).includes(
-    props.data.type
-  )
-
-  if (doesAddPageExist) {
-    return <AddField {...props} validation={validation} />
-  }
-  return <NotFound />
-}
+const AccountAddField = (props) => (
+  <DynamicPage
+    objectMap={addComponentMap}
+    pageName={props.data.type}
+    Component={AddField}
+    componentProps={props}
+    validation={validation}
+  />
+)
 
 export default AccountAddField
 export const getServerSideProps = async (context) => {

package/pages/account/edit/[field].tsx

@@ -3,23 +3,22 @@ import newrelic from 'newrelic'
 import {
   EditField,
   getProviderProps,
-  NotFound,
   editComponentMap,
+  DynamicPage,
 } from '@newskit-render/my-account'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
 import validation from '../../../validation'
 
-const AccountEditField = (props) => {
-  const doesEditPageExist = Object.keys(editComponentMap).includes(
-    props.data.type
-  )
-
-  if (doesEditPageExist) {
-    return <EditField {...props} validation={validation} />
-  }
-  return <NotFound />
-}
+const AccountEditField = (props) => (
+  <DynamicPage
+    objectMap={editComponentMap}
+    pageName={props.data.type}
+    Component={EditField}
+    componentProps={props}
+    validation={validation}
+  />
+)
 
 export default AccountEditField
 

package/pages/account/payment/[paymentMethod].tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import newrelic from 'newrelic'
+import {
+  getProviderProps,
+  Payment,
+  paymentMethodsMap,
+  DynamicPage,
+} from '@newskit-render/my-account'
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
+
+const PaymentPage = (props) => {
+  return (
+    <DynamicPage
+      objectMap={paymentMethodsMap}
+      pageName={props.paymentType}
+      Component={Payment}
+      componentProps={props}
+    />
+  )
+}
+
+export default PaymentPage
+
+export const getServerSideProps = async (context) => {
+  newrelic.setTransactionName('Payment method')
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
+
+  return getProviderProps(
+    {
+      ...context,
+      provider: 'Payment',
+    },
+    { featureFlags } /* cra-effected */
+  )
+}

package/pages/account/payment/index.tsx

@@ -1,16 +1,12 @@
 import React from 'react'
 import newrelic from 'newrelic'
-import {
-  Payment,
-  getProviderProps,
-  PaymentProvider,
-} from '@newskit-render/my-account'
+import { Payment, getProviderProps } from '@newskit-render/my-account'
 import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
-const AccountCancellation = (props) => <Payment {...props} />
+const AccountPayment = (props) => <Payment {...props} />
 
-export default AccountCancellation
+export default AccountPayment
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Edit Payment method')
@@ -22,7 +18,6 @@ export const getServerSideProps = async (context) => {
     {
       ...context,
       provider: 'Payment',
-      paymentProvider: PaymentProvider.Zuora,
     },
     { featureFlags } /* cra-effected */
   )

package/gitignore

@@ -1,39 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-/cypress/videos
-/cypress/screenshots
-/__pacts__/logs
-/__pacts__/pacts
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-newrelic_agent.log
-
-# local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# vercel
-.vercel