@designcrowd/library.brand-page 6.2.16 → 6.2.17-header-logo-2

package/src/brand-page-maker/convertors/faq-display-style.convertor.ts

@@ -0,0 +1,61 @@
+import type { ButtonGroupConfig, ValueConvertor } from '../models';
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import type { FaqSectionContent } from '@brand-page/models';
+
+const ICON_VIEW_BOX = '0 0 96 56';
+
+export const faqDisplayStyleConvertor: ValueConvertor<
+  string | null,
+  ButtonGroupConfig,
+  Partial<FaqSectionContent>
+> = {
+  convertBackToMultipleValues: true,
+  convert(value: string | null): ButtonGroupConfig {
+    return {
+      options: [
+        // An empty title suppresses ButtonGroup's label-under-icon paragraph.
+        {
+          title: '',
+          value: FAQ_DISPLAY_STYLES.centered,
+          isSelected: value === FAQ_DISPLAY_STYLES.centered,
+          iconName: 'display-style-faq-1',
+          iconViewBox: ICON_VIEW_BOX,
+          dataAttribute: 'data-test-btn-faq-centered',
+        },
+        {
+          title: '',
+          value: FAQ_DISPLAY_STYLES.split,
+          isSelected: value === FAQ_DISPLAY_STYLES.split,
+          iconName: 'display-style-faq-2',
+          iconViewBox: ICON_VIEW_BOX,
+          dataAttribute: 'data-test-btn-faq-split',
+        },
+        {
+          title: '',
+          value: FAQ_DISPLAY_STYLES.grid,
+          isSelected: value === FAQ_DISPLAY_STYLES.grid,
+          iconName: 'display-style-faq-3',
+          iconViewBox: ICON_VIEW_BOX,
+          dataAttribute: 'data-test-btn-faq-grid',
+        },
+      ],
+      // Label-less buttons only fill their slot in ButtonGroup's grid mode.
+      columns: 3,
+    };
+  },
+
+  // The heading sits left beside the accordion in split, centred above it otherwise.
+  convertBack(config: ButtonGroupConfig): Partial<FaqSectionContent> {
+    const displayStyle =
+      config.options.find((v) => v.isSelected)?.value ??
+      FAQ_DISPLAY_STYLES.centered;
+    const textAlign =
+      displayStyle === FAQ_DISPLAY_STYLES.split ? 'left' : 'center';
+
+    return {
+      displayStyle,
+      titleStyle: { textAlign },
+      descriptionStyle: { textAlign },
+    };
+  },
+};

package/src/brand-page-maker/models/content-settings-configs.ts

@@ -86,6 +86,7 @@ export const ITEM_FIELD_TYPES = {
   'color-replacements': 'color-replacements',
   'testimonial-items': 'testimonial-items',
   'text-items': 'text-items',
+  'faq-items': 'faq-items',
   'page-dropdown': 'page-dropdown',
   'personalisation-override': 'personalisation-override',
 } as const;

package/src/brand-page-maker/models/content-settings.test.ts

@@ -699,6 +699,12 @@ describe('add content — every text starts on its pinned role', () => {
       descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
       buttonTextStyle: TEXT_STYLE_TYPES.button,
     },
+    'faq-section': {
+      titleStyle: TEXT_STYLE_TYPES.heading4,
+      descriptionStyle: TEXT_STYLE_TYPES.paragraph2,
+      questionStyle: TEXT_STYLE_TYPES.heading5,
+      answerStyle: TEXT_STYLE_TYPES.paragraph2,
+    },
   };
 
   // Mirrors getEnabledContentSettingsConfigs's website-type filter (the feature-flag term left out,

package/src/brand-page-maker/models/content-settings.ts

@@ -24,6 +24,7 @@ import {
   SENSITIVE_CONTENT_TYPES,
   CONTACT_FORM_LAYOUT_DEFAULT_PADDING,
   TESTIMONIAL_DEFAULT_PADDING,
+  FAQ_DISPLAY_STYLES,
 } from '@brand-page';
 import type {
   ButtonContent,
@@ -52,6 +53,7 @@ import type {
   ShopContent,
   BookingSectionContent,
   TextStyleDeclaration,
+  FaqSectionContent,
   TextStyleType,
 } from '@brand-page';
 import * as uuid from 'uuid';
@@ -683,6 +685,55 @@ export const createInitialBookingSectionContent: CreateInitialContentFunction<
   };
 };
 
+export const createInitialFaqSectionContent: CreateInitialContentFunction<
+  FaqSectionContent
+> = (options?: CreateInitialContentOptions) => {
+  const applyAutoScale = options?.brandPageType === BRAND_PAGE_TYPES.brandSite;
+
+  return {
+    id: uuid.v4(),
+    type: 'faq-section',
+    title: rteDoc(contentSettingsTr(`defaultFaqTitle`)),
+    description: rteDoc(contentSettingsTr(`defaultFaqDescription`)),
+    displayStyle: FAQ_DISPLAY_STYLES.centered,
+    topPadding: 32,
+    bottomPadding: 32,
+    // One sample item; the design's four are only there to show a longer list.
+    items: [
+      {
+        id: uuid.v4(),
+        question: rteDoc(contentSettingsTr(`defaultFaqQuestion`)),
+        answer: rteDoc(contentSettingsTr(`defaultFaqAnswer`)),
+      },
+    ],
+    // Every question shares one style and every answer another (closest to the old Headings and
+    // Paragraphs); a question's own formatting lives in its doc.
+    questionStyle: {
+      applyAutoScale,
+      textStyleType: TEXT_STYLE_TYPES.heading5,
+      textAlign: 'left',
+    },
+    answerStyle: {
+      applyAutoScale,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
+      textAlign: 'left',
+    },
+    titleStyle: {
+      applyAutoScale,
+      textStyleType: TEXT_STYLE_TYPES.heading4,
+      textAlign: 'center',
+    },
+    descriptionStyle: {
+      applyAutoScale,
+      textStyleType: TEXT_STYLE_TYPES.paragraph2,
+      textAlign: 'center',
+    },
+    backgroundStyle: {},
+    iconColor: {},
+    dividerColor: {},
+  };
+};
+
 export const createInitialImagesSectionContent: CreateInitialContentFunction<
   ImagesSectionContent
 > = (options?: CreateInitialContentOptions) => {

package/src/brand-page-maker/models/navigation-style-configs.ts

@@ -70,7 +70,6 @@ const hamburgerNavigationConfig: NavigationStyleConfig = {
   defaultButtonStyle: {},
   displayType: '' as NavigationDisplayType,
   buttonGroupOption: {} as ButtonGroupOption,
-  renderAfterLogo: false,
 };
 
 export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
@@ -113,7 +112,6 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       dataAttribute: 'data-nav-style-tab-1',
       isSelected: false,
     },
-    renderAfterLogo: false,
   },
   {
     displayType: NAVIGATION_DISPLAY.TAB_2,
@@ -151,7 +149,6 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       dataAttribute: 'data-nav-style-tab-2',
       isSelected: false,
     },
-    renderAfterLogo: false,
   },
   // hamburger
   {
@@ -164,7 +161,6 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       dataAttribute: 'data-nav-style-hamburger-1',
       isSelected: false,
     },
-    renderAfterLogo: false,
   },
   {
     ...hamburgerNavigationConfig,
@@ -176,7 +172,6 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       dataAttribute: 'data-nav-style-hamburger-2',
       isSelected: false,
     },
-    renderAfterLogo: false,
   },
   {
     ...hamburgerNavigationConfig,
@@ -188,7 +183,6 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       dataAttribute: 'data-nav-style-hamburger-3',
       isSelected: false,
     },
-    renderAfterLogo: false,
   },
   {
     ...hamburgerNavigationConfig,
@@ -200,7 +194,6 @@ export const availableNavigationStyleConfigs: NavigationStyleConfig[] = [
       dataAttribute: 'data-nav-style-hamburger-4',
       isSelected: false,
     },
-    renderAfterLogo: false,
   },
 ];
 

package/src/brand-page-maker/stores/admin-logo-settings/admin-logo-settings-store.ts

@@ -1,14 +1,12 @@
 import {
   EMPTY_LOGO_IMAGE_MODEL,
   type FabricLogoTheme,
-  type LogoContent,
   type LogoTemplateImageModel,
   type LogoTheme,
 } from '@brand-page';
 import type { TemplateSettingsTemplate } from '@shared/template-settings/models';
 import { defineStore } from 'pinia';
 import { useUiContentSettingsStore } from '@shared/content-settings/store';
-import type { ContentItem } from '@shared/content-settings/models';
 import { useUiStore } from '../ui';
 import {
   type SetSelectedLogoImagePayload,
@@ -63,53 +61,6 @@ export const useAdminLogoSettingsStore = defineStore('adminLogoSettings', {
 
       this.previewLogoTemplateModels = models;
     },
-    addLogoContent() {
-      const contentSettingsStore = useUiContentSettingsStore();
-
-      contentSettingsStore.addItemByType({
-        type: 'logo',
-        index: 0,
-      });
-
-      const selectedPreviewLogoTemplateModel = this
-        .selectedPreviewLogoTemplateToken
-        ? this.previewLogoTemplateModels.find(
-            (x) =>
-              x.logoTemplateToken === this.selectedPreviewLogoTemplateToken,
-          )
-        : this.previewLogoTemplateModels.length > 0
-          ? this.previewLogoTemplateModels[0]
-          : undefined;
-
-      if (!selectedPreviewLogoTemplateModel) {
-        console.error('unable to locate logo template model for adding logo');
-
-        return;
-      }
-
-      const selectedPreviewLogoImage =
-        logoUtil.safeGetLogoImageFromLogoImageUrl(
-          selectedPreviewLogoTemplateModel.logoImageUrl,
-        );
-
-      contentSettingsStore.items
-        .filter((i): i is ContentItem<LogoContent> => i.type === 'logo')
-        .filter((i) => !i.settings.content.logoImage.logoDraftToken)
-        .forEach((i) => {
-          const logoContent = i.settings.content;
-
-          const newLogoContent: LogoContent = Object.assign(
-            {},
-            i.settings.content,
-            { logoImage: selectedPreviewLogoImage },
-          );
-
-          contentSettingsStore.updateContent<LogoContent>({
-            id: logoContent.id,
-            content: newLogoContent,
-          });
-        });
-    },
     selectPreviewLogoTemplateModel(
       payload: SelectAdminPreviewLogoTemplateModelPayload,
     ) {

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.save.test.ts

@@ -4,7 +4,16 @@ import {
   useBrandPageContainerStore,
   useBrandPageMakerStore,
 } from '@brand-page-maker/stores';
-import { SENSITIVE_CONTENT_TYPES } from '@brand-page';
+import {
+  SENSITIVE_CONTENT_TYPES,
+  VIEWPORTS,
+  type LogoContent,
+} from '@brand-page';
+import { INITIALISE_PAYLOAD } from '@brand-page-maker/components/brand-page-maker/__fixtures__';
+import type { ContentItem } from '../../../shared/content-settings/models';
+import { PAGE_SECTIONS } from '../../../shared/page-settings/models';
+import { useUiPageSettingsStore } from '../../../shared/page-settings/store';
+import { setLocaleAsync } from '@src/composables/useTranslate';
 import brandPageClient from '../../../clients/brand-page-client';
 
 vi.mock('../../../clients/brand-page-client', () => ({
@@ -435,3 +444,72 @@ describe('settings on a never-saved site', () => {
     },
   );
 });
+
+describe('exportDesignAsync — logo draft tokens', () => {
+  let brandPageMakerStore: ReturnType<typeof useBrandPageMakerStore>;
+  let pageSettingsStore: ReturnType<typeof useUiPageSettingsStore>;
+  let containerStore: ReturnType<typeof useBrandPageContainerStore>;
+
+  beforeEach(async () => {
+    setActivePinia(createPinia());
+
+    await setLocaleAsync('en-US');
+
+    brandPageMakerStore = useBrandPageMakerStore();
+    pageSettingsStore = useUiPageSettingsStore();
+    containerStore = useBrandPageContainerStore();
+
+    await brandPageMakerStore.initialise(INITIALISE_PAYLOAD);
+  });
+
+  // The header is the logo's home; a block still on a page needs its own token
+  // saved alongside it.
+  test('includes the header token for a brand page, alongside a remaining block token', async () => {
+    [VIEWPORTS.desktop, VIEWPORTS.mobile].forEach((viewport) => {
+      pageSettingsStore.setPageSettingsSectionLogoImage({
+        sectionName: PAGE_SECTIONS.header,
+        viewport,
+        logoImage: {
+          logoDraftToken: 'header-token',
+          logoVariation: 0,
+          logoLastUpdate: undefined,
+        },
+        logoImageBase64Url: undefined,
+      });
+    });
+
+    pageSettingsStore.setPages({
+      pages: [
+        {
+          id: 'page-1',
+          title: 'Home',
+          contents: [
+            {
+              id: 'logo-1',
+              type: 'logo',
+              settings: {
+                content: {
+                  id: 'logo-1',
+                  type: 'logo',
+                  backgroundStyle: {},
+                  isLogoVisible: true,
+                  logoImage: {
+                    logoDraftToken: 'block-token',
+                    logoVariation: 0,
+                    logoLastUpdate: undefined,
+                  },
+                } as LogoContent,
+              },
+            } as ContentItem<LogoContent>,
+          ],
+        },
+      ],
+    });
+
+    const result = await containerStore.exportDesignAsync();
+
+    expect(result.logoDraftTokens).toEqual(
+      expect.arrayContaining(['header-token', 'block-token']),
+    );
+  });
+});

package/src/brand-page-maker/stores/brandpage-container/brand-page-container-store.ts

@@ -905,12 +905,13 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
           [] as LogoContent[],
         );
 
-        // brandpage doesnt utilise logo in header/footer its probably not even up to date.
-        // only use BP logo content for logo info
+        // BP/BC: the header's tokens plus any block still on a page.
         uniqueLogoDraftTokens = uniq(
-          logoContents
-            .map((x) => x.logoImage.logoDraftToken)
-            .filter((x) => !!x),
+          [
+            brandPageData.pageHeaderDesktop?.logoImage.logoDraftToken,
+            brandPageData.pageHeaderMobile?.logoImage.logoDraftToken,
+            ...logoContents.map((x) => x.logoImage.logoDraftToken),
+          ].filter((x) => !!x),
         );
       }
 

package/src/brand-page-maker/stores/brandpage-maker/__snapshots__/brandpage-maker-store.test.ts.snap

@@ -2,7 +2,6 @@
 
 exports[`brand page maker store module > brand page maker module should returns distinct brand page content type 1`] = `
 [
-  "logo",
   "profile",
   "text",
   "general-link",

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.test.ts

@@ -42,6 +42,7 @@ import {
 } from '@brand-page/utils';
 import { createPinia, setActivePinia } from 'pinia';
 import { useBrandPageMakerStore } from './index';
+import { useHistoryStore } from '../history/history-store';
 import { useUiBackgroundSettingsStore } from '@shared/background-settings/store';
 import { useUiColorPaletteStore } from '@shared/color-palette/store';
 import { useUiPageSettingsStore } from '@shared/page-settings/store/page-settings-store';
@@ -405,6 +406,52 @@ describe('brand page maker store module', () => {
     expect(hamburger.subNavBackgroundColor).toBe('var(--palette-1)');
   });
 
+  // The header is every type's logo home now, so initialising the admin maker's
+  // preview models must write it there, never add a logo block alongside it.
+  test('initialiseAdminMaker writes a BC logo template to the header and adds no block', async () => {
+    useBrandPageContainerStore().isAdminMaker = true;
+
+    const store = useBrandPageMakerStore();
+
+    await store.initialise({
+      ...INITIALISE_PAYLOAD,
+      brandPage: BRAND_PAGE, // brandContact fixture
+    });
+
+    const contentSettingsStore = useUiContentSettingsStore();
+    const logoBlocksBefore = contentSettingsStore.items.filter(
+      (i) => i.settings.content.type === 'logo',
+    ).length;
+
+    await store.initialiseAdminMaker({
+      models: [
+        {
+          logoColors: [],
+          logoImageUrl:
+            'https://localhost:6006/asset/logodraft/brand-page/00000000-0000-0000-0000-000000000000?v=1&dimensionsType=preview_image_transparent_no_buffer&outputFormat=png',
+          logoTemplateToken: 'logo-template-1',
+          logoTheme: {
+            backgroundColors: ['rgba(0,0,0,1)'],
+            textColors: ['rgba(0,0,0,1)'],
+            textOpacities: [1],
+            textValues: {},
+          },
+          recommendedLogoColors: [],
+        },
+      ],
+    });
+
+    expect(
+      useUiPageSettingsStore().sections[PAGE_SECTIONS.header][VIEWPORTS.desktop]
+        .logoTemplateImage,
+    ).toBeTruthy();
+    expect(
+      contentSettingsStore.items.filter(
+        (i) => i.settings.content.type === 'logo',
+      ).length,
+    ).toBe(logoBlocksBefore);
+  });
+
   test('brand page maker module should returns distinct brand page content type', async () => {
     // Arrange
     const store = useBrandPageMakerStore();
@@ -780,6 +827,70 @@ describe('brand page maker store module', () => {
     expect(pageNavigationStore.activePageId).toBe(expectedFirstId);
   });
 
+  test('undo and redo step a mobile header logo size and header colour change back and forth; desktop is untouched', async () => {
+    const makerStore = useBrandPageMakerStore();
+    const pageSettingsStore = useUiPageSettingsStore();
+    const history = useHistoryStore();
+
+    await makerStore.initialise(INITIALISE_PAYLOAD);
+
+    const mobile = () =>
+      pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.mobile];
+    const desktopBefore = JSON.stringify(
+      pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop],
+    );
+    const sizeBefore = mobile().logoImageHeight;
+    const colourBefore = mobile().backgroundStyle?.backgroundColor;
+    const edit = { source: 'manual_edit', actor: 'user' } as const;
+
+    expect(sizeBefore).not.toBe('10rem');
+    expect(colourBefore).not.toBe('#445566');
+
+    history.captureBaseline();
+    // Drives the store directly: the Header settings panel's size and colour handlers write exactly these two actions.
+    pageSettingsStore.setPageSettingsSectionLogoImage({
+      sectionName: PAGE_SECTIONS.header,
+      viewport: VIEWPORTS.mobile,
+      logoImage: mobile().logoImage,
+      logoImageHeight: '10rem',
+      logoImageWidth: '10rem',
+      logoImageBase64Url: undefined,
+    });
+    history.capture(edit);
+    pageSettingsStore.setPageSettingsSectionValue({
+      sectionName: PAGE_SECTIONS.header,
+      viewport: VIEWPORTS.mobile,
+      propName: 'backgroundStyle',
+      value: { backgroundColor: '#445566' },
+      merge: true,
+    });
+    history.capture(edit);
+
+    await history.undo();
+    expect(mobile().logoImageHeight).toBe('10rem');
+    expect(mobile().backgroundStyle?.backgroundColor).toBe(colourBefore);
+
+    await history.undo();
+    expect(mobile().logoImageHeight).toBe(sizeBefore);
+    expect(mobile().backgroundStyle?.backgroundColor).toBe(colourBefore);
+
+    await history.redo();
+    expect(mobile().logoImageHeight).toBe('10rem');
+    expect(mobile().backgroundStyle?.backgroundColor).toBe(colourBefore);
+
+    await history.redo();
+    expect(mobile().logoImageHeight).toBe('10rem');
+    expect(mobile().backgroundStyle?.backgroundColor).toBe('#445566');
+
+    expect(
+      JSON.stringify(
+        pageSettingsStore.sections[PAGE_SECTIONS.header][VIEWPORTS.desktop],
+      ),
+    ).toBe(desktopBefore);
+
+    history.reset();
+  });
+
   // BP-5813: the templates sidebar highlight binds to `selectedTemplateId`,
   // which isn't part of `brandPageData`. It rides along as a history-entry
   // sidecar; applyHistorySnapshot restores it so the highlight reverts in

package/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.ts

@@ -19,7 +19,6 @@ import {
   BackgroundStyles,
   BRAND_PAGE_TYPES,
   BrandPageModel,
-  CONTENT_TYPES,
   NavigationDesktop,
   NavigationMobile,
 } from '@brand-page';
@@ -390,19 +389,20 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
       const logoSettingsStore = useUiLogoSettingsStore();
       const editableLogoStore = useUiEditableLogoStore();
 
-      if (!brandPageContainerStore.isAdminMaker && this.isBrandSite) {
-        await recalculateHeaderLogoSizes(
-          pageSettingsStore,
-          logoSettingsStore,
-          editableLogoStore.editableLogoVariations,
-          this.brandPageType,
-          brandPageContainerStore.isPrePurchase,
-          forceRecalculate,
-        );
-      } else if (
-        !brandPageContainerStore.isAdminMaker &&
-        this.isBrandPageOrIsBrandContact
-      ) {
+      if (brandPageContainerStore.isAdminMaker) {
+        return;
+      }
+
+      await recalculateHeaderLogoSizes(
+        pageSettingsStore,
+        logoSettingsStore,
+        editableLogoStore.editableLogoVariations,
+        this.brandPageType,
+        brandPageContainerStore.isPrePurchase,
+        forceRecalculate,
+      );
+
+      if (this.isBrandPageOrIsBrandContact) {
         await recalculateLogoContentDimensions(
           pageSettingsStore,
           editableLogoStore.editableLogoVariations,
@@ -1352,6 +1352,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
           logoImage,
           isUserDraft: this.isUserDraft,
           isServerRender: isServerRenderOverride,
+          // No draft token means the admin maker is editing a template directly.
+          isTemplate: !this.isUserDraft,
         });
 
         if (isBlankSite) applyBlankSiteTextRoles(brandPageModel);
@@ -1729,7 +1731,6 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
     },
     initialiseAdminMaker(payload: { models: AdminPreviewLogoTemplateModel[] }) {
       const adminLogoSettingsStore = useAdminLogoSettingsStore();
-      const uiContentSettings = useUiContentSettingsStore();
 
       if (!useBrandPageContainerStore().isAdminMaker) {
         return;
@@ -1739,19 +1740,8 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
         models: payload.models,
       });
 
-      const logoContentsLength = uiContentSettings.items.filter(
-        (i) => i.settings.content.type === 'logo',
-      ).length;
-
-      if (
-        logoContentsLength === 0 &&
-        this.brandPageType !== BRAND_PAGE_TYPES.brandSite
-      ) {
-        uiContentSettings.addItemByType({
-          type: CONTENT_TYPES.logo,
-        });
-      }
-
+      // The header is every type's logo home now: selecting the first model below
+      // writes it there via setSelectedLogoImageToAll, so no block is added here.
       const firstModel = payload.models[0];
 
       if (!firstModel) {