chore(uve): Add Persona Selector to New Toolbar

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html

@@ -31,19 +31,24 @@
     </div>
 
     <div class="p-toolbar-group-end">
-        <dot-edit-ema-language-selector
-            #languageSelector
-            (selected)="onLanguageSelected($event)"
-            [language]="$toolbar().currentLanguage"
-            data-testId="uve-toolbar-language-selector" />
-
         @if ($toolbar().runningExperiment; as runningExperiment) {
             <dot-ema-running-experiment
                 [runningExperiment]="runningExperiment"
                 data-testId="uve-toolbar-running-experiment" />
         }
+        <dot-edit-ema-language-selector
+            #languageSelector
+            (selected)="onLanguageSelected($event)"
+            [language]="$toolbar().currentLanguage"
+            data-testId="uve-toolbar-language-selector" />
 
-        <span data-testId="uve-toolbar-persona-selector">Persona</span>
+        <dot-edit-ema-persona-selector
+            (selected)="onPersonaSelected($event)"
+            (despersonalize)="onDespersonalize($event)"
+            [pageId]="$personaSelectorProps().pageId"
+            [value]="$personaSelectorProps().value"
+            #personaSelector
+            data-testId="uve-toolbar-persona-selector" />
         <span data-testId="uve-toolbar-workflow-actions">Workflows</span>
     </div>
 </p-toolbar>

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts

@@ -1,4 +1,4 @@
-import { expect, describe } from '@jest/globals';
+import { expect, describe, it } from '@jest/globals';
 import { byTestId, mockProvider, Spectator, createComponentFactory } from '@ngneat/spectator/jest';
 import { MockComponent } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -9,7 +9,12 @@ import { By } from '@angular/platform-browser';
 
 import { ConfirmationService, MessageService } from 'primeng/api';
 
-import { DotExperimentsService, DotLanguagesService, DotLicenseService } from '@dotcms/data-access';
+import {
+    DotExperimentsService,
+    DotLanguagesService,
+    DotLicenseService,
+    DotPersonalizeService
+} from '@dotcms/data-access';
 import { LoginService } from '@dotcms/dotcms-js';
 import {
     DotExperimentsServiceMock,
@@ -37,19 +42,23 @@ import {
 import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
 import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
 import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/edit-ema-language-selector.component';
+import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/edit-ema-persona-selector.component';
 
 const $apiURL = '/api/v1/page/json/123-xyz-567-xxl?host_id=123-xyz-567-xxl&language_id=1';
 
 describe('DotUveToolbarComponent', () => {
     let spectator: Spectator<DotUveToolbarComponent>;
     let messageService: MessageService;
+    let confirmationService: ConfirmationService;
+    let store: InstanceType<typeof UVEStore>;
 
     const createComponent = createComponentFactory({
         component: DotUveToolbarComponent,
         imports: [
             HttpClientTestingModule,
             MockComponent(DotEmaBookmarksComponent),
-            MockComponent(DotEmaRunningExperimentComponent)
+            MockComponent(DotEmaRunningExperimentComponent),
+            MockComponent(EditEmaPersonaSelectorComponent)
         ],
         providers: [
             UVEStore,
@@ -87,6 +96,14 @@ describe('DotUveToolbarComponent', () => {
                     add: jest.fn()
                 }
             }
+        ],
+        componentProviders: [
+            {
+                provide: DotPersonalizeService,
+                useValue: {
+                    getPersonalize: jest.fn()
+                }
+            }
         ]
     });
 
@@ -118,11 +135,7 @@ describe('DotUveToolbarComponent', () => {
         runningExperiment: null,
         workflowActionsInode: pageAPIResponse?.page.inode,
         unlockButton: null,
-        showInfoDisplay: shouldShowInfoDisplay,
-        personaSelector: {
-            pageId: pageAPIResponse?.page.identifier,
-            value: pageAPIResponse?.viewAs.persona ?? DEFAULT_PERSONA
-        }
+        showInfoDisplay: shouldShowInfoDisplay
     };
 
     const baseUVEState = {
@@ -132,6 +145,10 @@ describe('DotUveToolbarComponent', () => {
         pageParams: signal(params),
         pageAPIResponse: signal(MOCK_RESPONSE_VTL),
         $apiURL: signal($apiURL),
+        $personaSelector: signal({
+            pageId: pageAPIResponse?.page.identifier,
+            value: pageAPIResponse?.viewAs.persona ?? DEFAULT_PERSONA
+        }),
         reloadCurrentPage: jest.fn(),
         loadPageAsset: jest.fn(),
         languages: signal([
@@ -148,6 +165,8 @@ describe('DotUveToolbarComponent', () => {
             });
 
             messageService = spectator.inject(MessageService);
+            confirmationService = spectator.inject(ConfirmationService);
+            store = spectator.inject(UVEStore);
         });
 
         describe('dot-ema-bookmarks', () => {
@@ -244,6 +263,104 @@ describe('DotUveToolbarComponent', () => {
                 expect(btn.getAttribute('href')).toBe($apiURL);
             });
         });
+
+        describe('dot-edit-ema-persona-selector', () => {
+            it('should have attr', () => {
+                const personaSelector = spectator.query(EditEmaPersonaSelectorComponent);
+
+                expect(personaSelector.pageId).toBe('123');
+                expect(personaSelector.value).toEqual({
+                    archived: false,
+                    baseType: 'PERSONA',
+                    contentType: 'persona',
+                    folder: 'SYSTEM_FOLDER',
+                    hasLiveVersion: false,
+                    hasTitleImage: false,
+                    host: 'SYSTEM_HOST',
+                    hostFolder: 'SYSTEM_HOST',
+                    hostName: 'System Host',
+                    identifier: 'modes.persona.no.persona',
+                    inode: '',
+                    keyTag: 'dot:persona',
+                    languageId: 1,
+                    live: false,
+                    locked: false,
+                    modDate: '0',
+                    modUser: 'system',
+                    modUserName: 'system user system user',
+                    name: 'Default Visitor',
+                    owner: 'SYSTEM_USER',
+                    personalized: false,
+                    sortOrder: 0,
+                    stInode: 'c938b15f-bcb6-49ef-8651-14d455a97045',
+                    title: 'Default Visitor',
+                    titleImage: 'TITLE_IMAGE_NOT_FOUND',
+                    url: 'demo.dotcms.com',
+                    working: false
+                });
+            });
+
+            it('should personalize - no confirmation', () => {
+                const spyloadPageAsset = jest.spyOn(store, 'loadPageAsset');
+                spectator.triggerEventHandler(EditEmaPersonaSelectorComponent, 'selected', {
+                    identifier: '123',
+                    pageId: '123',
+                    personalized: true
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                } as any);
+                spectator.detectChanges();
+
+                expect(spyloadPageAsset).toHaveBeenCalledWith({
+                    'com.dotmarketing.persona.id': '123'
+                });
+            });
+
+            it('should personalize - confirmation', () => {
+                spectator.triggerEventHandler(EditEmaPersonaSelectorComponent, 'selected', {
+                    identifier: '123',
+                    pageId: '123',
+                    personalized: false
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                } as any);
+                spectator.detectChanges();
+
+                expect(confirmationService.confirm).toHaveBeenCalledWith({
+                    accept: expect.any(Function),
+                    acceptLabel: 'dot.common.dialog.accept',
+                    header: 'editpage.personalization.confirm.header',
+                    message: 'editpage.personalization.confirm.message',
+                    reject: expect.any(Function),
+                    rejectLabel: 'dot.common.dialog.reject'
+                });
+            });
+
+            xit('should personalize - call service', () => {
+                expect(true).toBe(true);
+            });
+
+            it('should despersonalize', () => {
+                spectator.triggerEventHandler(EditEmaPersonaSelectorComponent, 'despersonalize', {
+                    identifier: '123',
+                    pageId: '123',
+                    personalized: true
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                } as any);
+
+                spectator.detectChanges();
+
+                expect(confirmationService.confirm).toHaveBeenCalledWith({
+                    accept: expect.any(Function),
+                    acceptLabel: 'dot.common.dialog.accept',
+                    header: 'editpage.personalization.delete.confirm.header',
+                    message: 'editpage.personalization.delete.confirm.message',
+                    rejectLabel: 'dot.common.dialog.reject'
+                });
+            });
+
+            xit('should dpersonalize - call service', () => {
+                expect(true).toBe(true);
+            });
+        });
     });
 
     describe('State changes', () => {

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts

@@ -12,15 +12,17 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { ToolbarModule } from 'primeng/toolbar';
 
-import { DotMessageService } from '@dotcms/data-access';
-import { DotLanguage } from '@dotcms/dotcms-models';
+import { DotMessageService, DotPersonalizeService } from '@dotcms/data-access';
+import { DotPersona, DotLanguage } from '@dotcms/dotcms-models';
 
+import { DEFAULT_PERSONA } from '../../../shared/consts';
 import { DotPage } from '../../../shared/models';
 import { UVEStore } from '../../../store/dot-uve.store';
 import { DotEmaBookmarksComponent } from '../dot-ema-bookmarks/dot-ema-bookmarks.component';
 import { DotEmaInfoDisplayComponent } from '../dot-ema-info-display/dot-ema-info-display.component';
 import { DotEmaRunningExperimentComponent } from '../dot-ema-running-experiment/dot-ema-running-experiment.component';
 import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/edit-ema-language-selector.component';
+import { EditEmaPersonaSelectorComponent } from '../edit-ema-persona-selector/edit-ema-persona-selector.component';
 
 @Component({
     selector: 'dot-uve-toolbar',
@@ -31,22 +33,29 @@ import { EditEmaLanguageSelectorComponent } from '../edit-ema-language-selector/
         DotEmaBookmarksComponent,
         DotEmaInfoDisplayComponent,
         DotEmaRunningExperimentComponent,
-        ClipboardModule,
-        EditEmaLanguageSelectorComponent
+        EditEmaPersonaSelectorComponent,
+        EditEmaLanguageSelectorComponent,
+        ClipboardModule
     ],
+    providers: [DotPersonalizeService],
     templateUrl: './dot-uve-toolbar.component.html',
     styleUrl: './dot-uve-toolbar.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotUveToolbarComponent {
-    languageSelector = viewChild<EditEmaLanguageSelectorComponent>('languageSelector');
+    $personaSelector = viewChild<EditEmaPersonaSelectorComponent>('personaSelector');
+
+    $languageSelector = viewChild<EditEmaLanguageSelectorComponent>('languageSelector');
     #store = inject(UVEStore);
+
     readonly #messageService = inject(MessageService);
     readonly #dotMessageService = inject(DotMessageService);
     readonly #confirmationService = inject(ConfirmationService);
+    readonly #personalizeService = inject(DotPersonalizeService);
 
     readonly $toolbar = this.#store.$uveToolbar;
     readonly $apiURL = this.#store.$apiURL;
+    readonly $personaSelectorProps = this.#store.$personaSelector;
 
     @Output() translatePage = new EventEmitter<{ page: DotPage; newLanguage: number }>();
 
@@ -89,6 +98,75 @@ export class DotUveToolbarComponent {
     }
 
     /**
+     * Handle the persona selection
+     *
+     * @param {DotPersona} persona
+     * @memberof DotEmaComponent
+     */
+    onPersonaSelected(persona: DotPersona & { pageId: string }) {
+        if (persona.identifier === DEFAULT_PERSONA.identifier || persona.personalized) {
+            this.#store.loadPageAsset({
+                'com.dotmarketing.persona.id': persona.identifier
+            });
+        } else {
+            this.#confirmationService.confirm({
+                header: this.#dotMessageService.get('editpage.personalization.confirm.header'),
+                message: this.#dotMessageService.get(
+                    'editpage.personalization.confirm.message',
+                    persona.name
+                ),
+                acceptLabel: this.#dotMessageService.get('dot.common.dialog.accept'),
+                rejectLabel: this.#dotMessageService.get('dot.common.dialog.reject'),
+                accept: () => {
+                    this.#personalizeService
+                        .personalized(persona.pageId, persona.keyTag)
+                        .subscribe(() => {
+                            this.#store.loadPageAsset({
+                                'com.dotmarketing.persona.id': persona.identifier
+                            });
+
+                            this.$personaSelector().fetchPersonas();
+                        }); // This does a take 1 under the hood
+                },
+                reject: () => {
+                    this.$personaSelector().resetValue();
+                }
+            });
+        }
+    }
+
+    /**
+     * Handle the persona despersonalization
+     *
+     * @param {(DotPersona & { pageId: string })} persona
+     * @memberof EditEmaToolbarComponent
+     */
+    onDespersonalize(persona: DotPersona & { pageId: string; selected: boolean }) {
+        this.#confirmationService.confirm({
+            header: this.#dotMessageService.get('editpage.personalization.delete.confirm.header'),
+            message: this.#dotMessageService.get(
+                'editpage.personalization.delete.confirm.message',
+                persona.name
+            ),
+            acceptLabel: this.#dotMessageService.get('dot.common.dialog.accept'),
+            rejectLabel: this.#dotMessageService.get('dot.common.dialog.reject'),
+            accept: () => {
+                this.#personalizeService
+                    .despersonalized(persona.pageId, persona.keyTag)
+                    .subscribe(() => {
+                        this.$personaSelector().fetchPersonas();
+
+                        if (persona.selected) {
+                            this.#store.loadPageAsset({
+                                'com.dotmarketing.persona.id': DEFAULT_PERSONA.identifier
+                            });
+                        }
+                    }); // This does a take 1 under the hood
+            }
+        });
+    }
+
+    /*
      * Asks the user for confirmation to create a new translation for a given language.
      *
      * @param {DotLanguage} language - The language to create a new translation for.
@@ -116,7 +194,7 @@ export class DotUveToolbarComponent {
             },
             reject: () => {
                 // If is rejected, bring back the current language on selector
-                this.languageSelector().listbox.writeValue(this.$toolbar().currentLanguage);
+                this.$languageSelector().listbox.writeValue(this.$toolbar().currentLanguage);
             }
         });
     }

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/edit-ema-persona-selector/edit-ema-persona-selector.component.ts

@@ -111,8 +111,7 @@ export class EditEmaPersonaSelectorComponent implements AfterViewInit, OnChanges
      * @memberof EditEmaPersonaSelectorComponent
      */
     resetValue(): void {
-        this.listbox.value = this.value;
-        this.listbox.cd.detectChanges();
+        this.listbox.writeValue(this.value);
     }
 
     /**

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts

@@ -34,6 +34,7 @@ import {
     DotPropertiesService,
     DotSeoMetaTagsService,
     DotSeoMetaTagsUtilService,
+    DotSessionStorageService,
     DotTempFileUploadService,
     DotWorkflowActionsFireService,
     PushPublishService
@@ -147,6 +148,7 @@ const createRouting = () =>
             UVEStore,
             DotFavoritePageService,
             DotESContentService,
+            DotSessionStorageService,
             {
                 provide: DotPropertiesService,
                 useValue: {