@newskit-render/core 4.8.0-alpha.1 → 4.8.0-alpha.3

package/README.md

@@ -258,14 +258,14 @@ export { AppContextProvider, AppContext }
 You may see some lines of code that have comments next to them:
 
 ```
-code here /* cra-effected */
+code here. /* cra-effected */
 ```
 
 Or around them:
 
 ```
 /* start cra-effected */
-code here
+code here.
 /* end cra-effected */
 ```
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "4.8.0-alpha.1",
+  "version": "4.8.0-alpha.3",
   "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 */
   )