@designcrowd/library.brand-page 6.2.0 → 6.2.1

package/src/shared/page-settings/components/page-settings-section-styles/HeaderDisplayStyle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="options.length > 1" class="tw-mb-2">
+  <div v-if="isPickerVisible" class="tw-mb-2">
     <p
       class="tw-font-sans tw-font-bold tw-text-secondary-800 tw-text-sm tw-mb-2"
     >
@@ -23,10 +23,12 @@ import { HEADER_DISPLAY_STYLE_CONFIGS } from '@brand-page';
 import {
   HEADER_DISPLAY,
   NAVIGATION_DISPLAY,
+  VIEWPORTS,
   type ViewportsType,
 } from '@brand-page';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores';
+import { usePageNavigationStore } from '../../../page-navigation/store/page-navigation-store';
 import { useUiPageSettingsStore } from '../../store';
 import { tr } from '@src/composables/useTranslate';
 
@@ -36,12 +38,36 @@ interface Props {
   navigationDisplayType: string;
   isLogoVisible: boolean;
   viewport: ViewportsType;
+  showHeaderButton?: boolean;
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  showHeaderButton: false,
+});
 
 const brandPageMakerStore = useBrandPageMakerStore();
 const pageSettingsStore = useUiPageSettingsStore();
 
+const pageNavigationStore = usePageNavigationStore();
+
+// Desktop no-logo with the button on: nothing left to choose when the variants only
+// differ by where they'd put things that aren't there. Hamburger — icon + button are
+// pinned to the right regardless. Bar nav — only once the nav itself is hidden (no
+// visible pages), where the button holds the right edge in every variant.
+const isHidden = computed((): boolean => {
+  if (
+    !props.showHeaderButton ||
+    props.viewport !== VIEWPORTS.desktop ||
+    props.isLogoVisible
+  ) {
+    return false;
+  }
+
+  return (
+    props.navigationDisplayType.includes('hamburger') ||
+    !pageNavigationStore.hasVisibleNavigation
+  );
+});
+
 const options = computed(() => {
   let filteredConfigs = HEADER_DISPLAY_STYLE_CONFIGS.filter((config) => {
     return (
@@ -72,13 +98,16 @@ const options = computed(() => {
     }
   }
 
-  const filteredOptions = filteredConfigs.reduce((arr, config, _index) => {
-    config.option.isSelected = props.displayStyle === config.option.value;
-
-    arr.push(config.option);
-
-    return arr;
-  }, [] as ButtonGroupOption[]);
+  // Copy before setting isSelected — the config object is shared app-wide.
+  const filteredOptions: ButtonGroupOption[] = filteredConfigs.map(
+    (config) => ({
+      ...config.option,
+      isSelected: props.displayStyle === config.option.value,
+      ...(props.showHeaderButton && config.withButtonIconName
+        ? { iconName: config.withButtonIconName }
+        : {}),
+    }),
+  );
 
   const selectedOption = filteredOptions.find((x) => x.isSelected);
 
@@ -176,6 +205,16 @@ const options = computed(() => {
   return filteredOptions;
 });
 
+const isPickerVisible = computed((): boolean => {
+  // Read `options` FIRST and unconditionally: building it also migrates a stored display
+  // style that no longer fits (e.g. the logo was switched off) to its supported equivalent.
+  // Short-circuiting past it leaves the header rendering an unsupported style — a with-logo
+  // style with no logo collapses the band and its pinned button hangs out of the header.
+  const hasStylesToChooseFrom = options.value.length > 1;
+
+  return hasStylesToChooseFrom && !isHidden.value;
+});
+
 const numOfColumns = computed(() => {
   if (options.value.length === 3) {
     return 3;

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.header-button.test.ts

@@ -0,0 +1,114 @@
+import { setLocaleAsync } from '@src/composables/useTranslate';
+import { describe, test, expect, beforeEach } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+import { VIEWPORTS } from '@brand-page';
+import type { HeaderButton } from '@brand-page';
+import mixin from './PageSettingsSectionStyles.mixin';
+import { useUiPageSettingsStore } from '@shared/page-settings/store';
+
+// The button is configured once but must land on BOTH viewports; tested against a hand-built context wired to the real store.
+const { onHeaderButtonChange } = (
+  mixin as unknown as {
+    methods: {
+      onHeaderButtonChange(this: unknown, patch: Partial<HeaderButton>): void;
+    };
+  }
+).methods;
+
+describe('PageSettingsSectionStyles.mixin onHeaderButtonChange', () => {
+  // the seed's "Contact Us" text resolves through i18n
+  beforeAll(async () => {
+    await setLocaleAsync('en-US');
+  });
+
+  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    pageSettingsStore = useUiPageSettingsStore();
+  });
+
+  const headers = () => pageSettingsStore.sections.header;
+
+  // The panel reads/patches the current viewport (desktop here).
+  const context = () => ({
+    pageSettingsStore,
+    headerButton: headers()[VIEWPORTS.desktop].headerButton,
+  });
+
+  const change = (patch: Partial<HeaderButton>) =>
+    onHeaderButtonChange.call(context(), patch);
+
+  test('the first write seeds a full button on both viewports', () => {
+    change({ isVisible: true });
+
+    expect(headers()[VIEWPORTS.desktop].headerButton).toEqual({
+      isVisible: true,
+      text: 'Contact Us',
+      buttonLinkType: 'url',
+    });
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+  });
+
+  test('off by default — nothing is seeded until something is written', () => {
+    expect(headers()[VIEWPORTS.desktop].headerButton).toBeUndefined();
+    expect(headers()[VIEWPORTS.mobile].headerButton).toBeUndefined();
+  });
+
+  test('later writes patch one key and still land on both viewports', () => {
+    change({ isVisible: true });
+    change({ text: 'Book now' });
+    change({ buttonLinkType: 'tel', url: '12345-6789' });
+
+    const expected: HeaderButton = {
+      isVisible: true,
+      text: 'Book now',
+      buttonLinkType: 'tel',
+      url: '12345-6789',
+    };
+
+    expect(headers()[VIEWPORTS.desktop].headerButton).toEqual(expected);
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(expected);
+  });
+
+  test('each viewport holds its own object, not a shared reference', () => {
+    change({ isVisible: true });
+
+    expect(headers()[VIEWPORTS.mobile].headerButton).not.toBe(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+  });
+
+  test('a viewport that somehow diverged is reconciled by the next write', () => {
+    change({ isVisible: true, text: 'Contact' });
+
+    headers()[VIEWPORTS.mobile].headerButton = {
+      isVisible: false,
+      text: 'stale',
+      buttonLinkType: 'url',
+    };
+
+    change({ text: 'Contact us' });
+
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+    expect(headers()[VIEWPORTS.mobile].headerButton?.text).toBe('Contact us');
+  });
+
+  test('toggling off keeps the config, only flipping isVisible', () => {
+    change({ isVisible: true, text: 'Contact us' });
+    change({ isVisible: false });
+
+    expect(headers()[VIEWPORTS.desktop].headerButton).toEqual({
+      isVisible: false,
+      text: 'Contact us',
+      buttonLinkType: 'url',
+    });
+    expect(headers()[VIEWPORTS.mobile].headerButton).toEqual(
+      headers()[VIEWPORTS.desktop].headerButton,
+    );
+  });
+});

package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts

@@ -9,6 +9,7 @@ import type {
   PageSettingsFontSettingsOption,
 } from '../../models';
 import type {
+  HeaderButton,
   LogoTheme,
   NavigationDisplayType,
   NavigationType,
@@ -27,6 +28,7 @@ import type {
   BackgroundColorStyle,
 } from '@brand-page';
 import {
+  BUTTON_LINK_TYPE,
   LOGO_SLIDER_DESKTOP_MAX,
   LOGO_SLIDER_DESKTOP_MIN,
   LOGO_SLIDER_MOBILE_MAX,
@@ -60,7 +62,14 @@ import {
 } from '@shared/logo-settings/store';
 import { FabricRenderClient } from '../../../../clients/fabric-render-client';
 import { parseLogoThemeToCssStyles } from '@brand-page/utils';
-import { commonTr } from '@src/composables/useTranslate';
+import { commonTr, pageSettingsSectionTr } from '@src/composables/useTranslate';
+
+// Starting values for a brand-new button; real "Contact Us" text so the label is never empty.
+const newHeaderButton = (): HeaderButton => ({
+  isVisible: false,
+  text: pageSettingsSectionTr('buttonLabelPlaceholder'),
+  buttonLinkType: BUTTON_LINK_TYPE.url,
+});
 
 const viewportsWithTr = () => [
   {
@@ -162,6 +171,12 @@ export default defineComponent({
     header(): PageHeaderDesktop | PageHeaderMobile {
       return this.sections[PAGE_SECTIONS.header][this.viewport];
     },
+    headerButton(): HeaderButton | undefined {
+      return this.header.headerButton;
+    },
+    isHeaderButtonVisible(): boolean {
+      return this.headerButton?.isVisible === true;
+    },
     navigationType(): NavigationType {
       return getNavigationType(this.navigation.displayType);
     },
@@ -451,6 +466,28 @@ export default defineComponent({
       });
     },
 
+    onHeaderButtonChange(patch: Partial<HeaderButton>) {
+      const value: HeaderButton = {
+        ...newHeaderButton(),
+        ...this.headerButton,
+        ...patch,
+      };
+
+      // Write the whole button to BOTH viewports (own copy each) so they always match.
+      this.pageSettingsStore.setPageSettingsSectionValue({
+        sectionName: PAGE_SECTIONS.header,
+        propName: 'headerButton',
+        value: { ...value },
+        viewport: VIEWPORTS.mobile,
+      });
+      this.pageSettingsStore.setPageSettingsSectionValue({
+        sectionName: PAGE_SECTIONS.header,
+        propName: 'headerButton',
+        value: { ...value },
+        viewport: VIEWPORTS.desktop,
+      });
+    },
+
     onItemListIntentImageReplace(
       name: PageSectionStyleOption,
       { index }: { index: number },

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.de-DE.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.es-ES.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.fr-CA.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.fr-FR.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.pt-BR.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

package/src/shared/page-settings/components/page-settings-section-styles/i18n/page-settings-section.pt-PT.json

@@ -8,6 +8,11 @@
     "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"
   }
 }

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

@@ -12,6 +12,7 @@ import {
 import type { NavigationType } from '@brand-page';
 import type {
   Content,
+  HeaderButton,
   ImageGalleryItem,
   LinksItem,
   LogoImageModel,
@@ -242,6 +243,7 @@ export const useUiPageSettingsStore = defineStore('uiPageSettings', {
         | LinksItem[]
         | BrandPageCssStyle
         | Partial<ImageGalleryItem>
+        | HeaderButton
         | number
         | null
         | undefined;