@newskit-render/core 4.5.2 → 4.6.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.2](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@4.5.2-alpha.1...@newskit-render/core@4.5.2) (2023-05-02)
+
+**Note:** Version bump only for package @newskit-render/core
+
+
+
+
+
 ## [4.5.1](https://github.com/newscorp-ghfb/ncu-newskit-render/compare/@newskit-render/core@4.5.1-alpha.1...@newskit-render/core@4.5.1) (2023-04-27)
 
 **Note:** Version bump only for package @newskit-render/core

package/README.md

@@ -253,20 +253,20 @@ const AppContextProvider = ({ children }: { children: JSX.Element }) => {
 export { AppContextProvider, AppContext }
 ```
 
-### create-render-app effected comments
+### cra-effected comments
 
 You may see some lines of code that have comments next to them:
 
 ```
-code here // create-render-app effected
+code here /* cra-effected */
 ```
 
 Or around them:
 
 ```
-// start create-render-app effected
+/* start cra-effected */
 code here
-// end create-render-app effected
+/* end cra-effected */
 ```
 
 This comment denotes that the line or lines in between are effected by the running of the [@newskit-render/create-render-app package](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/create-render-app).

package/__tests__/pages/[articleSlug].test.tsx

@@ -97,13 +97,13 @@ jest.mock('newrelic', () => {
   }
 })
 
-// start create-render-app effected
+/* start cra-effected */
 jest.mock('@newskit-render/feature-flags', () => ({
   initAndGetFeatureFlag: jest
     .fn()
     .mockImplementation(() => Promise.resolve({ test: 'test' })),
 }))
-// end create-render-app effected
+/* end cra-effected */
 
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
@@ -147,7 +147,7 @@ describe('Article', () => {
           ...props,
           showAds: true,
           user,
-          featureFlags: { test: 'test' }, // create-render-app effected
+          featureFlags: { test: 'test' } /* cra-effected */,
         },
       })
       expect(setHeaderMock).toHaveBeenCalledWith(

package/__tests__/pages/home.test.tsx

@@ -25,13 +25,13 @@ jest.mock('cross-fetch', () =>
   )
 )
 
-// start create-render-app effected
+/* start cra-effected */
 jest.mock('@newskit-render/feature-flags', () => ({
   initAndGetFeatureFlag: jest
     .fn()
     .mockImplementation(() => Promise.resolve({ test: 'test' })),
 }))
-// end create-render-app effected
+/* end cra-effected */
 
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
@@ -90,7 +90,7 @@ describe('getServerSideProps', () => {
           },
           showAds: true,
           user,
-          featureFlags: { test: 'test' }, // create-render-app effected
+          featureFlags: { test: 'test' } /* cra-effected */,
         },
       })
     )

package/__tests__/pages/relatedArticles.test.tsx

@@ -34,13 +34,13 @@ jest.mock('cross-fetch', () =>
   )
 )
 
-// start create-render-app effected
+/* start cra-effected */
 jest.mock('@newskit-render/feature-flags', () => ({
   initAndGetFeatureFlag: jest
     .fn()
     .mockImplementation(() => Promise.resolve({ test: 'test' })),
 }))
-// end create-render-app effected
+/* end cra-effected */
 
 jest.mock('@newskit-render/api', () => ({
   ClientTypes: { nkapi: 'nkapi' },
@@ -74,7 +74,7 @@ describe('Article', () => {
           ...props,
           showAds: true,
           user,
-          featureFlags: { test: 'test' }, // create-render-app effected
+          featureFlags: { test: 'test' } /* cra-effected */,
         },
       })
       expect(setHeaderMock).toHaveBeenCalledWith(

package/components/AccountDropdown/AccountDropdown.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react'
+import { useRouter } from 'next/router'
+import fetch from 'cross-fetch'
+import { setCookie, deleteCookie } from './utils'
+import { options } from './accounts'
+
+export const AccountDropdown: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const router = useRouter()
+  const dropdownOpenHandler = (e) => {
+    if (e.code === 'NumpadSubtract' || e.code === 'Backquote') {
+      setIsOpen((currentState) => {
+        const updatedState = !currentState
+
+        return updatedState
+      })
+    }
+  }
+
+  const handleChange = async (e) => {
+    const result = await fetch('/api/account/get-session', {
+      method: 'post',
+      body: JSON.stringify({ option: e.target.value }),
+    })
+    const data = await result.json()
+
+    deleteCookie('acs_ngn', '/', null)
+    deleteCookie('acs_tnl', '/', null)
+    setCookie(
+      data.accountProviderCookieName,
+      data.value,
+      new Date(2032, 1, 1),
+      '/',
+      null,
+      true
+    )
+    router.reload()
+  }
+
+  useEffect(() => {
+    window.addEventListener('keyup', dropdownOpenHandler)
+    return () => window.removeEventListener('keyup', dropdownOpenHandler)
+  }, [])
+
+  return isOpen ? (
+    <select
+      onChange={handleChange}
+      data-testid="account-switcher"
+      style={{
+        position: 'fixed',
+        top: '3px',
+        right: '3px',
+        maxWidth: '150px',
+        zIndex: 3,
+      }}
+    >
+      <option>Select subscription</option>
+      {options.map((option) => (
+        <option key={option} value={option}>
+          {option}
+        </option>
+      ))}
+    </select>
+  ) : null
+}

package/components/AccountDropdown/__tests__/AcountDropdown.test.tsx

@@ -0,0 +1,83 @@
+import { fireEvent, waitFor } from '@testing-library/react'
+import { AccountDropdown, getAccounts } from '../'
+import { renderWithTheme } from '../../../helpers/test-utils'
+import { useRouter } from 'next/router'
+
+const useRouterMock = useRouter as jest.Mock
+
+jest.mock('next/router', () => {
+  return {
+    useRouter: jest.fn(),
+  }
+})
+
+jest.mock('cross-fetch', () =>
+  jest
+    .fn()
+    .mockImplementationOnce(() =>
+      Promise.resolve({
+        json: () => ({ accountProviderCookieName: 'test', value: 'test' }),
+      })
+    )
+    .mockImplementationOnce(() => {
+      throw new Error()
+    })
+)
+
+describe('AccountDropdown', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    useRouterMock.mockImplementation(() => {
+      return { reload: jest.fn() }
+    })
+  })
+
+  it('Should not render the dropdown unless it is toggled', () => {
+    const { queryByDisplayValue } = renderWithTheme(AccountDropdown)
+
+    const dropdown = queryByDisplayValue('Select subscription')
+
+    expect(dropdown).toBeFalsy()
+  })
+
+  it('Should render the dropdown when Backquote is pressed', () => {
+    const { container, getByDisplayValue } = renderWithTheme(AccountDropdown)
+
+    fireEvent.keyUp(container, { code: 'Backquote' })
+
+    expect(getByDisplayValue('Select subscription')).toBeTruthy()
+  })
+
+  it('Should render the dropdown when NumpadSubtract is pressed', () => {
+    const { container, getByDisplayValue } = renderWithTheme(AccountDropdown)
+
+    fireEvent.keyUp(container, { code: 'NumpadSubtract' })
+
+    expect(getByDisplayValue('Select subscription')).toBeTruthy()
+  })
+
+  it('Should select an account', async () => {
+    const { container, getByTestId } = renderWithTheme(AccountDropdown)
+
+    await waitFor(() => {
+      fireEvent.keyUp(container, { code: 'NumpadSubtract' })
+    })
+
+    await waitFor(() => {
+      fireEvent.change(getByTestId('account-switcher'), {
+        target: { value: 'Times voucher subscription credit card' },
+      })
+    })
+
+    expect(useRouterMock).toHaveBeenCalled()
+  })
+
+  it('Should return account object', () => {
+    const options = getAccounts('sun', 'times')
+    expect(options['Sun with subscription']).toEqual({
+      username: 'render-e2e-subscription@yopmail.com',
+      password: 'sun',
+      tenant: 'SUN',
+    })
+  })
+})

package/components/AccountDropdown/accounts.ts

@@ -0,0 +1,47 @@
+export const options = [
+  'Sun with subscription',
+  'Times voucher subscription credit card',
+  'Times voucher subscription direct debit',
+  'Times voucher subscription paypal',
+  'Time DTC print credit card',
+  'Time Digital subscription credit card',
+  'Time DigiPrint subscription credit card',
+]
+
+export const getAccounts = (sunPassword, timesPassword) => ({
+  'Sun with subscription': {
+    username: 'render-e2e-subscription@yopmail.com',
+    password: sunPassword,
+    tenant: 'SUN',
+  },
+  'Times voucher subscription credit card': {
+    username: 'cmp-test-card-20-09-2022@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Times voucher subscription direct debit': {
+    username: 'cmp-test-direct-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Times voucher subscription paypal': {
+    username: 'cmp-test-paypal-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Time DTC print credit card': {
+    username: 'cmp-dtc-card-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Time Digital subscription credit card': {
+    username: 'cmp-digi-card-20-09-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+  'Time DigiPrint subscription credit card': {
+    username: 'digi-print-card-15-11-22@yopmail.com',
+    password: timesPassword,
+    tenant: 'TIMES',
+  },
+})

package/components/AccountDropdown/index.tsx

@@ -0,0 +1,2 @@
+export * from './AccountDropdown'
+export * from './accounts'

package/components/AccountDropdown/utils.ts

@@ -0,0 +1,21 @@
+export const setCookie = (name, value, expires, path, domain, secure) => {
+  let cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value)
+
+  if (expires) {
+    cookie += '; expires=' + expires.toUTCString()
+  }
+
+  if (path) {
+    cookie += '; path=' + path
+  }
+
+  if (secure) {
+    cookie += '; secure'
+  }
+
+  document.cookie = cookie
+}
+
+export const deleteCookie = (name, path, domain) => {
+  setCookie(name, '', new Date(0), path, domain, false)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "4.5.2",
+  "version": "4.6.0-alpha.0",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -41,13 +41,13 @@
     "@emotion/styled": "11.9.3",
     "@newskit-render/api": "^1.6.8",
     "@newskit-render/auth": "^1.3.11",
-    "@newskit-render/checkout": "^3.2.0",
+    "@newskit-render/checkout": "^3.2.1-alpha.0",
     "@newskit-render/feature-flags": "^1.4.11",
     "@newskit-render/feed": "^1.4.18",
-    "@newskit-render/my-account": "^6.6.0",
-    "@newskit-render/shared-components": "^3.7.0",
-    "@newskit-render/standalone-components": "^3.7.0",
-    "@newskit-render/validation": "^1.6.1",
+    "@newskit-render/my-account": "^6.6.1-alpha.0",
+    "@newskit-render/shared-components": "^3.7.1-alpha.0",
+    "@newskit-render/standalone-components": "^3.7.1-alpha.0",
+    "@newskit-render/validation": "^1.7.0-alpha.0",
     "@next/font": "13.1.6",
     "cross-fetch": "3.1.5",
     "graphql": "16.6.0",

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -9,7 +9,7 @@ import {
 import { UserData } from '@newskit-render/my-account'
 import { ArticleRecommendationsProvider } from '@newskit-render/standalone-components'
 import { getHost } from '@newskit-render/shared-components'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { fetchUser } from '../../../helpers/getUser'
@@ -20,7 +20,7 @@ import {
   gscId as configGscId,
   newskitApiEnvUrl,
   newskitApiXApiKey,
-  optimizelysdkKey, // create-render-app effected
+  optimizelysdkKey /* cra-effected */,
 } from '../../../config'
 
 export type ArticleSlug = {
@@ -77,7 +77,9 @@ export async function getServerSideProps(context) {
     }),
     await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
   ])
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
 
   addCacheHeaders(context.res)
   return {
@@ -94,7 +96,7 @@ export async function getServerSideProps(context) {
         newskitApiEnvUrl,
         newskitApiXApiKey,
       },
-      featureFlags, // create-render-app effected
+      featureFlags /* cra-effected */,
     },
   }
 }

package/pages/[section]/[articleId]/relatedArticles.tsx

@@ -8,7 +8,7 @@ import {
 import { getHost } from '@newskit-render/shared-components'
 import { Block, Cell, TitleBar } from 'newskit'
 import { UserData } from '@newskit-render/my-account'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { fetchUser } from '../../../helpers/getUser'
 import { getAccountQueryUrl } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
@@ -16,7 +16,7 @@ import Layout from '../../../components/layout'
 import {
   newskitApiEnvUrl,
   newskitApiXApiKey,
-  optimizelysdkKey, // create-render-app effected
+  optimizelysdkKey /* cra-effected */,
 } from '../../../config'
 
 export type RelatedArticles = {
@@ -79,7 +79,9 @@ export async function getServerSideProps(context) {
   const [user] = await Promise.all([
     await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
   ])
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
 
   addCacheHeaders(context.res)
 
@@ -92,7 +94,7 @@ export async function getServerSideProps(context) {
         newskitApiEnvUrl,
         newskitApiXApiKey,
       },
-      featureFlags, // create-render-app effected
+      featureFlags /* cra-effected */,
     },
   }
 }

package/pages/[section]/index.tsx

@@ -5,8 +5,8 @@ import {
   ClientTypes,
 } from '@newskit-render/api'
 import { getHost } from '@newskit-render/shared-components'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../config' /* cra-effected */
 import { GET_PAGE } from '../../queries'
 import SectionPage from '../../components/section'
 import { fetchUser } from '../../helpers/getUser'
@@ -46,7 +46,9 @@ export async function getServerSideProps(context) {
       notFound: true,
     }
   }
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
 
   addCacheHeaders(context.res)
   return {
@@ -55,7 +57,7 @@ export async function getServerSideProps(context) {
       isIndexPage: true,
       showAds: true,
       user,
-      featureFlags, // create-render-app effected
+      featureFlags /* cra-effected */,
     },
   }
 }

package/pages/account/cancellation/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
 import validation from '../../../validation'
 
 const AccountCancellation = (props) => (
@@ -13,9 +13,11 @@ export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Cancellation')
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
   return getProviderProps(
     { ...context, provider: 'Cancellation' },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 }

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

@@ -6,8 +6,8 @@ import {
   NotFound,
   editComponentMap,
 } from '@newskit-render/my-account'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
 import validation from '../../../validation'
 
 const AccountEditField = (props) => {
@@ -36,9 +36,11 @@ export const getServerSideProps = async (context) => {
     // Logging the error for being captured by New Relic
     console.error(`An error ${context.res.statusCode} occurred on server`)
   }
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
   return getProviderProps(
     { ...context, provider: 'EditField' },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 }

package/pages/account/holiday-stop/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { getProviderProps, HolidayStop } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
 const AccountHolidayStop = (props) => <HolidayStop {...props} />
 
@@ -10,9 +10,11 @@ export default AccountHolidayStop
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Book a Holiday Stop')
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
   return getProviderProps(
     { ...context, provider: 'HolidayStop' },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 }

package/pages/account/index.tsx

@@ -1,18 +1,30 @@
 import React from 'react'
 import newrelic from 'newrelic'
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../config' /* cra-effected */
+import { AccountDropdown } from '../../components/AccountDropdown' /* cra-disabled */
 
-const AccountPersonalDetails = (props) => <PersonalDetails {...props} />
+const AccountPersonalDetails = (props) => (
+  <>
+    {
+      /* start cra-disabled */
+      <AccountDropdown />
+      /* end cra-disabled */
+    }
+    <PersonalDetails {...props} />
+  </>
+)
 
 export default AccountPersonalDetails
 
 export const getServerSideProps = async (context) => {
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
   newrelic.setTransactionName('Account: Personal details')
   return getProviderProps(
     { ...context, provider: 'PersonalDetails' },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 }

package/pages/account/newsletters-and-alerts/index.tsx

@@ -4,8 +4,8 @@ import {
   getProviderProps,
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
 const AccountNewslettersAndAlerts = (props) => (
   <NewslettersAndAlerts {...props} />
@@ -15,9 +15,11 @@ export default AccountNewslettersAndAlerts
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Newsletters and Alerts')
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
   return getProviderProps(
     { ...context, provider: 'NewslettersAndAlerts' },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 }

package/pages/account/payment/index.tsx

@@ -5,8 +5,8 @@ import {
   getProviderProps,
   PaymentProvider,
 } from '@newskit-render/my-account'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
 const AccountCancellation = (props) => <Payment {...props} />
 
@@ -14,7 +14,9 @@ export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Edit Payment method')
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
 
   return getProviderProps(
     {
@@ -22,6 +24,6 @@ export const getServerSideProps = async (context) => {
       provider: 'Payment',
       paymentProvider: PaymentProvider.Zuora,
     },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 }

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

@@ -4,8 +4,8 @@ import {
   getProviderProps,
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
-import { optimizelysdkKey } from '../../../config' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
+import { optimizelysdkKey } from '../../../config' /* cra-effected */
 
 const AccountSubscriptionAndBilling = (props) => (
   <SubscriptionAndBilling {...props} />
@@ -15,13 +15,15 @@ export default AccountSubscriptionAndBilling
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Subscription and Billing')
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
   const result = await getProviderProps(
     {
       ...context,
       provider: 'SubscriptionAndBilling',
     },
-    { featureFlags } // create-render-app effected
+    { featureFlags } /* cra-effected */
   )
 
   return result

package/pages/api/account/get-session/index.ts

@@ -2,6 +2,7 @@ import { fetchSessionCookie } from '@newskit-render/api'
 import { safeJsonParse } from '@newskit-render/shared-components'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { acsSessionUrlTimes, acsSessionUrlSun } from '../../../../config'
+import { getAccounts } from '../../../../components/AccountDropdown'
 
 const tenantMap = {
   SUN: acsSessionUrlSun,
@@ -9,14 +10,24 @@ const tenantMap = {
 }
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const { username, password, tenant } = safeJsonParse(req.body)
-  const tenantUrl = tenantMap[tenant]
+  if (process.env.TM_ACCOUNTS_PASSWORD && process.env.NGN_ACCOUNTS_PASSWORD) {
+    const options = getAccounts(
+      process.env.NGN_ACCOUNTS_PASSWORD,
+      process.env.TM_ACCOUNTS_PASSWORD
+    )
+    const { option } = safeJsonParse(req.body)
+    const { username, password, tenant } = options[option]
 
-  const result = await fetchSessionCookie({
-    username,
-    password,
-    tenantUrl,
-  })
-  res.send(result)
+    const tenantUrl = tenantMap[tenant]
+
+    const result = await fetchSessionCookie({
+      username,
+      password,
+      tenantUrl,
+    })
+    res.send(result)
+  } else {
+    res.end()
+  }
 }
 export default handler

package/pages/index.tsx

@@ -4,9 +4,9 @@ import {
   getAcsCookie,
   ClientTypes,
 } from '@newskit-render/api'
-import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' // create-render-app effected
+import { initAndGetFeatureFlag } from '@newskit-render/feature-flags' /* cra-effected */
 import { getHost } from '@newskit-render/shared-components'
-import { optimizelysdkKey } from '../config' // create-render-app effected
+import { optimizelysdkKey } from '../config' /* cra-effected */
 import { GET_PAGE } from '../queries'
 import SectionPage from '../components/section'
 import { fetchUser } from '../helpers/getUser'
@@ -34,7 +34,9 @@ export async function getServerSideProps(context) {
     }),
     await fetchUser(acsCookie, getAccountQueryUrl(siteHost)),
   ])
-  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey) // create-render-app effected
+  /* start cra-effected */
+  const featureFlags = await initAndGetFeatureFlag(optimizelysdkKey)
+  /* end cra-effected */
 
   addCacheHeaders(context.res)
   const { page } = data
@@ -43,7 +45,7 @@ export async function getServerSideProps(context) {
       page,
       showAds: true,
       user,
-      featureFlags, // create-render-app effected
+      featureFlags /* cra-effected */,
     },
   }
 }