@newskit-render/my-account 3.22.2 → 3.22.3-alpha.0

package/README.md

@@ -2,11 +2,11 @@
 
 ## Getting Started
 
-There are two ways to start with @newskit-render/my-account:
+There are two ways to start with `@newskit-render/my-account`:
 
-1. If you want to build a project from scratch, that will have everything from newskit-render, you need to run `create-render-app` (See [Newskit-Render Getting started](https://github.com/newscorp-ghfb/ncu-newskit-render#getting-started)).
+**1.** If you want to build a project from scratch, that will have everything from Newskit Solutions, you need to run `create-render-app` (See [Newskit-Solutions Getting started](https://github.com/newscorp-ghfb/ncu-newskit-render#getting-started)).
 
-2. If you already have a next application and you want to include my-account package you just need to run `yarn add @newskit-render/my-account` or `npm install @newskit-render/my-account` based on which package manager you use. Next you need to create an account folder inside your pages folder, and you can add your account pages there:
+**2.** If you already have a next application and you want to include my-account package you just need to run `yarn add @newskit-render/my-account` or `npm install @newskit-render/my-account` based on which package manager you use. Next you need to create an account folder inside your pages folder, and you can add your account pages there:
 
 ```
 import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
@@ -18,22 +18,19 @@ export const getServerSideProps = async (context) =>
 
 ```
 
-## Authentication
+### **Authentication**
 
-If you have already included my account into your application, you will be able to see account pages, but they won't be populated with any data. That's because my-account needs environment variables in order to connect with MAIN.
-
-We assume that you already have created CPS (formerly MAIN) tenant for your title (If not, please check [setup new CPS tenant](https://nidigitalsolutions.jira.com/wiki/spaces/DPIAM/pages/3150938434/Setup+Full+New+Tenant)). Please ask a member of your team for the values of the environment variables.
+If you have already included my account into your application, you will be able to see account pages, but they won't be populated with any data. That's because my-account needs the following environment variables in order to connect with CPS (formerly MAIN).
 
 ```
 MAIN_GRAPHQL_URL=""
 ```
 
-MAIN_GRAPHQL_URL: This is the main graphql endpoint for your tenant. You can ask someone from your team, or a member from main to provide it for you.
-You can see examples of the other environment variables [here](https://
+MAIN_GRAPHQL_URL: This is the main graphql endpoint - you can ask someone from your team, or a member from CPS to provide it for you.
 
-If you are interested in my-account - main integration and you want some in-depth info about it, you can have a look at our space in [confluence](https://nidigitalsolutions.jira.com/wiki/spaces/NPP/pages/3004694700/PP+My+Account+-+MAIN)
+If you are interested in my-account - CPS integration and you want some in-depth info about it, you can have a look at our space in [confluence](https://nidigitalsolutions.jira.com/wiki/spaces/NPP/pages/3004694700/PP+My+Account+-+MAIN)
 
-## Rquired Environment Variables
+### **Required Environment Variables**
 
 In order to run the application,we need the following required environment variables.
 
@@ -42,9 +39,9 @@ PUBLISHER=""
 MAIN_GRAPHQL_URL=""
 ```
 
-## Theming
+### **Theming**
 
-The My Account package can take your custom theme. It uses NewsKit's theming system to enable customisation. See [Newskit theming](https://www.newskit.co.uk/theming/overview)
+The my-account package appearance can be controlled by a custom theme. The package uses NewsKit's theming system to enable customisation. See [Newskit theming](https://www.newskit.co.uk/theming/overview)
 
 To override the My Account base theme you need to pass a new theme as a prop of a page component:
 
@@ -74,13 +71,13 @@ export const getServerSideProps = async (context) =>
   getProviderProps({ ...context, provider: 'PersonalDetails' })
 ```
 
-User the `sharedTheme` as the base to any new theme you create. You can see this theme [here](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/shared-components/src/theme/sharedTheme)
+Use the `sharedTheme` as the base to any new theme you create. You can see this theme [here](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/shared-components/src/theme/sharedTheme)
 
-Currently the app created with create-render-app has a dropdown theme selector that you can see by pressing '\`' key. This is also implemented in Account. When you add a custom theme you should remove the `AppContext` and `createThemeDropdownObject` logic.
+Currently the app created with `create-render-app` has a dropdown theme selector that you can see by pressing '\`' key. This is also implemented in Account. When you add a custom theme you should remove the `AppContext` and `createThemeDropdownObject` logic.
 
-## Page types
+### **Page types**
 
-Currently provides a number of defualt pages, however they are based on 3 page types
+Currently provides a number of default pages, however they are based on 3 page types
 
 - Display
 - Edit
@@ -92,12 +89,14 @@ All Edit pages are currently accessed from `pages/account/edit/[field].tsx` (`Ed
 
 All Add pages are currenlty accessed from `pages/account/add/[field].tsx` (`AddField` component)`
 
-## Page overrides
+### **Page overrides**
 
-The My Account package has data driven pages using React context. You can override defaults starting on a page bases.
+The My Account package has data driven pages using React context. You can override defaults starting on a page basis.
 
 The following examples will override aspects of the Personal Details page:
 
+#### **1. Override the page's header description and list items title styles:**
+
 ```
 import React from 'react'
 import { PersonalDetails, getProviderProps, ContextOptions, personalDetailsContext } from '@newskit-render/my-account'
@@ -131,14 +130,15 @@ export const getServerSideProps = async (context) =>
   getProviderProps({ ...context, provider: 'PersonalDetails' })
 ```
 
-The above overrides the pages header description and list items title styles.
+#### **2. Override the sections on the page**
 
 ```
 const overrideContext: ContextOptions = {
   ...personalDetailsContext,
   sections: [
     {
-      type: 'list',
+      type: 'digital',
+      componentType: 'list',
       props: {
         introductionProps: {
           title: 'Section added'
@@ -158,7 +158,7 @@ const overrideContext: ContextOptions = {
 }
 ```
 
-You can override the sections on the page
+#### **3. Add onto the existing sections:**
 
 ```
 const overrideContext: ContextOptions = {
@@ -166,7 +166,8 @@ const overrideContext: ContextOptions = {
   sections: [
     ...personalDetailsContext.sections,
     {
-      type: 'list',
+      type: 'print',
+      componentType: 'list',
       props: {
         introductionProps: {
           title: 'Another section added'
@@ -186,9 +187,9 @@ const overrideContext: ContextOptions = {
 }
 ```
 
-Add onto the existing sections.
+The following examples will override aspects of Edit pages `pages/account/edit/[field].tsx`.
 
-The following examples will override aspects of Edit pages `pages/account/edit/[field].tsx`:
+1. Let's change 3 forms - Password, Name and Address:
 
 ```
 import React from 'react'
@@ -327,13 +328,18 @@ export const getServerSideProps = async (context) =>
   getProviderProps({ ...context, provider: 'EditField' })
 ```
 
-Here we have changed 3 forms - Password, Name and Address.
+### **Section types**
+
+The section displays information based on the type of subscription and the type of component, used for display:
 
-### Section types
+```
+type: 'print' | 'digital' // the type of subscription
+componentType: 'list'     // the component, used for displaying the data. Currently we only support `list`
+```
 
-Currently only support list
+Each item in this `list` also has a type. Currently the item types are:
 
-### Item types
+### **Item types**
 
 - 'name'
 - 'dob'
@@ -355,515 +361,73 @@ Currently only support list
 - 'commentingNotifications'
 - 'contactPreferences'
 
-## Properties of ContextOptions
-
-1. data - Do not touch this will be overriden in My Account.
-2. userData - Do not touch this will be overriden in My Account.
-3. head - currently lets you override title tag of page
-
-   - pageTitle: string
-   - siteTitle: string | false
-
-4. navigationPrimary - Global property changes nav links in top banner area - Array of nav objects or false to have no nav
-
-   - nav?:
-     - text: string
-     - link: string
-     - icon: React.ReactElement<NewsKitIconProps>
-     - ariaLabel?: string
-   - title?: string
-   - logoSrc?: string (path to logo.svg)
-   - logoWidth?: string (width of logo)
-   - titlePosition?: string (uses css top property to ajust title position)
-
-5. sideNav - Global property changes sidebar navigation - Array of nav objects
-
-   - text: string
-   - href: string
-   - id: string
-
-> The sideNav uses NewsKit's MenuItem component with a custom stylePreset: `navigationSecondayHorizontal` that can be found [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/theme/index.ts) if you need to override in your custom theme
-
-6. sideNavSelected : string - The Id of the selected sideNav
-
-7. sideNavOverrides
-
-   - menuItemOverrides
-     - stylePreset: MQ<string>
-     - typographyPreset: MQ<string>
-     - spaceInset: MQ<string>
-   - backgroundColor: string
-
-8. pastDueBanner - Banner displayed when your subscription is passed due
-
-   - firstNotice: - Banner when your subscription past due is below first treshold
-     - title: string - Banner title
-     - text: string - Banner text
-     - dismissDays?: number - number of days you want banner dismissed after if not dones so by user
-     - button: string - Banner button text
-   - secondNotice: - Banner when your subscription past due is bigger than first treshold, but lower that second treshold
-     - title: string - Banner title
-     - text: string - Banner text
-     - dismissDays?: number - number of days you want banner dismissed after if not dones so by user
-     - button: string - Banner button text
-   - terminated: Banner when your subscription past due is bigger than second treshold
-     - title: string - Banner title
-     - text: string - Banner text
-     - dismissDays?: number - number of days you want banner dismissed after if not dones so by user
-     - button: string - Banner button text
-   - toBeCancelled: Banner shown when user has cancelled subscription but before end of billing cycle
-     - title: string - Banner title
-     - text: string - Banner text
-     - dismissDays?: number - number of days you want banner dismissed after if not dones so by user
-     - button: string - Banner button text
-   - cancelled: Banner shown when user has cancelled subscription and is after end of billing cycle
-     - title: string - Banner title
-     - text: string - Banner text
-     - dismissDays?: number - number of days you want banner dismissed after if not dones so by user
-     - button: string - Banner button text
-   - treshold: - Past due banner tresholds
-     - firstNotice: number
-     - secondNotice: number
-
-> The pastDueBanner uses some custom stylePreset `PastDueFirstNotice PastDueLastNotice UpdatePaymentButton` see [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/theme/index.ts)
-
-9. header - Changes Page header
-
-   - title: string
-   - titleOverrides: TitleOverrides (see below)
-   - fullWidthTitle: boolean
-   - description: string
-   - descriptionOverrides: DescriptionOverrides (see below)
-   - backButton:
-     - href: string
-     - 'aria-label': string
-     - text: string
-   - backButtonOverrides:
-     - stylePreset: MQ<string>
-     - typographyPreset: MQ<string>
-     - spaceInset: MQ<string>
-     - spaceStack: MQ<string>
-     - iconSize: MQ<string>
-     - size: 'small' | 'medium' | 'large'
-     - asLink: boolean (will render as LinkStandalone not Button)
-   - image: ImageProps
-   - spaceStack: MQ<string>
-   - showDivider: boolean
-   - imageCell?: CellProps CellProps see NewsKit (can be used to change order of items)
-   - introductionCell?: CellProps
-   - backButtonCell?: CellProps
-
-10. sections - Array of section items
-
-- type: string - currently only list
-- props: ContentListViewProps
-
-  - introductionProps: IntroductionProps
-    - title: string
-    - titleOverrides: TitleOverrides (see below)
-    - description: string
-    - descriptionOverrides: DescriptionOverrides (see below)
-  - items?: Array<ContentListItem> (see below)
-  - ariaLabel?: string
-
-- ContentListItem
-  - label: string
-  - default: string
-  - href: string
-  - type: - Currently only name see above
-  - path?: string
-  - ariaLabel?: string
-
-> The ContentListItem uses some custom stylePresets `baseInteractivePrimary030 contentListView` see [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/theme/index.ts)
-
-11. sectionsOverrides - currently only for lists
-
-- list
-
-  - titleOverrides: TitleOverrides (see below)
-  - descriptionOverrides: DescriptionOverrides (see below)
-
-- TitleOverrides
-
-  - typographyPreset: MQ<string>
-  - stylePreset: MQ<string>
-  - spaceStack: MQ<string>
-  - as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span'
-
-- DescriptionOverrides
-  - typographyPreset: MQ<string>
-  - stylePreset: MQ<string>
-  - spaceStack: MQ<string>
-
-12. forms
-
-- default?: FormContext (see below)
-- password?: PasswordContext (see below)
-- name?: FormContext
-- 'display-name'?: FormContext
-- email?: FormContext
-- landline?: FormContext
-- mobile?: FormContext
-- payment?: FormContext
-- address?: AddressFormContext (see below)
-- 'commenting-notifications'?: CommentingNotificationsContext (see below)
-- 'delivery-instructions'?: DeliveryInstructionsContext (see below)
-- 'holiday-stops'?: HolidayStopContext (see below)
-- FormContext
-
-  - header?: (see 4. header)
-  - props?: FormProps (see below)
-
-- PasswordContext
-
-  - header?: (see 4. header)
-  - props?: FormProps (see below) &
-    - resendButtonGroupProps?: ButtonGroupProps (see below)
-
-- FormProps
-
-  - text?: string[]
-  - textOverriders?:
-    - stylePreset?: MQ<string>
-    - typographyPreset?: MQ<string>
-    - spaceStack?: MQ<string>
-  - buttonGroupProps?: ButtonGroupProps (see below)
-  - inputText?: InputText (see below)
-  - listItems?: Array<ContentListItem> (see above)
-  - infoPanel?: InfoPanel (see below)
-
-- InputText:
-
-  - labelProps?: Omit<LabelProps, 'children'> & (see Newskit for LabelProps)
-    - text?: string
-  - formInputTextFieldProps?: FormInputTextFieldProps (see Newskit for LabelProps)
-  - assistiveTextProps?: Omit<AssistiveTextProps, 'children'> &
-    - text?: string
-  - cells?: MQ<number>
-  - spaceStack?: MQ<string>
-  - stylePreset?: MQ<string>
-  - spaceInset?: MQ<string>
-
-- InfoPanel: InlineMessageProps see Newkit &
-
-  - infoPanelCells?: MQ<number>
-  - spaceStack?: MQ<string>
-
-- AddressFormContext
-
-  - header?: HeaderProps
-  - props?: FormProps &
-    - fullAddressInput?: InputText
-    - line1Input?: InputText
-    - line2Input?: InputText
-    - line3Input?: InputText
-    - line4Input?: InputText
-    - line5Input?: InputText
-    - line6Input?: InputText
-    - countryInput?: InputText &
-    - maxHight? string
-
-- CommentingNotificationsContext
-
-  - header?: HeaderProps
-  - props?: FormProps &
-    - listItems?: Array<ContentListItem> (see above)
-    - text?: string[]
-    - ariaLabel?: string
-
-- DeliveryInstructionsContext
-  - header?: HeaderProps
-  - props?: DeliveryInstructionsProps (see below)
-- DeliveryInstructionsProps extends Omit<RadioFormProps, 'onSubmit'> (see below) &
-
-  - onSubmitURL?: string
-
-- RadioFormProps
-
-  - onSubmit: (response: RadioFormResponse) => void (see below)
-  - introductionProps?: Omit<IntroductionProps, 'title' | 'titleOverrides'> (see above)
-  - radioInputList: RadioFormInput[] (see below)
-  - radioInputName?: string
-  - size?: 'small' | 'medium' | 'large'
-  - radioInputListOverrides?:
-    - typographyPreset?: MQ<string>
-    - spaceStack?: MQ<string>
-    - stylePreset?: string
-  - errorOverrides?:
-    - typographyPreset?:
-      - sm: string
-    - spaceStack?: MQ<string>
-    - stylePreset?: string
-  - spaceStack?: MQ<string>
-  - buttonGroupProps?: ButtonGroupProps
-  - introductionInlineMessage?: string
-  - introductionInlineMessageOverrides?: Omit<InlineMessageProps, 'children'> & {
-    - spaceStack?: MQ<string>
-  - gridProps?:
-    - xsMargin: string
-    - xsColumnGutter: string
-    - xsRowGutter: string
-
-- RadioFormInput
-
-  - id: string
-  - text: string
-  - hasTextInput: boolean
-  - assistiveText?: string
-  - isDefaultValue?: boolean
-  - defaultTextInput?: string
-
-- RadioFormResponse
-
-  - answer: string
-  - other?: string
-
-- HolidayStopContext
-
-  - header?: HeaderProps
-  - props?: HolidayStopProps (see below)
-
-- HolidayStopProps
-
-  - ButtonGroupProps: ButtonGroupProps (see below)
-  - introductionProps: Omit<IntroductionProps, 'title' | 'titleOverrides'>
-  - descriptionProps: Omit<IntroductionProps, 'title' | 'titleOverrides'>
-  - contextName: ContextName
-  - holidayStopModalProps : holidayStopModalProps (see below)
-
-- holidayStopModalProps
-  - closePosition: 'left' | 'right' | 'none'
-  - open : boolean
-  - introduction : IntroductionProps
-  - buttonGroup : ButtonGroupProps (see below)
-  - overrides:
-    - content:
-      - spaceInset?: MQ<string>
-  - redirectUrl: string
-
-12. cancellation
-
-- reason: Partial<CancellationContext> (see below)
-- confirm: Partial<CancellationContext>
-
-- CancellationContext
-
-  - header?: HeaderProps
-  - props?: CancellationReasonProps | ConfirmCancellationProps (see below)
-
-- CancellationReasonProps
-
-  - cancellationDescription?: Omit<IntroductionProps, 'title' | 'titleOverrides'>
-  - cancellationList?: RadioFormInput[] (see above)
-  - validation?: DefaultSchemaKeysType | OverrideYupSchemaType (see validation package)
-  - cancellationObjectOverrides?:
-    - typographyPreset?: MQ<string>
-    - spaceStack?: MQ<string>
-    - stylePreset?: string
-  - cancellationErrorObjectOverrides?:
-    - typographyPreset?:
-      - sm: string
-    - spaceStack?: MQ<string>
-    - stylePreset?: string
-      }
-  - spaceStack?: MQ<string>
-  - buttonGroupProps?: Omit<ButtonGroupProps, 'loading'>
-  - message?: string
-  - messageOverrides?: Omit<InlineMessageProps, 'children'> & {
-    - spaceStack?: MQ<string>
-
-- ConfirmCancellationProps
-
-  - listProps?: UnorderedListProps (see Newskit)
-  - children?: string[]
-  - buttonGroupProps?: ButtonGroupProps (see below) omits hasError
-  - listHeader?: string
-  - validation?: Record<string, any>
-  - confirmationModal?: CancelModalProps (see below)
-
-- CancelModalProps
-  - title: string
-  - href: string
-  - text?: string[]
-  - expirationDate?: string
-  - message?: string
-  - buttonText?: string
-  - overrides?: {
-    - title?: Omit<TextBlockProps, 'children'> &
-      - spaceStack?: MQ<string>
-    - text?: Omit<TextBlockProps, 'children'> &
-      - spaceStack?: MQ<string>
-    - message?: Omit<InlineMessageProps, 'children'> &
-      - spaceStack?: MQ<string>
-    - button?: Omit<ButtonLinkProps, 'children' | 'href'>
-      }
-      onDismiss?: () => void
-
-13. footer: - Global property
-
-- menuItemArray - Array of menu items
-  - text: string
-  - href: string
-  - id: string | number
-- legalText: string
-
-14. footerOverides: - Global property
-
-- ariaLabel: string
-- menuItemHorizontalOverrides: menuItemOverrides (see below)
-- menuItemVerticalOverrides: menuItemOverrides (see below)
-- menuOverrides:
-  - spaceStack: MQ<string>
-  - backgroundColor: string
-  - borderColor: string
-  - padding:
-    - xs: string
-    - md: string
-- legalTextOverrides:
-
-  - spaceStack?: MQ<string>
-  - stylePreset?: MQ<string>
-  - typographyPreset: MQ<string>
-  - padding:
-    - xs: string
-    - md: string
-
-- menuItemOverrides:
-  - stylePreset: MQ<string>
-  - typographyPreset: MQ<string>
-  - spaceInset: MQ<string>
-
-15. baseUrl: string - change if your not sticking to default routing set up in Core. Currently set as `/account` but will need to be changes if you change `pages/account` file structure in Core.
-
-16. ButtonGroupProps (override all here or individually by form)
-
-- primaryText?: string
-- secondaryText?: string
-- primaryButton?: ButtonProps (see below)
-- secondaryButton?: ButtonProps
-- primaryCell?: CellProps see NewsKit
-- secondaryCell?: CellProps
-- hasError: boolean
-- secureFlag?: SecureFlagProps (see below) &
-  - spaceStack?: MQ<string>
-- keepFixed?: boolean
-- stylePreset?: MQ<string>
-- spaceStack?: MQ<string>
-
-> The ButtonGroup uses custom stylePresets `buttonGroupXs buttonGroupSm` see [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/theme/index.ts)
-
-- ButtonProps extend Newskit ButtonProps &
-
-  - ariaLabel?: string
-  - href?: string
-  - onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
-
-- SecureFlagProps extends Newskit FlagProps &
-
-  - iconOverrides?:
-    - spaceInset?: MQ<string>
-    - spaceInline?: MQ<string>
-    - size?: MQ<string>
-    - stylePreset?: MQ<string>
-  - icon?: ReactElement<NewsKitIcon>
-
-17. zuoraCustomErrorMessages?: see Payment section
-
-18. noSubscription?: NoSubscriptionProps (see below)
-19. previousSubscription?: NoSubscriptionProps
-
-- NoSubscriptionProps
-  - header?: HeaderProps
-  - buttonGroupProps?: ButtonGroupProps
-
-20. outsideDeliveryAddressModal? : Modal to be shown when subscription type is either Print or Digi-Print and postcode is outside the delivery area
-
-- closePosition:string
-- open:boolean
-- overrides:
-  - content?:
-    - spaceInset?: MQ<string>
-  - panel:
-    - width:MQ<string>
-    - height:MQ<string>
-- introductionProps: IntroductionProps
-  - title: string
-  - titleOverrides: TitleOverrides
-  - description: string
-  - descriptionOverrides: DescriptionOverrides
-- modalLink :
-  - links : Array<{
-    - href : string
-    - type : string
-    - text : string
-      }>
-  - introductionProps: IntroductionProps
-    - title: string
-    - titleOverrides: TitleOverrides
-    - description: string
-    - descriptionOverrides: DescriptionOverrides
-- buttonGroupProps: ButtonGroupProps
-- redirectUrl : string - change if your not sticking to default routing set up in Core. Currently set as `/account/subscription-and-billing` but will need to be changes if you change `pages/account/subscription-and-billing` file structure in Core
-
-## Address Form - Loqate
+For more details, [see below](#type-descriptions)
 
-The Address form uses [Loqate](https://www.loqate.com/en-gb/) to add address lookup functionality. For it to work you need to add LOQACCOUNT_KEY to your CircleCi context.
+### **Properties of ContextOptions**
 
-To get the LOQACCOUNT_KEY please speak to the Render team.
+#### 1. `data` - Do not touch - this will be overriden in my-account.
 
-## Update Preference centre link
+#### 2. `userData` - Do not touch - this will be overriden in my-account.
 
-You can update the link to the Preference centre using the context. Example:
+#### 3. `head` - currently lets you override the title tag of the page:
 
 ```
-const overrideContext: ContextOptions = NewslettersAndAlertsContext;
-(overrideContext.sections[0].props as ContentListViewProps).items[2].href = 'https://mypreferences.the-tls.co.uk/login'
+head: {
+  pageTitle: string,
+  siteTitle: string | false
+}
+```
 
-const Page = (props) => <NewslettersAndAlerts context={overrideContext} {...props} />
+#### 4. `navigationPrimary` - Global property that changes the nav links in the top-banner area - an Array of nav objects or false to have no nav:
 
-export default Page
 ```
+navigationPrimary: {
+ nav?: {
+     text: string
+     link: string
+     icon: React.ReactElement<NewsKitIconProps>
+     ariaLabel?: string
+  },
+  title?: string,
+  logoSrc?: string,                   // path to logo.svg
+  logoWidth?: string,                 // width of logo
+  titlePosition?: string,             // uses css top property to ajust title position
+}
 
-## Reset password expiration
-
-In the Password reset page, you can customize the lifetime of the password reset link. The time will be shown in the inline message to the users and will also indicate how long until the inline message is no longer shown.
+```
 
-To set a time, add the following row to your .env.local. Value is in seconds.
+#### 5. `sideNav` - Global property that changes sidebar navigation - an Array of nav objects:
 
 ```
-PASSWORD_URL_LIFETIME=900
+sideNav: [
+  {
+   text: string,
+   href: string,
+   id: string,
+  }
+]
 ```
 
-If this is not set, the default value will be 900 seconds (15 minutes).
-
-## Past Due Banner
-
-The Past Due Banner has been move into [@newskit-render/shared-components](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/shared-components)
+#### 6. `sideNavSelected : string` - The Id of the selected sideNav
 
-The Past Due Banner is an exported Component, which can be rendered anywhere. Just import the Component and use it in a React application:
+#### 7. `sideNavOverrides` - The styling ovderrides, applied to the sideNav:
 
 ```
-import { PastDueBannerExternal } from '@newskit-render/shared-components'
+sideNavOverrides: {
+  menuItemOverrides: {
+    stylePreset: MQ<string>,
+    typographyPreset: MQ<string>,
+    spaceInset: MQ<string>,
+  },
+  backgroundColor: string,
+}
 
-<PastDueBannerExternal
-  pastDueBanner={pastDueBanner}
-  user={user}
-  wrapper={BannerContainer}
-/>
 ```
 
-Props:
-
-- className?: string
-- pastDueBanner?: PastDueBanner
-- user: UserData
-- wrapper?: React.ComponentType
-- theme?: UncompiledTheme
-
-The pastDueBanner props must be in the following format (the default one). If you do not provide context, the following will be used
+#### 8. `pastDueBanner` - Banner displayed when your subscription is passed due. If not provided, the following default will be used:
 
 ```
-const pastDueBanner = {
+pastDueBanner: {
   firstNotice: {
     title: "We haven't been able to take payment",
     text:
@@ -880,8 +444,12 @@ const pastDueBanner = {
     title: 'Your subscription has been terminated',
     phoneNumber: 'XXXX-XXX-XXXX',
     text:
-      'We didn’t receive payment for your subscription. To reactivate it, please call ##PHONE_NUMBER##.',
+      'We didn’t receive payment for your subscription. To reactivate it, please call ##PHONE_NUMBER##. Or click ##LINK##.',
     dismissDays: 7,
+    link: {
+      linkLocation: 'http://localhost:3000/account',
+      linkText: 'here',
+    },
   },
   cancelled: {
     title: 'Your subscription has been cancelled.',
@@ -896,6 +464,13 @@ const pastDueBanner = {
     text:
       'You have cancelled your subscription and will lose access to all benefits on ##DATE##. To re-activate your subscription call ##PHONE_NUMBER##.',
   },
+  toBeCancelledWithRefund: {
+    title: 'Your subscription will end soon.',
+    phoneNumber: '0800 xxxx xxxxx',
+    text:
+      'We have successfully cancelled your subscription and will be processing your refund shortly. If you have any question please call ##PHONE_NUMBER##.',
+    dismissDays: 7,
+  },
   treshold: {
     firstNotice: 26,
     secondNotice: 30,
@@ -903,6 +478,289 @@ const pastDueBanner = {
 }
 ```
 
+Banner messages indicate different states of the subscription:
+
+- firstNotice: - Banner when the subscription past due is below first threshold
+- secondNotice: - Banner when the subscription past due is above than first threshold, but below that second threshold
+- terminated: Banner when the subscription past due is above the second threshold
+- toBeCancelled: Banner shown when user has cancelled their subscription but before end of billing cycle
+- cancelled: Banner shown when user has cancelled their subscription and is after end of billing cycle
+  Banner thresholds are are numbers, representing a number of days since the last payment. They are used to calculate when to show the first and the second banner message.
+
+A link to all the banner's defaults and typ[es can be found [here](#type-descriptions)
+
+> The pastDueBanner uses some custom stylePreset `PastDueFirstNotice PastDueLastNotice UpdatePaymentButton` see [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/shared-components/src/theme/sharedTheme/stylePresets.ts)
+
+#### 9. header - Changes Page header
+
+```
+header: {
+  title: string,
+  titleOverrides: TitleOverrides,
+  fullWidthTitle: boolean,
+  description: string,
+  descriptionOverrides: DescriptionOverrides,
+  backButton: {
+    href: string
+    'aria-label': string
+    text: string
+  }
+  backButtonOverrides: {
+    stylePreset: MQ<string>
+    typographyPreset: MQ<string>
+    spaceInset: MQ<string>
+    spaceStack: MQ<string>
+    iconSize: MQ<string>
+    size: 'small' | 'medium' | 'large'
+    asLink: boolean,     // (will render as LinkStandalone not Button)
+  },
+
+  image: ImageProps,
+  spaceStack: MQ<string>,
+  showDivider: boolean,
+  imageCell?: CellProps, //CellProps see NewsKit (can be used to change order of items)
+  introductionCell?: CellProps,
+  backButtonCell?: CellProps,
+}
+```
+
+#### 10. `sections` - an Array of section items:
+
+```
+sections: {
+  type: SectionType,
+  componentType: string,     // currently only 'list'
+  props: ContentContainerProps
+}
+
+```
+
+For all the sub-types, see the explanation [here](#type-descriptions)
+
+> The ContentListItem uses some custom stylePresets `baseInteractivePrimary030 contentListView` see [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/shared-components/src/theme/sharedTheme/stylePresets.ts)
+
+#### 11. `sectionsOverrides` - currently only for lists:
+
+```
+  sectionsOverrides?: {
+    list: {
+      titleOverrides?: TitleOverrides
+      descriptionOverrides?: DescriptionOverrides
+    }
+  }
+```
+
+For all the sub-types, see the explanation [here](#type-descriptions)
+
+#### 12. `forms` - we use forms in the edit pages. Contexts differ between forms. Currently we support the following options for forms and their corresponding contexts:
+
+```
+form: {
+  default?: FormContext,
+  password?: PasswordContext,
+  name?: FormContext,
+  'display-name'?: FormContext,
+  email?: FormContext,
+  landline?: FormContext,
+  mobile?: FormContext,
+  payment?: FormContext,
+  address?: AddressFormContext,
+  'commenting-notifications'?: CommentingNotificationsContext,
+  'delivery-instructions'?: DeliveryInstructionsContext,
+  'holiday-stops'?: HolidayStopContext,
+}
+```
+
+For all the context types, [see below](#type-descriptions)
+
+#### 13. `cancellation` - subscription cancellation:
+
+```
+cancellation: {
+  reason: Partial<CancellationContext>
+  confirm: Partial<CancellationContext>
+}
+```
+
+For all the context types, [see below](#type-descriptions)
+
+#### 14. `footer` - Global property
+
+```
+cons footer:FooterContext =  {
+  menuItemArray: [
+    {
+      text: string,
+      href: string,
+      id: string | number,
+    }
+  ],
+legalText: string
+}
+```
+
+For more about the FooterContext type, [see below](#type-descriptions)
+
+#### 15. footerOverides: - Global property.
+
+Used to override the styling of the footer menu items, chat help (if any) and the legal text.
+
+```
+footerOverrides: FooterContextOverrides
+```
+
+For more details, [see below](#type-descriptions)
+
+#### 16. `baseUrl: string` - change if you are not going to stick to the default routing set up in the `core` package. Currently set as `/account` but will need to be changes if you change `pages/account` file structure in `core`.
+
+#### 17. `buttonGroupProps` - (override all here or individually by form)
+
+```
+buttonGroupProps {
+  loading?: boolean
+  secureFlag?: boolean
+  secureFlagOverrides?: SecureFlagProps
+  primaryButton?: ButtonProps
+  secondaryButton?: ButtonProps
+  stylePreset?: MQ<string>
+  keepFixed?: boolean
+  breakPoint?: BreakpointKeys
+}
+```
+
+For more details about the ButtonGroupProps type, [see below](#type-descriptions)
+
+> The ButtonGroup uses custom stylePresets `buttonGroupXs buttonGroupSm` see [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/shared-components/src/ButtonGroup/presets.ts)
+
+#### 18. `zuoraCustomErrorMessages?:` see [Payment section](#payment)
+
+#### 19. `noSubscription?:` SubscriptionStatusProps ([see below](#nosubscriptionprops))
+
+#### 20. `previousSubscription?:` SubscriptionStatusProps
+
+```
+interface SubscriptionStatusProps {
+  header?: HeaderProps
+  buttonGroupProps?: Partial<ButtonGroupProps>
+}
+```
+
+For more on the SubscriptionStatusProps, [see below](#type-descriptions)
+
+#### 21. `outsideDeliveryAddressModal`
+
+Modal to be shown when subscription type is either Print or Digi-Print and postcode is outside the delivery area.
+Currently it looks like this:
+
+```
+outsideDeliveryAddressModal?: {
+closePosition:string
+open:boolean
+overrides:
+  content?:
+    spaceInset?: MQ<string>
+  panel:
+    width:MQ<string>
+    height:MQ<string>
+introductionProps: IntroductionProps
+  title: string
+  titleOverrides: TitleOverrides
+  description: string
+  descriptionOverrides: DescriptionOverrides
+modalLink :
+  links : Array<{
+    href : string
+    type : string
+    text : string
+  }>
+  introductionProps: IntroductionProps
+    title: string
+    titleOverrides: TitleOverrides
+    description: string
+    descriptionOverrides: DescriptionOverrides
+buttonGroupProps: ButtonGroupProps
+redirectUrl : string
+}
+
+```
+
+It is a part of EditFieldContextOptions, which you can [see below](#type-descriptions)
+
+Change `redirectUrl` if you are not sticking to the default routing set up in the Core package. Currently set as `/account/subscription-and-billing` but will need to be changes if you change `pages/account/subscription-and-billing` file structure in the Core package.
+
+## Address Form - Loqate
+
+The Address form uses [Loqate](https://www.loqate.com/en-gb/) to add address lookup functionality. For it to work you need to add LOQACCOUNT_KEY to your CircleCi context.
+
+To get the LOQACCOUNT_KEY please speak to the Solutions team.
+
+## Update Preference centre link
+
+You can update the link to the Preference centre using the context. Example:
+
+```
+const overrideContext: ContextOptions = NewslettersAndAlertsContext;
+(overrideContext.sections[0].props as ContentListViewProps).items[2].href = 'https://mypreferences.the-tls.co.uk/login'
+
+const Page = (props) => <NewslettersAndAlerts context={overrideContext} {...props} />
+
+export default Page
+```
+
+## Reset password expiration
+
+In the Password reset page, you can customize the lifetime of the password reset link. The time will be shown in the inline message to the users and will also indicate how long until the inline message is no longer shown.
+
+To set a time, add the following row to your .env.local. Value is in seconds.
+
+```
+PASSWORD_URL_LIFETIME=900
+```
+
+If this is not set, the default value will be 900 seconds (15 minutes).
+
+## Past Due Banner
+
+The Past Due Banner has been moved into [@newskit-render/shared-components](https://github.com/newscorp-ghfb/ncu-newskit-render/tree/master/packages/shared-components)
+
+The Past Due Banner is an exported Component, which can be rendered anywhere. Just import the Component and use it in a React application:
+
+```
+import { PastDueBannerExternal } from '@newskit-render/shared-components'
+
+<PastDueBannerExternal
+  pastDueBanner={pastDueBanner}
+  user={user}
+  wrapper={BannerContainer}
+/>
+
+Props: {
+  className?: string
+  pastDueBanner?: PastDueBannerType
+  user: UserData
+  wrapper?: React.ComponentType
+  theme?: UncompiledTheme
+}
+```
+
+The pastDueBanner prop must be in the following format:
+
+```
+interface PastDueBannerType {
+  firstNotice: Notice
+  secondNotice: Notice
+  terminated: Notice
+  toBeCancelled: Notice
+  toBeCancelledWithRefund: Notice
+  cancelled: Notice
+  treshold: PastDueBannerTreshold
+}
+```
+
+For `Notice` and `PastDueBannerTreshold`, [see below](#type-descriptions)
+
+> If past due banner context is not provied, the component will use it's [default context](#8-pastduebanner---banner-displayed-when-your-subscription-is-passed-due-if-not-provided-the-following-default-will-be-used)!
+
 For the user prop we are expecting information from MAIN API user:
 Example:
 
@@ -958,19 +816,22 @@ ZUORA_RSA_SIGNATURE_URI - Please check (https://knowledgecenter.zuora.com/Billin
 
 Zoura's validation error messages can be overriden in the context:
 
-- zuoraCustomErrorMessages?:
-  - creditCardHolderName: string
-  - creditCardNumber:
-    - one: string
-    - two: string
-    - three: string
-  - cardSecurityCode:
-    - one: string
-    - four: string
-  - creditCardExpiration: string
-  - creditCardPostalCode: string
-  - creditCardCountry: string
-  - unknownError: string
+```
+zuoraCustomErrorMessages?: {
+  creditCardHolderName: string
+    creditCardNumber:
+      one: string
+      two: string
+      three: string
+    cardSecurityCode:
+      one: string
+      four: string
+    creditCardExpiration: string
+    creditCardPostalCode: string
+    creditCardCountry: string
+   unknownError: string
+}
+```
 
 These correspond to Zoura's retured error code:
 001: Required field not completed - detault for single property or one
@@ -978,8 +839,8 @@ These correspond to Zoura's retured error code:
 003: Invalid card type - three
 004: Invalid CVV number - four
 
-unknownError: when the error received from Zuora does not have any code or other identifier. Give this field a meaningful value, as it will be shown to the user in some cases.  
-.
+unknownError: when the error received from Zuora does not have any code or other identifier. Give this field a meaningful value, as it will be shown to the user in some cases.
+[Back to](#18-zuoracustomerrormessages-see-payment-section)
 
 ## Book a Holiday Stop
 
@@ -1116,3 +977,41 @@ export const holidayStopContext: HolidayStopContextOptions = {
   },
 }
 ```
+
+## Type descriptions
+
+1. [ContentContainerProps](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/Components/Sections/ContentContainer/types.ts) go back to [sections](#10-sections---an-array-of-section-items)
+
+2. [Forms' contexts](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/context/types.ts) go back to [forms](#12-forms---we-use-forms-in-the-edit-pages-contexts-differ-between-forms-currently-we-support-the-following-options-for-forms-and-their-corresponding-contexts)
+
+3. [CancellationReasonProps](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/Components/Sections/Form/CancellationReason/types.ts). back to [cancellation](#13-cancellation---subscription-cancellation)
+
+4. [ConfirmCancellationProps](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/Components/Sections/Form/ConfirmCancellation/types.ts) back to [cancellation](#13-cancellation---subscription-cancellation)
+
+5. [SubscriptionStatusProps](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/Components/Sections/NoSubscription/types.ts) back to [noSubscription](#19-nosubscription-subscriptionstatusprops-see-below)
+
+6. [EditFieldContextOptions](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/my-account/src/context/types.ts) go back to [outsideDeliveryAddressModal](#21-outsidedeliveryaddressmodal)
+
+7. The full descriptions of all other types mentioned can be found [here](https://github.com/newscorp-ghfb/ncu-newskit-render/blob/master/packages/shared-components/README.md) as they are exported from there.
+
+Go back to:</br>
+[Override Page's Header](#1-override-the-pages-header-description-and-list-items-title-styles)</br>
+[Override Page's sections](#2-override-the-sections-on-the-page)</br>
+[Add on to the existing sections](#3-add-onto-the-existing-sections)</br>
+[PastDueBanner how to use](#past-due-banner)</br>
+[Payment how to use](#payment)</br>
+[Properties of Context Options](#properties-of-contextoptions)</br>
+
+- [navigationPrimary context option](#4-navigationprimary---global-property-that-changes-the-nav-links-in-the-top-banner-area---an-array-of-nav-objects-or-false-to-have-no-nav)</br>
+- [sideNav context option](#5-sidenav---global-property-that-changes-sidebar-navigation---an-array-of-nav-objects)</br>
+- [pastDueBanner context option](#8-pastduebanner---banner-displayed-when-your-subscription-is-passed-due-if-not-provided-the-following-default-will-be-used)</br>
+- [header context option](#9-header---changes-page-header)</br>
+- [sections context option](#10-sections---an-array-of-section-items)</br>
+- [forms context option](#12-forms---we-use-forms-in-the-edit-pages-contexts-differ-between-forms-currently-we-support-the-following-options-for-forms-and-their-corresponding-contexts)</br>
+- [cancellation context option](#13-cancellation---subscription-cancellation)</br>
+- [footer context option](#14-footer---global-property)</br>
+- [baseUrl context option](#16-baseurl-string---change-if-you-are-not-going-to-stick-to-the-default-routing-set-up-in-the-core-package-currently-set-as-account-but-will-need-to-be-changes-if-you-change-pagesaccount-file-structure-in-core)</br>
+- [buttonGroupProps context option](#17-buttongroupprops---override-all-here-or-individually-by-form)</br>
+- [zuoraCustomErrorMessages](#18-zuoracustomerrormessages-see-payment-section)</br>
+- [noSubscription/previousSubscription context options](#19-nosubscription-subscriptionstatusprops-see-below)</br>
+- [outsideDeliveryAddressModal context option](#21-outsidedeliveryaddressmodal)</br></br>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/my-account",
-  "version": "3.22.2",
+  "version": "3.22.3-alpha.0",
   "description": "Newskit Render",
   "author": "",
   "license": "UNLICENSED",