chore(FTM): Applying Feedback (#31168)

# To-Do

- [x] Divider is the same color
- [x] More button should react to actual selected custom device/RRSS
- [x] Personalization not working on Preview Mode
- [x] Hide FTM Calendar on RRSS selected
- [x] Fix issue with initialization of preview mode with custom devices

## Screenshot


https://github.com/user-attachments/assets/165b6acb-ca56-4ebc-b510-500c636bc6d4

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

@@ -32,8 +32,10 @@
     <p-button
         icon="pi pi-chevron-down"
         iconPos="right"
-        [label]="'more' | dm"
+        [label]="$moreButtonLabel() | dm"
         [class.active]="$isMoreButtonActive()"
+        [pTooltip]="$moreButtonLabel() | dm"
+        tooltipPosition="bottom"
         styleClass="p-button-text p-2 p-button-sm"
         (click)="menu.toggle($event)"
         data-testId="more-button" />

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

@@ -28,6 +28,7 @@
 
         ::ng-deep {
             .p-button {
+                max-width: 124px; // To avoid overflow on the more button
                 use {
                     color: $color-palette-primary;
                 }
@@ -55,10 +56,11 @@
     ::ng-deep {
         .more-menu {
             padding: $spacing-1;
+            max-width: 15.625rem; // To avoid overflow on the more menu
         }
 
         .p-submenu-header {
-            border-bottom: 1px solid $color-palette-gray-300;
+            border-bottom: 0.0625rem solid $color-palette-gray-300;
         }
     }
 }

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

@@ -384,6 +384,63 @@ describe('DotUveDeviceSelectorComponent', () => {
                 expect(menuList).toBeDefined();
             });
         });
+
+        describe('More button label', () => {
+            it('should show "more" as default label', () => {
+                // Simulate the default device and social media not being set
+                baseUVEState.device.set(DEFAULT_DEVICE);
+                baseUVEState.socialMedia.set(null);
+
+                baseUVEState.viewParams.set({
+                    device: undefined,
+                    orientation: undefined,
+                    seo: undefined
+                });
+
+                spectator.detectChanges();
+                const moreButton = spectator.query('[data-testid="more-button"]');
+
+                expect(moreButton.textContent.trim()).toBe('more');
+            });
+
+            it('should show custom device name when selected', () => {
+                const customDevice = mockDotDevices[0];
+
+                // Simulate the custom device selection
+
+                baseUVEState.device.set(customDevice);
+                baseUVEState.socialMedia.set(null);
+
+                baseUVEState.viewParams.set({
+                    device: customDevice.inode,
+                    orientation: undefined,
+                    seo: undefined
+                });
+
+                spectator.detectChanges();
+                const moreButton = spectator.query('[data-testid="more-button"]');
+
+                expect(moreButton.textContent.trim()).toBe(customDevice.name);
+            });
+
+            it('should show social media name when selected', () => {
+                // Simulate the social media selection
+                const socialMedia = 'Facebook';
+                baseUVEState.socialMedia.set(socialMedia);
+                baseUVEState.device.set(DEFAULT_DEVICE);
+
+                baseUVEState.viewParams.set({
+                    device: undefined,
+                    orientation: undefined,
+                    seo: socialMedia
+                });
+
+                spectator.detectChanges();
+                const moreButton = spectator.query('[data-testid="more-button"]');
+
+                expect(moreButton.textContent.trim()).toBe(socialMedia);
+            });
+        });
     });
 
     afterEach(() => jest.clearAllMocks());

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

@@ -77,6 +77,18 @@ export class DotUveDeviceSelectorComponent implements OnInit {
         return menu;
     });
 
+    readonly $moreButtonLabel = computed(() => {
+        const DEFAULT_LABEL = 'more';
+
+        const customDevice = this.$devices().find(
+            (device) => !device._isDefault && device.inode === this.$currentDevice()?.inode
+        );
+
+        const label = customDevice?.name || this.$currentSocialMedia();
+
+        return label || DEFAULT_LABEL;
+    });
+
     readonly activeMenuItemId = computed(() => {
         const deviceInode = this.$currentDevice()?.inode;
         const socialMedia = this.$currentSocialMedia();

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

@@ -10,7 +10,7 @@
         }
     </div>
 
-    @if (preview) {
+    @if (preview && !$socialMedia()) {
         <div class="p-toolbar-group-center">
             <p-calendar
                 inputStyleClass="p-inputtext-sm"
@@ -107,7 +107,7 @@
         data-testId="close-preview-mode" />
     <div class="vertical-divider"></div>
     <!-- We want to be sure we have devices -->
-    @if ($devices().length) {
+    @if ($devices()?.length) {
         <dot-uve-device-selector [devices]="$devices()" data-testId="uve-toolbar-device-selector" />
     }
 </ng-template>

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

@@ -35,7 +35,7 @@
     align-self: stretch;
     position: relative;
     &::before {
-        border-left: 1px solid $color-palette-primary-200;
+        border-left: 1px solid $color-palette-gray-200;
         position: absolute;
         display: block;
         top: 0;

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

@@ -111,7 +111,8 @@ const baseUVEState = {
     orientation: signal(''),
     clearDeviceAndSocialMedia: jest.fn(),
     device: signal(DEFAULT_DEVICES.find((device) => device.inode === 'default')),
-    $unlockButton: signal(null)
+    $unlockButton: signal(null),
+    socialMedia: signal(null)
 };
 
 const personaEventMock = {
@@ -625,6 +626,29 @@ describe('DotUveToolbarComponent', () => {
 
             expect(workflowActions).toBeNull();
         });
+
+        describe('calendar', () => {
+            it('should show calendar when in preview mode and socialMedia is false', () => {
+                baseUVEState.socialMedia.set(null);
+                spectator.detectChanges();
+
+                expect(spectator.query('p-calendar')).toBeTruthy();
+            });
+
+            it('should not show calendar when socialMedia has a value', () => {
+                baseUVEState.socialMedia.set('faceboook');
+                spectator.detectChanges();
+
+                expect(spectator.query('p-calendar')).toBeFalsy();
+            });
+
+            it('should not show calendar when not in preview mode', () => {
+                baseUVEState.$isPreviewMode.set(false);
+                spectator.detectChanges();
+
+                expect(spectator.query('p-calendar')).toBeFalsy();
+            });
+        });
     });
 
     describe('State changes', () => {

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

@@ -99,11 +99,12 @@ export class DotUveToolbarComponent {
     readonly $personaSelectorProps = this.#store.$personaSelector;
     readonly $infoDisplayProps = this.#store.$infoDisplayProps;
     readonly $unlockButton = this.#store.$unlockButton;
+    readonly $socialMedia = this.#store.socialMedia;
 
     readonly $devices: Signal<DotDeviceListItem[]> = toSignal(
         this.#deviceService.get().pipe(map((devices = []) => [...DEFAULT_DEVICES, ...devices])),
         {
-            initialValue: DEFAULT_DEVICES
+            initialValue: null
         }
     );
 

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

@@ -87,15 +87,15 @@
         (reloadFromDialog)="reloadPage()"
         #dialog
         data-testId="ema-dialog" />
-    <p-confirmDialog
-        [style]="{
-            width: '400px'
-        }"
-        rejectIcon="hidden"
-        acceptIcon="hidden"
-        rejectButtonStyleClass="p-button-outlined"
-        data-testId="confirm-dialog" />
 }
+<p-confirmDialog
+    [style]="{
+        width: '400px'
+    }"
+    rejectIcon="hidden"
+    acceptIcon="hidden"
+    rejectButtonStyleClass="p-button-outlined"
+    data-testId="confirm-dialog" />
 
 @if ($editorProps().showBlockEditorSidebar) {
     <dot-block-editor-sidebar #blockSidebar (onSaved)="reloadPage()" />

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

@@ -414,13 +414,7 @@ describe('EditEmaEditorComponent', () => {
             });
 
             it('should hide components when the store changes', () => {
-                const componentsToHide = [
-                    'palette',
-                    'dropzone',
-                    'contentlet-tools',
-                    'dialog',
-                    'confirm-dialog'
-                ]; // Test id of components that should hide when entering preview modes
+                const componentsToHide = ['palette', 'dropzone', 'contentlet-tools', 'dialog']; // Test id of components that should hide when entering preview modes
 
                 const iphone = { ...mockDotDevices[0], icon: 'someIcon' };
 
@@ -452,13 +446,7 @@ describe('EditEmaEditorComponent', () => {
             });
 
             it('should hide components when the store changes for a variant', () => {
-                const componentsToHide = [
-                    'palette',
-                    'dropzone',
-                    'contentlet-tools',
-                    'dialog',
-                    'confirm-dialog'
-                ]; // Test id of components that should hide when entering preview modes
+                const componentsToHide = ['palette', 'dropzone', 'contentlet-tools', 'dialog']; // Test id of components that should hide when entering preview modes
 
                 spectator.detectChanges();
 

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts

@@ -326,7 +326,7 @@ describe('withEditor', () => {
                 expect(store.viewParams()).toEqual({
                     device: iphone.inode,
                     orientation: Orientation.LANDSCAPE,
-                    seo: undefined
+                    seo: null
                 });
             });
 
@@ -340,7 +340,7 @@ describe('withEditor', () => {
                 expect(store.viewParams()).toEqual({
                     device: iphone.inode,
                     orientation: Orientation.PORTRAIT,
-                    seo: undefined
+                    seo: null
                 });
             });
         });
@@ -369,9 +369,9 @@ describe('withEditor', () => {
                     expect(store.isEditState()).toBe(true);
                     expect(store.orientation()).toBe(null);
                     expect(store.viewParams()).toEqual({
-                        device: undefined,
-                        orientation: undefined,
-                        seo: undefined
+                        device: null,
+                        orientation: null,
+                        seo: null
                     });
                 });
             });

core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts

@@ -208,7 +208,8 @@ export function withUVEToolbar() {
                     viewParams: {
                         ...store.viewParams(),
                         device: device.inode,
-                        orientation: newOrientation
+                        orientation: newOrientation,
+                        seo: null
                     },
                     socialMedia: null,
                     isEditState: false,
@@ -246,9 +247,9 @@ export function withUVEToolbar() {
                     orientation: null,
                     viewParams: {
                         ...store.viewParams(),
-                        device: undefined,
-                        orientation: undefined,
-                        seo: undefined
+                        device: null,
+                        orientation: null,
+                        seo: null
                     }
                 });
             },