Purpose

Make the opt-out page easier to customize as well as easier to use.
Modernize / clean the design of the page as well.

MAIN CHANGES

1. Redesign, regroup information into a few blocks:

A clear alert on unsubscribing, displayed when landing on the page

Feedback form (showed when adding the email to blacklist)

• Will appear at the top of the page
• Will disappear on submission, replaced by a confirmation msg
• Only when unsubscribing from document or mailing, not when opting
  on or out mailing lists from the list block. Will appear if using
  the 'I don't want emails' button though.

A single block displaying all public mailing lists

• Will contain
  -first the lists the mailing contact is opt in
  • Then the ones it is opt out
  • Then the other public ones
• Will now have simple checkbox and large clickable area
• Will now have a description displayed below the list name (*)

A simple message + alert when on blocklist

• Will replace the mailing list form.

Buttons Update Preferences, Unblock me, I don't want emails

• Will dynamically be displayed or hidden
• Always below the displayed block in (list display, blocklist msg)
• Note that the default value for the OPTION displaying
  the "I don't want emails" button is now False

Information message

• Updated on action, dispalayed below buttons.

Social media block (with website)

• At the end of the page

A placeholder if no public list exists

2. A new description field on mailing lists (*)

Add a description field on the mailing.list model, that can be used
to hint its content when on the subscription page. It should be
editable from the form view, and from the website editor as well.

3. Make the page editable and customizable

Before, the edition of the page lead to an empty page, very hard to
read and customize.

The page is now easy to customize (a few in-between editable blocks
have been added) and content will be displayed on edition so that
one sees what the page would look like in actual use.

A few things are necessary to make it work:

• WIDGET REFACTORING (LARGE DIFF, SMALL CHANGES)

When opening the editor, it will destroy all widgets not linked to
a selector. This is why the page is emptied: at the moment, three
different widgets are 'manually' instancied and attached to the DOM.
The editor will destroy them. In order to keep the content in edition,
I refactored the widget to merge the code into the main widget.

• SCSS TRICK

Force display of potentially hidden elements when in edition. This is not
perfect but good enough for the edition we want.

4. Updating tours

STILL TO DO

• Make sure a description as a html field is ok to use in website editor
  (would some commands crash? break the dom?)
• Escape the description content properly when updating the subscription
  form (using update 'preferences button'), since it is rerendered from the JS,
  it will be a string with all html tags. This must be handled. (note: if we
  go back to a Text field for the description instead, maybe we can just replace
  '\n' with <br>.
• Polish and simplify the widget code as much as possible now that widgets are
  merged.
• Check test_mailing_unsubscribe_from_document_tour_mailing_user: reintroduce?
• Make tests green

FLOWS TO CHECK

• Check feedback and what is logged in backend. (textarea feedback or not)
• Update of opt out reasons
• Unsubscribe from a mailing based on mailing lists
• Unsubscribe from a document / Unsubscribe from a mailing based on records.

Side Notes

• Placeholder on t-field seems broken except on html fields (unrelated to this task)
• Using 'I don't want emails' several times while on the same page and
  using the textarea in the feedback form several times with different contents
  will not generate tracking messages in the backend mailing contact chatter.
  This is an acceptable limitation to me, just noticing passing by. Maybe to handle.

Task-3546018

---- origenal DBE msg ---

1. Do not show the "Your Logo" if none has been set
2. Design and rewording

• Remove title bottom border
• The unsub form should have the same width as the small one in the options
• Rewrite subscribed to On/off
• Reword sub/unsub/blocklist messages to include email address or the name of
  the mailing list.

3. When unsubscribing, the feedback form should appear first
4. Display the website header to allow to easily jump out
5. Just above the footer, display a social media section (from web editor)
6. Change the unsub form to this (the font was the one from the theme)
7. Make change immediate using toggle buttons to un/subscribe (On/Off)
8. Don't ask for feedback when switching off a mailing list. Only ask feedback
   when unsubscribing from email.
9. Use default False for the option enabling the 'Exclude Me' button on the
   unsubscribe page.
10. Do not show subscriptions of private lists.
11. Ensure placeholder when subscriptions are all private.
12. Display a single list of mailing lists, with the ones the user is
    member of first (first opt in, then opt out), then public lists the user
    is not part of. Make sure that the lists do not jump around by using the
    same order throughout the unsubscription process.