@designcrowd/library.brand-page 6.1.14 → 6.1.16

package/src/brand-page/utils/view-model.util.test.ts

@@ -6,12 +6,13 @@ import {
   type ContactFormContent,
   type ColorItem,
 } from '../models';
-import { BRAND_PAGE_TYPES, PageStyles } from '../models';
+import { BRAND_PAGE_TYPES, PageHeaderDesktop, PageStyles } from '../models';
 import {
   mapToBannerSectionViewModel,
   mapToContactFormViewModel,
   mapToImageViewModel,
   mapToMailingListViewModel,
+  mapToPageHeaderViewModel,
   mapToProfileViewModel,
   mapToTextViewModel,
   mapToViewModel,
@@ -508,6 +509,149 @@ describe('view model util', () => {
     expect(url.searchParams.has('w')).toBe(true);
     expect(wParamValue).toBe('1080');
   });
+
+  describe('mapToPageHeaderViewModel background opacity (BP-5851)', () => {
+    const mapHeader = (header: PageHeaderDesktop) =>
+      mapToPageHeaderViewModel(header, new PageStyles(), []);
+
+    test('constructing without an explicit backgroundOpacity defaults it to 100 and renders unchanged', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000' },
+      });
+
+      expect(header.backgroundStyle.backgroundOpacity).toBe(100);
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle).toEqual({ backgroundColor: '#ff0000' });
+    });
+
+    test('header constructed with no options still gets a concrete backgroundOpacity', () => {
+      expect(new PageHeaderDesktop().backgroundStyle.backgroundOpacity).toBe(
+        100,
+      );
+    });
+
+    test('un-constructed legacy header (parsed metadata that never ran the constructor) renders fully opaque', () => {
+      // The maker's live-preview path can hold the header JSON.parse'd verbatim.
+      const header = JSON.parse(
+        JSON.stringify(
+          new PageHeaderDesktop({
+            backgroundStyle: { backgroundColor: '#ff0000' },
+          }),
+        ),
+      ) as PageHeaderDesktop;
+
+      delete header.backgroundStyle.backgroundOpacity;
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle).toEqual({ backgroundColor: '#ff0000' });
+    });
+
+    test('a header with backgroundStyle itself absent renders fully opaque instead of throwing', () => {
+      const header = new PageHeaderDesktop();
+
+      delete (header as { backgroundStyle?: unknown }).backgroundStyle;
+
+      expect(() => mapHeader(header)).not.toThrow();
+      expect(mapHeader(header).backgroundStyle).toEqual({});
+    });
+
+    test('opacity 100 (default) leaves backgroundColor unchanged', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 100 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff0000');
+    });
+
+    test('opacity 60 composites into the expected 8-digit hex backgroundColor', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 60 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff000099');
+    });
+
+    test('opacity below 100 composites into an 8-digit hex backgroundColor', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 50 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('#ff000080');
+    });
+
+    test('opacity 0 composites to the transparent keyword', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity: 0 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('transparent');
+    });
+
+    test('a palette-matched (var(--palette-n)) backgroundColor is faded via color-mix, not handed back unfaded', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: {
+          backgroundColor: 'var(--palette-1)',
+          backgroundOpacity: 30,
+        },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe(
+        'color-mix(in srgb, var(--palette-1) 30%, transparent)',
+      );
+    });
+
+    test('transparent backgroundColor is left unchanged regardless of opacity', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: {
+          backgroundColor: 'transparent',
+          backgroundOpacity: 40,
+        },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBe('transparent');
+    });
+
+    test('unset backgroundColor is left unchanged regardless of opacity', () => {
+      const header = new PageHeaderDesktop({
+        backgroundStyle: { backgroundOpacity: 40 },
+      });
+
+      const viewModel = mapHeader(header);
+
+      expect(viewModel.backgroundStyle.backgroundColor).toBeUndefined();
+    });
+
+    test.each([100, 30])(
+      'backgroundOpacity %i never leaks into the rendered style, and CSS opacity is never set (children must stay opaque)',
+      (backgroundOpacity) => {
+        const header = new PageHeaderDesktop({
+          backgroundStyle: { backgroundColor: '#ff0000', backgroundOpacity },
+        });
+
+        const viewModel = mapHeader(header);
+
+        expect(viewModel.backgroundStyle).not.toHaveProperty(
+          'backgroundOpacity',
+        );
+        expect(viewModel.backgroundStyle.opacity).toBeUndefined();
+      },
+    );
+  });
 });
 
 // The reCAPTCHA footnote colour is a raw colour anchored to the surface it sits on.

package/src/brand-page/utils/view-model.util.ts

@@ -88,9 +88,10 @@ import type {
   NavItemViewModel,
 } from '../view-models';
 import {
+  backgroundColorFromStyle,
   isTransparentColour,
   mutedTextForBackground,
-  backgroundColorFromStyle,
+  withColorOpacity,
 } from './color.util';
 import { resolveColorReference } from './color-palette.util';
 import {
@@ -1281,7 +1282,31 @@ export const mapToPageHeaderViewModel = (
             hamburgerMenuStyle,
           }),
     style: pageHeader.style,
-    backgroundStyle: pageHeader.backgroundStyle,
+    backgroundStyle: getHeaderBackgroundStyleWithOpacity(pageHeader),
+  };
+};
+
+// Folds backgroundOpacity into backgroundColor's alpha so only the container's paint fades, not its children.
+const getHeaderBackgroundStyleWithOpacity = (
+  pageHeader: PageHeaderDesktop | PageHeaderMobile,
+): BrandPageCssStyle => {
+  // Real defaults: an un-constructed maker header, or metadata older than migration-11's backfill, can lack these entirely.
+  const { backgroundOpacity = 100, ...backgroundStyle } =
+    pageHeader.backgroundStyle ?? {};
+  const { backgroundColor } = backgroundStyle;
+
+  if (
+    backgroundOpacity >= 100 ||
+    !backgroundColor ||
+    isTransparentColour(backgroundColor)
+  ) {
+    return backgroundStyle;
+  }
+
+  // withColorOpacity, not setRgbAlpha: fades a var(--palette-n) reference too.
+  return {
+    ...backgroundStyle,
+    backgroundColor: withColorOpacity(backgroundColor, backgroundOpacity / 100),
   };
 };
 

package/src/brand-page/view-models.ts

@@ -259,9 +259,11 @@ export interface PageHeaderViewModel extends Omit<
   | 'logoTemplateImage'
   | 'logoImageHeight'
   | 'logoImageWidth'
+  | 'backgroundStyle'
 > {
   logo: LogoViewModel;
   pages: PageViewModel[];
+  backgroundStyle: BrandPageCssStyle;
 }
 
 export interface PageFooterViewModel extends Omit<

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.ts

@@ -48,7 +48,11 @@ import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import type { ShopConfigData } from '@brand-page/models/shop.model';
 import { useProductConfigStore } from '@brand-page-maker/stores/product-config/product-config-store';
-import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
+import {
+  useEventTracker,
+  UPGRADE_CTA_LOCATIONS,
+  PREVIEW_CTA_LOCATIONS,
+} from '../../composables/useEventTracker';
 import { commonTr } from '@src/composables/useTranslate';
 import { useSnapshot } from '../../../composables/useSnapshot';
 import { usePageNavigationStore } from '@src/shared/page-navigation/store/page-navigation-store';
@@ -460,6 +464,10 @@ export default defineComponent({
       this.$emit(EVENTS.Back);
     },
     onPreview() {
+      // Every click is counted, before the gating below — the modal-open event
+      // fires separately, so click → open reads as a funnel.
+      useEventTracker().sendPreviewClickEvent(PREVIEW_CTA_LOCATIONS.MAKER);
+
       // The preview frames a SAVED, owned draft. A signed-out customer can't have
       // one, and the save needs an owner — so sign-in comes first, via the host's
       // Save Progress flow.

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.preview-gate.test.ts

@@ -1,6 +1,11 @@
-import { describe, test, expect, vi } from 'vitest';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
 import BrandPageMakerMixin from './BrandPageMaker.mixin';
 import { EVENTS } from '../../../constants/brand-page-maker';
+import {
+  useEventTracker,
+  EVENTS as TRACKER_EVENTS,
+  PREVIEW_CTA_LOCATIONS,
+} from '@brand-page-maker/composables/useEventTracker';
 
 // The preview frames a SAVED, owned draft, so who saves it decides when the modal
 // may open. Signed out: nobody owns a draft, so hand off to the host's Save Progress
@@ -68,6 +73,38 @@ describe('BrandPageMaker.onPreview', () => {
   });
 });
 
+describe('BrandPageMaker.onPreview click analytics', () => {
+  const received: { name: string; props: any }[] = [];
+
+  useEventTracker().subscribe((event) =>
+    received.push({ name: event.eventName, props: event.eventProps }),
+  );
+
+  beforeEach(() => {
+    received.length = 0;
+  });
+
+  // The click is counted before the sign-in/save gating, so every branch —
+  // including ones where the modal never opens — reports the same event.
+  test.each([
+    ['signed out', { isUserAuthenticated: false }],
+    [
+      'pre-purchase',
+      { containerStore: { isPrePurchase: true, livePreviewUrl: undefined } },
+    ],
+    ['post-purchase', {}],
+  ])('every click is counted: %s', (_, overrides) => {
+    onPreview.call(createContext(overrides as any));
+
+    expect(received).toEqual([
+      {
+        name: TRACKER_EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_CLICK,
+        props: { cta_location: PREVIEW_CTA_LOCATIONS.MAKER },
+      },
+    ]);
+  });
+});
+
 describe('BrandPageMaker livePreviewUrl watcher', () => {
   test('opens the preview once the host save hands back a URL', () => {
     const context = createContext({

package/src/brand-page-maker/components/preview-modal/PreviewModalWithState.test.ts

@@ -7,6 +7,12 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
 } from '@brand-page-maker/stores';
+import {
+  useEventTracker,
+  EVENTS,
+  PREVIEW_CTA_LOCATIONS,
+  PREVIEW_MODAL_CONTINUATION_EVENTS,
+} from '@brand-page-maker/composables/useEventTracker';
 
 const PREVIEW_URL = 'https://brand.site/_p/request?token=signed';
 
@@ -243,4 +249,121 @@ describe('PreviewModalWithState', () => {
 
     expect(wrapper.emitted('edit')).toHaveLength(1);
   });
+
+  describe('analytics', () => {
+    const received: { name: string; props: any }[] = [];
+
+    useEventTracker().subscribe((event) =>
+      received.push({ name: event.eventName, props: event.eventProps }),
+    );
+
+    const openModal = async (props: Record<string, unknown> = {}) => {
+      vi.spyOn(containerStore, 'saveBrandPage').mockResolvedValue({
+        saved: true,
+        canPublish: true,
+      } as any);
+      vi.spyOn(containerStore, 'showSaveSuccessMessage').mockResolvedValue(
+        undefined,
+      );
+      vi.spyOn(
+        useBrandPageMakerStore(),
+        'showNextNotificationMessage',
+      ).mockResolvedValue(undefined);
+
+      const wrapper = shallowMount(PreviewModalWithState, {
+        props: { visible: false, ...props },
+      });
+
+      await wrapper.setProps({ visible: true });
+      await flushPromises();
+
+      return wrapper;
+    };
+
+    beforeEach(() => {
+      received.length = 0;
+    });
+
+    test('opening fires the modal event, stamped with the editor surface by default', async () => {
+      await openModal();
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: {
+            cta_location: PREVIEW_CTA_LOCATIONS.MAKER,
+            continuation: null,
+          },
+        },
+      ]);
+    });
+
+    test('the hosting surface stamps its own cta_location', async () => {
+      await openModal({ ctaLocation: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE });
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: {
+            cta_location: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE,
+            continuation: null,
+          },
+        },
+      ]);
+    });
+
+    test.each([
+      ['close', PREVIEW_MODAL_CONTINUATION_EVENTS.EXIT],
+      // On the editor (cta=publish, the default) the button reads "Back to Editor".
+      ['edit', PREVIEW_MODAL_CONTINUATION_EVENTS.BACK_TO_EDITOR],
+      ['publish', PREVIEW_MODAL_CONTINUATION_EVENTS.PUBLISH],
+    ])('%s continues the modal event as %s', async (emitName, continuation) => {
+      const wrapper = await openModal();
+
+      received.length = 0;
+      await wrapper.findComponent(LivePreviewModal).vm.$emit(emitName);
+      await flushPromises();
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: { cta_location: PREVIEW_CTA_LOCATIONS.MAKER, continuation },
+        },
+      ]);
+    });
+
+    // The manage page's button reads "Edit" (cta=edit), so its continuation is
+    // edit — the editor's back_to_editor case is covered above.
+    test('continuations carry the hosting surface and its label', async () => {
+      const wrapper = await openModal({
+        cta: 'edit',
+        ctaLocation: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE,
+      });
+
+      received.length = 0;
+      await wrapper.findComponent(LivePreviewModal).vm.$emit('edit');
+      await flushPromises();
+
+      expect(received).toEqual([
+        {
+          name: EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL,
+          props: {
+            cta_location: PREVIEW_CTA_LOCATIONS.MANAGE_WEBSITE,
+            continuation: PREVIEW_MODAL_CONTINUATION_EVENTS.EDIT,
+          },
+        },
+      ]);
+    });
+
+    // Retry re-runs the save, it isn't a decision about the preview — not tracked.
+    test('retry is not tracked', async () => {
+      const wrapper = await openModal();
+
+      received.length = 0;
+      await wrapper.findComponent(LivePreviewModal).vm.$emit('retry');
+      await flushPromises();
+
+      expect(received).toEqual([]);
+    });
+  });
 });

package/src/brand-page-maker/components/preview-modal/PreviewModalWithState.vue

@@ -27,18 +27,26 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
 } from '@brand-page-maker/stores';
+import {
+  useEventTracker,
+  PREVIEW_CTA_LOCATIONS,
+  PREVIEW_MODAL_CONTINUATION_EVENTS,
+} from '@brand-page-maker/composables/useEventTracker';
 import type { UiDeviceMode } from '@shared/models';
 
 const props = defineProps({
   visible: { type: Boolean, default: false },
   // Per-surface header CTA; defaults to 'publish' so the editor is unchanged.
   cta: { type: String as PropType<LivePreviewCta>, default: 'publish' },
+  // Which surface hosts the preview — stamped on its analytics as cta_location.
+  ctaLocation: { type: String, default: PREVIEW_CTA_LOCATIONS.MAKER },
 });
 
 const emit = defineEmits<{ close: []; publish: []; edit: [] }>();
 
 const containerStore = useBrandPageContainerStore();
 const makerStore = useBrandPageMakerStore();
+const eventTracker = useEventTracker();
 
 // The preview must step back for any modal opening over the editor.
 const isFlowModalOpen = computed(() => containerStore.isAnyModalVisible);
@@ -96,18 +104,34 @@ const announceExit = async (): Promise<void> => {
 };
 
 const onClose = async (): Promise<void> => {
+  // Escape funnels through the shell's close emit too, so it counts as an exit.
+  eventTracker.sendPreviewModalContinuationEvent(
+    PREVIEW_MODAL_CONTINUATION_EVENTS.EXIT,
+    props.ctaLocation,
+  );
   emit('close');
 
   await announceExit();
 };
 
 const onEdit = async (): Promise<void> => {
+  // Mirror the rendered label: cta=publish shows "Back to Editor", else "Edit".
+  eventTracker.sendPreviewModalContinuationEvent(
+    props.cta === 'publish'
+      ? PREVIEW_MODAL_CONTINUATION_EVENTS.BACK_TO_EDITOR
+      : PREVIEW_MODAL_CONTINUATION_EVENTS.EDIT,
+    props.ctaLocation,
+  );
   emit('edit');
 
   await announceExit();
 };
 
 const onPublish = (): void => {
+  eventTracker.sendPreviewModalContinuationEvent(
+    PREVIEW_MODAL_CONTINUATION_EVENTS.PUBLISH,
+    props.ctaLocation,
+  );
   // Route through the host's publish flow so pre-purchase still reaches checkout.
   publishing.value = true;
   emit('publish');
@@ -117,6 +141,7 @@ watch(
   () => props.visible,
   (isVisible) => {
     if (isVisible) {
+      eventTracker.sendPreviewModalOpenEvent(props.ctaLocation);
       openPreview();
     } else {
       previewUrl.value = '';

package/src/brand-page-maker/composables/useEventTracker.ts

@@ -74,6 +74,24 @@ export const EVENTS = {
   WEBSITE_MAKER_REDO: 'website_maker_redo',
   WEBSITE_MAKER_HISTORY_CAPPED: 'website_maker_history_capped',
   WEBSITE_MAKER_HISTORY_OVERSIZED: 'website_maker_history_oversized',
+  WEBSITE_MAKER_LIVE_PREVIEW_CLICK: 'website_maker_live_preview_click',
+  WEBSITE_MAKER_LIVE_PREVIEW_MODAL: 'website_maker_live_preview_modal',
+};
+
+// The global `location` prop already means pre/post purchase, so the surface a
+// preview was launched from rides on cta_location, reusing existing values.
+export const PREVIEW_CTA_LOCATIONS = {
+  MAKER: 'maker',
+  MANAGE_WEBSITE: 'manage_website',
+};
+
+export const PREVIEW_MODAL_CONTINUATION_EVENTS = {
+  EXIT: 'exit',
+  // The same button reads "Back to Editor" on the editor and "Edit" on other
+  // surfaces — the continuation mirrors the label the user actually clicked.
+  BACK_TO_EDITOR: 'back_to_editor',
+  EDIT: 'edit',
+  PUBLISH: 'publish',
 };
 
 export const SELECT_LOCATIONS = {
@@ -426,6 +444,29 @@ const useEventTracker = () => {
         is_enabled: isEnabled,
       });
     },
+    // Live preview: the click is tracked separately from the modal opening —
+    // sign-in/save gating means a click doesn't always open the modal, and the
+    // post-sign-in return trip opens it without a click.
+    sendPreviewClickEvent: (ctaLocation: string) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_CLICK, {
+        cta_location: ctaLocation,
+      });
+    },
+    sendPreviewModalOpenEvent: (ctaLocation: string) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL, {
+        cta_location: ctaLocation,
+        continuation: null,
+      });
+    },
+    sendPreviewModalContinuationEvent: (
+      continuation: string,
+      ctaLocation: string,
+    ) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_LIVE_PREVIEW_MODAL, {
+        cta_location: ctaLocation,
+        continuation,
+      });
+    },
     // Undo / Redo (BP-5506)
     sendUndoEvent: (props: {
       entries_count: number;

package/src/bundles/bundled-translations.de-DE.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Kopfzeilen-Einstellungen",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
+    "backgroundOpacity": "Hintergrunddeckkraft",
     "buttonSectionTitle": "Schaltfläche",
     "footerSettings": "Fußzeilen-Einstellungen",
     "managePages": "Seiten verwalten",

package/src/bundles/bundled-translations.es-ES.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Configuración del encabezado",
     "navigationSectionTitle": "Navegación",
     "headerSectionTitle": "Encabezado",
+    "backgroundOpacity": "Opacidad del fondo",
     "buttonSectionTitle": "Botón",
     "footerSettings": "Configuración del pie de página",
     "managePages": "Gestionar páginas",

package/src/bundles/bundled-translations.fr-CA.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
+    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

package/src/bundles/bundled-translations.fr-FR.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Paramètres d'en-tête",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "En-tête",
+    "backgroundOpacity": "Opacité de l'arrière-plan",
     "buttonSectionTitle": "Bouton",
     "footerSettings": "Paramètres de pied de page",
     "managePages": "Gérer les pages",

package/src/bundles/bundled-translations.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Header Settings",
     "navigationSectionTitle": "Navigation",
     "headerSectionTitle": "Header",
+    "backgroundOpacity": "Background opacity",
     "buttonSectionTitle": "Button",
     "footerSettings": "Footer Settings",
     "managePages": "Manage Pages",

package/src/bundles/bundled-translations.pt-BR.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Configurações do cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
+    "backgroundOpacity": "Opacidade do plano de fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerenciar páginas",

package/src/bundles/bundled-translations.pt-PT.json

@@ -1841,6 +1841,7 @@
     "headerSettings": "Definições de cabeçalho",
     "navigationSectionTitle": "Navegação",
     "headerSectionTitle": "Cabeçalho",
+    "backgroundOpacity": "Opacidade do fundo",
     "buttonSectionTitle": "Botão",
     "footerSettings": "Definições de rodapé",
     "managePages": "Gerir páginas",