Set edit mode and save content to selected persona

[fmontes]

As a page editor, I want to create a version of the page for a specific persona to target my site better.

Describe the solution you'd like

As right now, we can preview the page as a persona by selecting it in the dropdown but when we do changes to the pages those changes are saved for the default persona.

By using the new persona selector we can select a persona and when click EDIT we start editing the page for the selected persona.

The flow

1. We open the page as default persona
2. If we're in PREVIEW and we select a persona: we stay in preview and refresh the page (this is already happening)
3. If we're in EDIT and select a persona:
   a. If the persona selected have a personalized: true, we refresh the page and leave the mode in EDIT and we start saving content for this persona.
   b. If the persona selected have a personalized: false, we refresh the page and set the mode to PREVIEW for the selected persona. At this point, user could click EDIT to trigger the personalization.

Create a personalized version of the page

The trigger is when a persona with personalized: false is selected and the user click on EDIT, we show a dialog that reads more or less: "Are you sure you want to create a custom version of the page for Selected Persona?"

1. Accept: We need to hit an endpoint to copy the page for this persona and from now on we have to submit the personaTag to the save content endpoint.
2. Cancel: We select default persona, refresh the page and set the mode to EDIT.

Technical Approach

There is an endpoint for "personalize a page for a persona", you need to do a POST like:

url: `/api/v1/personalization/pagepersonas`,
body: {
    pageId,
    personaTag
}

Now to save content to the selected persona we use the same endpoint we're using but passing the selected personaTag:

url: `/api/v1/page/pageId/content`,
body: [
    { 
        personaTag: "FirstTimeInvestor",
        identifier: 'containerIdentifier2', 
        uuid: '1',
        contentletsId: [
            'contentletId2'
        ]
    },
    {
        personaTag: "FirstTimeInvestor",
        identifier: 'containerIdentifier2',
        uuid: '1',
        contentletsId: [
            'contentletId1',
            'contentletId2',
            'contentletIdN'
        ]
    }
];

To save content to Default Persona we just don't pass the personaTag

Additional context

Add any other context or screenshots about the feature request here.

Acceptance Criteria

1. Allow user to create and edit personalized version of a page for a selected persona
2. Work in all the supported browsers (don't forget IE11 and iPad)
3. Multilanguage
4. Unit test

[jgambarios]

PR: #16854

[jgambarios]

PR: #17036