@designcrowd/library.brand-page 6.2.0 → 6.2.2-live-preview-1

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

@@ -1856,7 +1856,9 @@
     "showPage": "Seite anzeigen",
     "hidePage": "Seite ausblenden",
     "delete": "Seite löschen",
-    "addSubPage": "Unterseite hinzufügen"
+    "addSubPage": "Unterseite hinzufügen",
+    "duplicatePage": "Seite duplizieren",
+    "duplicatePageTitle": "{{title}} Kopieren"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Navigation unter dem Logo anzeigen",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Symbol-Stil",
     "logoSize": "Logogröße",
     "socialLinks": "Social-Media-Links",
-    "copyright": "Copyright"
+    "copyright": "Copyright",
+    "buttonLabel": "Etikett",
+    "buttonLabelPlaceholder": "Kontakt",
+    "buttonLink": "Link",
+    "buttonFillColor": "Füllfarbe",
+    "buttonBorderColor": "Randfarbe"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Suche",

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

@@ -1856,7 +1856,9 @@
     "showPage": "Mostrar página",
     "hidePage": "Ocultar página",
     "delete": "Eliminar página",
-    "addSubPage": "Añadir subpágina"
+    "addSubPage": "Añadir subpágina",
+    "duplicatePage": "Duplicar página",
+    "duplicatePageTitle": "{{title}} copia"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Muestra la navegación debajo del logo",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Estilo de icono",
     "logoSize": "Tamaño del logo",
     "socialLinks": "Enlaces a redes sociales",
-    "copyright": "Derechos de autor"
+    "copyright": "Derechos de autor",
+    "buttonLabel": "Etiqueta",
+    "buttonLabelPlaceholder": "Contacto",
+    "buttonLink": "Enlace",
+    "buttonFillColor": "Color de relleno",
+    "buttonBorderColor": "Color del borde"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Buscar",

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

@@ -1856,7 +1856,9 @@
     "showPage": "Afficher la page",
     "hidePage": "Masquez la page",
     "delete": "Supprimer la page",
-    "addSubPage": "Ajouter une sous-page"
+    "addSubPage": "Ajouter une sous-page",
+    "duplicatePage": "Dupliquer la page",
+    "duplicatePageTitle": "{{title}} Copie"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Afficher la navigation sous le logo",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Style d'icône",
     "logoSize": "Taille du logo",
     "socialLinks": "Liens vers les réseaux sociaux",
-    "copyright": "Droits d’auteur"
+    "copyright": "Droits d’auteur",
+    "buttonLabel": "Étiquette",
+    "buttonLabelPlaceholder": "Nous joindre",
+    "buttonLink": "Lien",
+    "buttonFillColor": "Couleur de remplissage",
+    "buttonBorderColor": "Couleur de bordure"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Rechercher",

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

@@ -1856,7 +1856,9 @@
     "showPage": "Afficher la page",
     "hidePage": "Masquez la page",
     "delete": "Supprimer la page",
-    "addSubPage": "Ajouter une sous-page"
+    "addSubPage": "Ajouter une sous-page",
+    "duplicatePage": "Dupliquer la page",
+    "duplicatePageTitle": "Copie de {{title}}"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Afficher la navigation sous le logo",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Style d'icône",
     "logoSize": "Taille du logo",
     "socialLinks": "Liens vers les réseaux sociaux",
-    "copyright": "Droits d’auteur"
+    "copyright": "Droits d’auteur",
+    "buttonLabel": "Étiquette",
+    "buttonLabelPlaceholder": "Contactez-nous",
+    "buttonLink": "Lien",
+    "buttonFillColor": "Couleur de remplissage",
+    "buttonBorderColor": "Couleur de bordure"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Rechercher",

package/src/bundles/bundled-translations.json

@@ -1856,7 +1856,9 @@
     "showPage": "Show page",
     "hidePage": "Hide page",
     "delete": "Delete page",
-    "addSubPage": "Add subpage"
+    "addSubPage": "Add subpage",
+    "duplicatePage": "Duplicate page",
+    "duplicatePageTitle": "{{title}} Copy"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Show navigation below logo",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Icon style",
     "logoSize": "Logo Size",
     "socialLinks": "Social Links",
-    "copyright": "Copyright"
+    "copyright": "Copyright",
+    "buttonLabel": "Label",
+    "buttonLabelPlaceholder": "Contact Us",
+    "buttonLink": "Link",
+    "buttonFillColor": "Fill color",
+    "buttonBorderColor": "Border color"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Search",

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

@@ -1856,7 +1856,9 @@
     "showPage": "Mostrar página",
     "hidePage": "Ocultar página",
     "delete": "Eliminar página",
-    "addSubPage": "Adicionar subpágina"
+    "addSubPage": "Adicionar subpágina",
+    "duplicatePage": "Duplicar página",
+    "duplicatePageTitle": "{{title}} Copiar"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Mostrar navegação abaixo do logotipo",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Estilo de ícone",
     "logoSize": "Tamanho do logotipo",
     "socialLinks": "Links de redes sociais",
-    "copyright": "Direitos autorais"
+    "copyright": "Direitos autorais",
+    "buttonLabel": "Rótulo",
+    "buttonLabelPlaceholder": "Entre em contato",
+    "buttonLink": "Link",
+    "buttonFillColor": "Cor de preenchimento",
+    "buttonBorderColor": "Cor da borda"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Pesquisar",

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

@@ -1856,7 +1856,9 @@
     "showPage": "Mostrar página",
     "hidePage": "Ocultar página",
     "delete": "Eliminar página",
-    "addSubPage": "Adicionar subpágina"
+    "addSubPage": "Adicionar subpágina",
+    "duplicatePage": "Duplicar página",
+    "duplicatePageTitle": "{{title}} Cópia"
   },
   "pageSettingsSection": {
     "showNavigationBelow": "Mostrar a navegação por baixo do logótipo",
@@ -1867,7 +1869,12 @@
     "iconStyle": "Estilo de Ícone",
     "logoSize": "Tamanho do logótipo",
     "socialLinks": "Links de redes sociais",
-    "copyright": "Direitos de autor"
+    "copyright": "Direitos de autor",
+    "buttonLabel": "Etiqueta",
+    "buttonLabelPlaceholder": "Contacte-nos",
+    "buttonLink": "Link",
+    "buttonFillColor": "Cor de preenchimento",
+    "buttonBorderColor": "Cor da borda"
   },
   "publishBrandPageModalWithState": {
     "domainSearchButtonLabel": "Pesquisar",

package/src/composables/useTranslate.ts

@@ -142,7 +142,8 @@ const productConfigOptionTr = (key) => tr(`productConfigOption.${key}`);
 const editLogoSettingsTr = (key) => tr(`editLogoSettings.${key}`);
 const myUploadSettingsTr = (key, valuesToInterpolate = {}) =>
   tr(`myUploadSettings.${key}`, valuesToInterpolate);
-const pageSettingsTr = (key) => tr(`pageSettings.${key}`);
+const pageSettingsTr = (key, valuesToInterpolate = {}) =>
+  tr(`pageSettings.${key}`, valuesToInterpolate);
 const pageSettingsSectionTr = (key) => tr(`pageSettingsSection.${key}`);
 const templateSettingsTr = (key) => tr(`templateSettings.${key}`);
 const unsplashLibraryTr = (key) => tr(`unsplashLibrary.${key}`);

package/src/metadata-builder/builders/item-id-utils.ts

@@ -10,6 +10,14 @@ export const END_ITEM_ANCHOR = '__end__';
 /** Generate a stable item id. Mirrors section-level `uuid.v4()` id generation. */
 export const generateItemId = (): string => uuidv4();
 
+/** Every array field the minifier surfaces to the AI as a list of items. */
+export const ITEM_ID_BEARING_FIELDS = [
+  'images',
+  'items',
+  'textItems',
+  'links',
+] as const;
+
 /**
  * Walk an entire BrandPageModel and backfill a stable uuid `id` onto every
  * nested array item that lacks one (gallery images, images/shapes/testimonial
@@ -23,8 +31,7 @@ export const generateItemId = (): string => uuidv4();
  */
 export const ensureBrandPageItemIds = (model: BrandPageModel): void => {
   const ensureContentItemIds = (content: Record<string, unknown>): void => {
-    // Every array field that the minifier surfaces as a list of items.
-    for (const field of ['images', 'items', 'textItems', 'links'] as const) {
+    for (const field of ITEM_ID_BEARING_FIELDS) {
       const arr = content[field];
 
       if (Array.isArray(arr)) ensureItemIds(arr as { id?: string }[]);

package/src/shared/content-settings/components/text-field/TextField.mixin.ts

@@ -1,5 +1,20 @@
 import { defineComponent } from 'vue';
 import GenericTextInputMixin from '../GenericTextInput.mixin';
+
 export default defineComponent({
   mixins: [GenericTextInputMixin],
+  props: {
+    // Opt-in: clearing the field shows its error at once, not only after blur.
+    showErrorWhenEmpty: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    value(value: string | false | undefined): void {
+      if (this.showErrorWhenEmpty && !(value || '').trim()) {
+        this.isDirty = false;
+      }
+    },
+  },
 });

package/src/shared/content-settings/components/url-field/UrlField.vue

@@ -11,6 +11,7 @@
       :icon="icon"
       :error="isErrorVisible"
       @focus="onFocusOverride"
+      @blur="onBlur"
       @input="onInputOverride"
       @keyup="onChangeOverride"
     />

package/src/shared/ecommerce-settings/components/product-config-field/ProductConfigOption.vue

@@ -96,7 +96,6 @@ const onEditProduct = (index: number) => {
     product.enableNotes,
   );
   const tempProduct = cloneDeep(shopSettingStore.getProductById(product.id));
-  console.log(tempProduct, 'tempProduct');
   productSettingStore.openModal(tempProduct);
 };
 
@@ -147,7 +146,6 @@ const onSaveProductModal = (event: {
   onItemsChange(newProductArray);
   // Update shop store
   if (event.isNewProduct) {
-    console.log(event.product, 'new product');
     shopSettingStore.addProduct(event.product);
   } else {
     shopSettingStore.updateProduct(event.product.id, event.product);

package/src/shared/ecommerce-settings/util/refreshDuplicatedMetadata.ts

@@ -24,10 +24,9 @@ export function refreshDuplicatedMetadata(
 
   model.pages.forEach((page) =>
     page.contents.forEach((content) => {
+      rotateMonetizationIds(content);
+
       if (isShopContent(content)) {
-        // Shop products collide on the global product / sku_key tables. The shop's payment-config
-        // link is written with throwaway ids (not the content id), so only the product ids rotate.
-        content.products.forEach(rotateProductIds);
         disconnectPayment(content.shopPaymentConfig);
       } else if (isPayment(content)) {
         resetPaymentBlock(content, content.requestPaymentConfig);
@@ -40,6 +39,25 @@ export function refreshDuplicatedMetadata(
   return model;
 }
 
+/**
+ * Rotate the client-minted ids the brand-page-api keys a **global** row on — shop product / sku_key
+ * and payment-option ids. A verbatim copy collides with its source on those tables.
+ *
+ * Shared with page duplication, which wants only this half: that copy keeps the same owner, so it
+ * keeps its payment connection.
+ */
+export function rotateMonetizationIds(content: Content): void {
+  if (isShopContent(content)) {
+    // The shop's payment-config link is written with throwaway ids (not the content id), so only
+    // the product ids rotate here.
+    content.products.forEach(rotateProductIds);
+  } else if (isPayment(content)) {
+    rotatePaymentOptionIds(content.requestPaymentConfig);
+  } else if (isSupportMe(content)) {
+    rotatePaymentOptionIds(content.supportMeConfig);
+  }
+}
+
 function rotateProductIds(product: ProductModel): void {
   product.id = uuid();
 
@@ -72,19 +90,23 @@ function rotateProductIds(product: ProductModel): void {
   });
 }
 
+// `brand_page_product` is keyed on the payment-option id, so a verbatim copy would adopt the
+// source's product rows on its next payment upsert.
+function rotatePaymentOptionIds(config: PaymentConfig): void {
+  config.paymentOptions.forEach((option) => {
+    option.id = uuid();
+  });
+}
+
 /**
  * request-payment / support-me content. The api keys `content_block_payment_config` on the content
- * id (PK) and `brand_page_product` on the payment-option id (PK), both global. A verbatim copy
- * would, on its next payment upsert, repoint the source's config link and adopt its product rows —
- * so rotate both to make the copy independent, then drop the connection.
+ * id (PK), so a verbatim copy would repoint the source's config link on its next payment upsert -
+ * re-mint it, then drop the connection. (The option ids are rotated upstream, for both kinds of
+ * duplication.)
  */
 function resetPaymentBlock(content: Content, config: PaymentConfig): void {
   content.id = uuid();
 
-  config.paymentOptions.forEach((option) => {
-    option.id = uuid();
-  });
-
   disconnectPayment(config);
 }
 

package/src/shared/page-navigation/store/page-navigation-store.ts

@@ -38,13 +38,13 @@ const findParentRouteIdForRouteId = (
   return undefined;
 };
 
-// This function will find all the page slugs that exist at the depth that we're modifying, this way, we can avoid duplication of page slugs
-// This will help support the use of similar named routes, e.g /home/home-1 and /my-home/home-1
-const getPageSlugsForCurrentDepth = (
+// Routes at one depth. Slugs and titles only need to be unique among siblings,
+// so /home/home-1 and /my-home/home-1 can coexist.
+const getRoutesForCurrentDepth = (
   navModel: NavModel,
   parentRouteId?: string,
   excludeRouteId?: string,
-): string[] => {
+): NavRoute[] => {
   let ordersAtDepth: NavOrder[];
 
   if (!parentRouteId) {
@@ -60,14 +60,21 @@ const getPageSlugsForCurrentDepth = (
 
   const routeIdsAtDepth = ordersAtDepth.map((order) => order.routeId);
 
-  return navModel.routes
-    .filter(
-      (route) =>
-        routeIdsAtDepth.includes(route.id) && route.id !== excludeRouteId,
-    )
-    .map((route) => route.pageSlug);
+  return navModel.routes.filter(
+    (route) =>
+      routeIdsAtDepth.includes(route.id) && route.id !== excludeRouteId,
+  );
 };
 
+const getPageSlugsForCurrentDepth = (
+  navModel: NavModel,
+  parentRouteId?: string,
+  excludeRouteId?: string,
+): string[] =>
+  getRoutesForCurrentDepth(navModel, parentRouteId, excludeRouteId).map(
+    (route) => route.pageSlug,
+  );
+
 export const usePageNavigationStore = defineStore('pageNavigation', {
   state: (): PageNavigationState => ({
     routes: [],
@@ -81,11 +88,32 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
         orders: this.orders,
       });
     },
+    // Mirrors the renderer's hasVisibleNavigation (route.util.ts) on the maker's nav state:
+    // the header shows a nav for >1 visible top-level page, or 1 with a visible subpage.
+    hasVisibleNavigation(): boolean {
+      const isVisible = (order: NavOrder): boolean => {
+        const route = this.routes.find((r) => r.id === order.routeId);
+
+        return route !== undefined && !route.isHidden;
+      };
+      const visibleOrders = this.orders.filter(isVisible);
+
+      return (
+        visibleOrders.length > 1 ||
+        (visibleOrders.length === 1 &&
+          visibleOrders[0].subRoutes.some(isVisible))
+      );
+    },
   },
   actions: {
     getPageSlugsForDepth(parentRouteId?: string): string[] {
       return getPageSlugsForCurrentDepth(this.nav, parentRouteId);
     },
+    getDisplayNamesForDepth(parentRouteId?: string): string[] {
+      return getRoutesForCurrentDepth(this.nav, parentRouteId).map(
+        (route) => route.displayName,
+      );
+    },
     getParentRouteIdForPage(pageId: string): string | undefined {
       const route = this.routes.find((r) => r.pageId === pageId);
 
@@ -127,12 +155,28 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
       this.routes = nav.routes;
       this.orders = nav.orders;
     },
-    addNavRoute(newRoute: NavRoute, parentRouteId?: string): void {
+    addNavRoute(
+      newRoute: NavRoute,
+      parentRouteId?: string,
+      insertAfterRouteId?: string,
+    ): void {
       const newOrder: NavOrder = {
         routeId: newRoute.id,
         subRoutes: [],
       };
 
+      const addToSiblings = (siblings: NavOrder[]): void => {
+        const afterIndex = insertAfterRouteId
+          ? siblings.findIndex((order) => order.routeId === insertAfterRouteId)
+          : -1;
+
+        if (afterIndex === -1) {
+          siblings.push(newOrder);
+        } else {
+          siblings.splice(afterIndex + 1, 0, newOrder);
+        }
+      };
+
       if (parentRouteId) {
         // Find where to insert the new route into order
         const parentOrder = findParentOrderByRouteId(
@@ -141,7 +185,7 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
         );
 
         if (parentOrder) {
-          parentOrder.subRoutes.push(newOrder);
+          addToSiblings(parentOrder.subRoutes);
         } else {
           console.error(
             `Parent route with id ${parentRouteId} not found in nav orders.`,
@@ -149,7 +193,7 @@ export const usePageNavigationStore = defineStore('pageNavigation', {
         }
       } else {
         // Push to root of orders object as this is not a nested route
-        this.orders.push(newOrder);
+        addToSiblings(this.orders);
       }
 
       this.routes.push(newRoute);

package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.button-section.test.ts

@@ -0,0 +1,131 @@
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { shallowMount } from '@vue/test-utils';
+import { Toggle } from '@designcrowd/fe-shared-lib';
+import type { LogoTheme } from '@brand-page';
+import { VIEWPORTS } from '@brand-page';
+import HeaderSettingsPanel from './HeaderSettingsPanel.vue';
+import HeaderButtonSettings from '../page-settings-section-styles/HeaderButtonSettings.vue';
+import { useUiPageSettingsStore } from '../../store';
+import { FabricRenderClient } from '../../../../clients/fabric-render-client';
+
+// Button section: brandsite-only, header toggle shows/hides the fields, writes sync both viewports.
+describe('HeaderSettingsPanel — Button section', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    // The Logo section renders alongside and needs the client singleton.
+    FabricRenderClient.setInstance({ baseUrl: 'http://localhost:3000' });
+  });
+
+  const CollapsiblePanelStub = {
+    template: '<div><slot name="header-actions" /><slot /></div>',
+  };
+
+  const mountPanel = (isBrandSite: boolean) =>
+    shallowMount(HeaderSettingsPanel, {
+      props: {
+        isAdminMaker: false,
+        isBrandSite,
+        logoTheme: {} as LogoTheme,
+        sectionName: 'header',
+        styleOptions: [],
+      },
+      global: {
+        // Render CollapsiblePanel slots so the toggle and body aren't swallowed.
+        stubs: { CollapsiblePanel: CollapsiblePanelStub },
+      },
+    });
+
+  const buttonToggle = (wrapper: ReturnType<typeof mountPanel>) =>
+    wrapper
+      .findAllComponents(Toggle)
+      .find(
+        (t) => t.attributes('data-test-header-button-toggle') !== undefined,
+      );
+
+  test('brandsite: the header toggle renders, off, and the fields stay hidden', () => {
+    const wrapper = mountPanel(true);
+
+    expect(buttonToggle(wrapper)).toBeDefined();
+    // the stubbed Toggle carries its props as attributes
+    expect(buttonToggle(wrapper)?.attributes('model-value')).toBe('false');
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+  });
+
+  test('brand page / brand contact: no Button section at all', () => {
+    const wrapper = mountPanel(false);
+
+    expect(buttonToggle(wrapper)).toBeUndefined();
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+  });
+
+  test('toggling on writes isVisible to BOTH viewports and reveals the fields', async () => {
+    const wrapper = mountPanel(true);
+
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', true);
+    await wrapper.vm.$nextTick();
+
+    const sections = useUiPageSettingsStore().sections.header;
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(sections[VIEWPORTS.mobile].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+
+  test('expanding via the chevron while off switches the button on; later collapses freely', async () => {
+    const wrapper = mountPanel(true);
+    const sectionHeader = wrapper.get(
+      '[data-test-header-button-section-header]',
+    );
+
+    // off + collapsed: expanding turns the button on and shows the fields
+    await sectionHeader.trigger('click');
+
+    const sections = useUiPageSettingsStore().sections.header;
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(sections[VIEWPORTS.mobile].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+
+    // on: the chevron only collapses/expands, never switches the button off
+    await sectionHeader.trigger('click');
+
+    expect(sections[VIEWPORTS.desktop].headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+
+    await sectionHeader.trigger('click');
+
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+
+  test('toggling off hides the fields but keeps the configuration for a re-enable', async () => {
+    const wrapper = mountPanel(true);
+
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', true);
+    // simulate a label edit, which the mixin dual-writes to both viewports
+    [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+      useUiPageSettingsStore().setPageSettingsSectionValue({
+        sectionName: 'header',
+        propName: 'headerButton',
+        value: { isVisible: true, text: 'Book now', buttonLinkType: 'url' },
+        viewport,
+      });
+    });
+    await buttonToggle(wrapper)?.vm.$emit('update:model-value', false);
+    await wrapper.vm.$nextTick();
+
+    const desktop = useUiPageSettingsStore().sections.header[VIEWPORTS.desktop];
+
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(false);
+    expect(desktop.headerButton?.isVisible).toBe(false);
+    expect(desktop.headerButton?.text).toBe('Book now');
+
+    // Toggling off also collapses, so one chevron click re-enables — no dead first click.
+    await wrapper
+      .get('[data-test-header-button-section-header]')
+      .trigger('click');
+
+    expect(desktop.headerButton?.isVisible).toBe(true);
+    expect(wrapper.findComponent(HeaderButtonSettings).exists()).toBe(true);
+  });
+});