[Newsletters] All newsletters page

[cemms1]

background

~~The newsletters page is currently rendered in frontend but the plan is to support it in DCR.~~

~~Since https://github.com/guardian/frontend/pull/25876 , frontend uses its DotComRenderingService to fetch and serve the DCR version of the all newsletters page at https://www.theguardian.com/email-newsletters?dcr=true - when the DCR page is fully implemented, it will be served at https://www.theguardian.com/email-newsletters and the current frontend version of the page can be removed.~~

~~The DCR page is being built incrementally over several PR's. It may be left with some features incomplete on non-functional between PR's until is has been made 'live' by being deployed as the main version of the page (IE at https://www.theguardian.com/email-newsletters)~~

Since https://github.com/guardian/frontend/pull/26490, the all newsletters page (https://www.theguardian.com/email-newsletters) is rendered by DCR, unless a new switch, UseDcrNewslettersPage is set to "off" - in which case frontend would render the page locally, using the old design.

When it is confirmed the old version is no longer needed, the switch and thr old version of the page can be removed from frontend.

Related Previous PRs

• https://github.com/guardian/dotcom-rendering/pull/7507
• https://github.com/guardian/dotcom-rendering/pull/7825
• https://github.com/guardian/dotcom-rendering/pull/7962
• https://github.com/guardian/dotcom-rendering/pull/7916
• https://github.com/guardian/dotcom-rendering/pull/8000
• https://github.com/guardian/dotcom-rendering/pull/8100
• https://github.com/guardian/dotcom-rendering/pull/8058
• https://github.com/guardian/dotcom-rendering/pull/7955
• https://github.com/guardian/dotcom-rendering/pull/8376
• https://github.com/guardian/dotcom-rendering/pull/8434
• https://github.com/guardian/dotcom-rendering/pull/8590

To do (upcoming PRs)

• ~~update grouping & ordering of cards~~
• ~~adjust sizing / spacing / alignment after design review~~
• implement reset / retry feature with error messaging after failed sign-ups
• mobile design change - hide privacy notice until user starts typing

design

https://www.figma.com/file/JXZCnVUq3aBuSVcRCXQFE1/All-newsletter-page-designs?type=design&node-id=434-89355&mode=design&t=Zgb2DENEFFZ7f2RX-0

Interaction flowchart

flowchart TD
    A((user\n action))
   
    A --> E(user clicks submit)
    A --> B[[add-newsletter]]
    A --> C[[remove-newsletter]]
    A --> D[[remove-all-newsletters]]
    E --> F{Captcha\nloaded?}

    F-- no --->G[[captcha-not-loaded-when-needed]]
    F-- yes --->H[[captcha-execute]]
    H --> I{challenge\nneeded?}
    I--no--->L
    I --yes --->J((user does\n challenge))
    J --> K{challege\noutcome}
    K -- fail ---> M[[captcha-fail]]
    K -- dismiss ---> M[[captcha-fail]]
    K -- pass ---> L[[captcha-success]]

    L --> N[[form-submit]]
    N --> O{backend\nresponse}
    O -- ok -->P[[success-response]]
    O -- not ok -->R[[failure-response]]

    R--user can submit again-->A

    B -.- A
    C -.- A
    D -.- A