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

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

@@ -38,6 +38,7 @@ import type {
   LogoTemplateImageModel,
   ShopContent,
   BookingSectionContent,
+  FaqSectionContent,
   TextShapeItem,
   GettyVideoMedia,
   AbstractMedia,
@@ -94,6 +95,7 @@ import type {
   ShapesSectionViewModel,
   ShopViewModel,
   BookingSectionViewModel,
+  FaqSectionViewModel,
   GettyVideoViewModel,
   PageStylesViewModel,
   BackgroundStylesViewModel,
@@ -130,6 +132,7 @@ import {
   ALIGN_CARD_LEFT_IMAGE,
   ALIGN_LEFT_FULL_IMAGE,
   ALIGN_RIGHT_FULL_IMAGE,
+  STACKED_LOGO_LAYOUTS,
 } from '../constants';
 import uniq from 'lodash/uniq';
 import { isValidSvgUrl } from './image.util';
@@ -1080,6 +1083,27 @@ const mapToTestimonialSectionViewModel = (
   );
 };
 
+const mapToFaqSectionViewModel = (
+  content: FaqSectionContent,
+  styles: PageStyles,
+): FaqSectionViewModel => {
+  return applyViewModelTextStyles(
+    {
+      ...content,
+      role: content.type,
+      type: 'faq-section',
+      // No `color` pre-seed, as in the testimonial mapper: it would read as an override.
+      titleStyle: { ...content.titleStyle },
+      descriptionStyle: { ...content.descriptionStyle },
+      questionStyle: { ...content.questionStyle },
+      answerStyle: { ...content.answerStyle },
+      items: content.items ?? [],
+      isFullWidth: true,
+    },
+    styles,
+  );
+};
+
 const mapToSocialLinksViewModel = (
   content: SocialLinksContent,
   styles: PageStyles,
@@ -1319,10 +1343,16 @@ export const mapToPageHeaderViewModel = (
 ): PageHeaderViewModel => {
   const viewport = pageHeader.viewport;
 
+  const drawsLogoBackground = STACKED_LOGO_LAYOUTS.includes(
+    pageHeader.displayStyle,
+  );
+
   const logoContent: LogoContent = {
     id: 'page-header-logo',
     type: 'logo',
-    backgroundStyle: {},
+    backgroundStyle: drawsLogoBackground
+      ? (pageHeader.logoBackgroundStyle ?? {})
+      : {},
     logoImageBase64Url: pageHeader.logoImageBase64Url,
     isLogoVisible: pageHeader.isLogoVisible,
     logoImage: pageHeader.logoImage,
@@ -1570,6 +1600,9 @@ export const mapToViewModel =
           styles,
         );
 
+      case 'faq-section':
+        return mapToFaqSectionViewModel(content as FaqSectionContent, styles);
+
       case 'about-section':
         return mapToAboutSectionViewModel(
           content as AboutSectionContent,
@@ -1907,9 +1940,10 @@ export const applyLogoImageToBrandPageViewModel = (
     }),
   );
 
+  viewModel.headerViewModelDesktop.logo.logoImage = logoImage;
+  viewModel.headerViewModelMobile.logo.logoImage = logoImage;
+
   if (viewModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-    viewModel.headerViewModelDesktop.logo.logoImage = logoImage;
-    viewModel.headerViewModelMobile.logo.logoImage = logoImage;
     viewModel.footerViewModelDesktop.logo.logoImage = logoImage;
     viewModel.footerViewModelMobile.logo.logoImage = logoImage;
   }
@@ -1931,9 +1965,10 @@ export const applyLogoImageToBrandPageModel = (
     }),
   );
 
+  model.pageHeaderDesktop.logoImage = logoImage;
+  model.pageHeaderMobile.logoImage = logoImage;
+
   if (model.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-    model.pageHeaderDesktop.logoImage = logoImage;
-    model.pageHeaderMobile.logoImage = logoImage;
     model.pageFooterDesktop.logoImage = logoImage;
     model.pageFooterMobile.logoImage = logoImage;
   }
@@ -1956,9 +1991,10 @@ export const applyLogoTemplateImageToBrandPageViewModel = (
     }),
   );
 
+  viewModel.headerViewModelDesktop.logo.logoTemplateImage = logoTemplateImage;
+  viewModel.headerViewModelMobile.logo.logoTemplateImage = logoTemplateImage;
+
   if (viewModel.brandPageType === BRAND_PAGE_TYPES.brandSite) {
-    viewModel.headerViewModelDesktop.logo.logoTemplateImage = logoTemplateImage;
-    viewModel.headerViewModelMobile.logo.logoTemplateImage = logoTemplateImage;
     viewModel.footerViewModelDesktop.logo.logoTemplateImage = logoTemplateImage;
     viewModel.footerViewModelMobile.logo.logoTemplateImage = logoTemplateImage;
   }

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

@@ -35,6 +35,7 @@ import type {
   LogoTemplateImageModel,
   CookieOptions,
   BookingSectionContent,
+  FaqSectionContent,
   MediaTypes,
   TextStyles,
   BackgroundStyle,
@@ -67,7 +68,8 @@ export type ViewModelType =
   | 'social-links'
   | 'shapes-section'
   | 'shop-section'
-  | 'booking-section';
+  | 'booking-section'
+  | 'faq-section';
 
 export interface ContentViewModel {
   id: string;
@@ -253,6 +255,11 @@ export interface BookingSectionViewModel
   isFullWidth: boolean;
 }
 
+export interface FaqSectionViewModel
+  extends ContentViewModel, Omit<FaqSectionContent, 'type'> {
+  isFullWidth: boolean;
+}
+
 export interface PageHeaderViewModel extends Omit<
   PageHeaderDesktop | PageHeaderMobile,
   | 'logoImage'

package/src/brand-page-maker/assessors/faq-accordion-color-field-visibility.assessor.ts

@@ -0,0 +1,9 @@
+import type { FaqSectionContent } from '@brand-page';
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import type { VisibilityAssessor } from '../models';
+
+// Icon and divider colours paint the accordion toggle and its item dividers;
+// grid shows neither, so the fields have nothing to colour there.
+export const faqAccordionColorFieldVisibilityAssessor: VisibilityAssessor<
+  FaqSectionContent | undefined
+> = (content) => content?.displayStyle !== FAQ_DISPLAY_STYLES.grid;

package/src/brand-page-maker/assessors/index.ts

@@ -8,6 +8,7 @@ export * from './media-section-items-field.assessor';
 export * from './shape-section-items-field.assessor';
 export * from './shape-size-visibility.assessor';
 export * from './divider-toggle-field-visibility.assessor';
+export * from './faq-accordion-color-field-visibility.assessor';
 export * from './color-replacement-visibility.assessor';
 export * from './color-replacement-profile-visibility.assessor';
 export * from './color-replacement-icon-visibility.assessor';

package/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.mixin.ts

@@ -1,6 +1,5 @@
 import { defineComponent, computed } from 'vue';
 import { useAdminLogoSettingsStore } from '@brand-page-maker/stores/admin-logo-settings';
-import { useUiContentSettingsStore } from '@shared/content-settings/store';
 import { useBrandPageMakerStore } from '@brand-page-maker/stores/brandpage-maker';
 import {
   DESKTOP_HEIGHT,
@@ -12,29 +11,17 @@ import {
 export default defineComponent({
   setup() {
     const adminLogoSettingsStore = useAdminLogoSettingsStore();
-    const contentSettingsStore = useUiContentSettingsStore();
     const brandPageMakerStore = useBrandPageMakerStore();
 
     return {
       templates: computed(() => adminLogoSettingsStore.templates),
-      items: computed(() => contentSettingsStore.items),
       brandPageTitle: computed(() => brandPageMakerStore.brandPageTitle),
       brandPageType: computed(() => brandPageMakerStore.brandPageType),
       isBrandSite: computed(() => brandPageMakerStore.isBrandSite),
-      isBrandPageOrIsBrandContact: computed(
-        () => brandPageMakerStore.isBrandPageOrIsBrandContact,
-      ),
       adminLogoSettingsStore,
     };
   },
   computed: {
-    canAddLogo() {
-      return (
-        !this.isBrandSite &&
-        this.items.filter((x) => x.type === 'logo').length === 0
-      );
-    },
-
     previewWidth(): number {
       return this.isBrandSite ? DESKTOP_WIDTH : MOBILE_WIDTH;
     },
@@ -44,13 +31,6 @@ export default defineComponent({
     },
   },
   methods: {
-    onAddLogoClick() {
-      if (!this.canAddLogo) {
-        return;
-      }
-
-      this.adminLogoSettingsStore.addLogoContent();
-    },
     async onTemplateSelected(logoTemplateToken: string) {
       await this.adminLogoSettingsStore.selectPreviewLogoTemplateModel({
         logoTemplateToken,

package/src/brand-page-maker/components/admin-logo-settings/AdminLogoSettings.vue

@@ -1,15 +1,7 @@
 <template>
   <div data-component="admin-logo-settings">
     <!-- Start header -->
-    <SideBarSettingsHeader title="Logo">
-      <Button
-        label="Add logo"
-        variant="outline"
-        size="small"
-        :disabled="!canAddLogo"
-        @on-click.stop="onAddLogoClick"
-      />
-    </SideBarSettingsHeader>
+    <SideBarSettingsHeader title="Logo" />
     <!-- End header -->
     <!-- Start template previews -->
     <ul
@@ -32,14 +24,12 @@
   </div>
 </template>
 <script>
-import { Button } from '@designcrowd/fe-shared-lib';
 import AdminLogoSettingsMixin from './AdminLogoSettings.mixin.ts';
 import SideBarSettingsHeader from '@shared/common/SideBarSettingsHeader.vue';
 import TemplatePreview from '../template-preview/TemplatePreview.vue';
 
 export default {
   components: {
-    Button,
     SideBarSettingsHeader,
     TemplatePreview,
   },

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.ts

@@ -14,7 +14,6 @@ import {
   getContentSettingsFields,
   getContentSettingsTemplate,
 } from '@shared/content-settings/utils';
-import { useUiNavigationStyleSettingsStore } from '@shared/navigation-style-settings/store';
 import { useUiSideBarStore } from '@shared/side-bar/store';
 import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
@@ -34,7 +33,6 @@ export default defineComponent({
     const brandPageMakerStore = useBrandPageMakerStore();
     const brandPageContainerStore = useBrandPageContainerStore();
     const brandPageMakerUserStore = useBrandPageMakerUserStore();
-    const navigationStyleSettingsStore = useUiNavigationStyleSettingsStore();
     const sideBarStore = useUiSideBarStore();
     const pageSettingsStore = useUiPageSettingsStore();
     const uiStore = useUiStore();
@@ -65,7 +63,6 @@ export default defineComponent({
       contentSettingsStore,
       brandPageMakerStore,
       brandPageContainerStore,
-      navigationStyleSettingsStore,
       sideBarStore,
       pageSettingsStore,
       eventTracker,
@@ -274,9 +271,6 @@ export default defineComponent({
         previewPageScroll.scrollTop = (item as HTMLElement).offsetTop;
       });
     },
-    setNavigationOrder(payload) {
-      this.navigationStyleSettingsStore.setNavigationOrder(payload);
-    },
     onPageHeaderContainerClick() {
       if (!this.isInteractivePreviewEnabled) {
         return;

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue

@@ -10,7 +10,6 @@
     :is-footer-selected="isFooterSelected"
     :is-content-selected="isContentSelected"
     :is-mobile-device="isMobileDevice"
-    @set-navigation-order="setNavigationOrder"
     @page-header-container-click="onPageHeaderContainerClick"
     @page-footer-container-click="onPageFooterContainerClick"
     @save-contact-widget-click="onSaveContactWidgetClick"
@@ -68,59 +67,6 @@
               />
               <!-- End overlay -->
             </div>
-            <div
-              v-if="
-                element.type === 'logo' &&
-                (showNavigationAfterLogoDesktop ||
-                  showNavigationAfterLogoMobile)
-              "
-            >
-              <MediaQuery :viewport="viewport">
-                <template #desktop>
-                  <BrandSiteNavigationLayout
-                    nav-id="nav-3"
-                    :header-display-style="
-                      viewModel.headerViewModelDesktop.displayStyle
-                    "
-                  >
-                    <Navigation
-                      v-if="
-                        element.type === 'logo' &&
-                        showNavigationAfterLogoDesktop
-                      "
-                      nav-id="nav-3"
-                      class="brand-page__content--inner tw-mb-6"
-                      :pages="viewModel.pages"
-                      :context="context"
-                      :navigation="headerViewModelDesktop.navigation"
-                      @open-side-menu="openSideMenu"
-                      @click.stop
-                    />
-                  </BrandSiteNavigationLayout>
-                </template>
-                <template #mobile>
-                  <BrandSiteNavigationLayout
-                    nav-id="nav-4"
-                    :header-display-style="
-                      viewModel.headerViewModelMobile.displayStyle
-                    "
-                  >
-                    <Navigation
-                      v-if="
-                        element.type === 'logo' && showNavigationAfterLogoMobile
-                      "
-                      nav-id="nav-4"
-                      class="brand-page__content--inner tw-mb-6"
-                      :pages="viewModel.pages"
-                      :context="context"
-                      :navigation="headerViewModelMobile.navigation"
-                      @open-side-menu="openSideMenu"
-                      @click.stop
-                    />
-                  </BrandSiteNavigationLayout>
-                </template>
-              </MediaQuery>
-            </div>
           </div>
         </template>
       </Draggable>
@@ -137,9 +83,6 @@ import BrandPageMakerPageMixin from './BrandPageMakerPage.mixin';
 import Page from '@brand-page/components/page/Page.vue';
 import PageComponent from '@brand-page/components/page/PageComponent.vue';
 import Draggable from 'vuedraggable';
-import Navigation from '@brand-page/components/navigation/Navigation.vue';
-import MediaQuery from '@brand-page/components/media-query';
-import BrandSiteNavigationLayout from '@brand-page/components/page/BrandSiteNavigationLayout.vue';
 import CookieConsent from '@brand-page/components/cookie-consent/CookieConsent.vue';
 
 export default {
@@ -147,9 +90,6 @@ export default {
     Page,
     PageComponent,
     Draggable,
-    Navigation,
-    MediaQuery,
-    BrandSiteNavigationLayout,
     CookieConsent,
   },
   mixins: [BrandPageMakerPageMixin],

package/src/brand-page-maker/components/preview/Preview.vue

@@ -16,7 +16,6 @@
     </div>
     <div v-else ref="scaled" class="tw-h-full" data-test-tag="editor-preview">
       <BrandPageMakerPage
-        v-if="!shouldShowNoContentHelloBar"
         :context="context"
         :view-model="viewModel"
         :container-client-height="containerClientHeight"

package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts

@@ -873,6 +873,8 @@ export const useRichTextEditor = (
       id: props.rawId,
       name: props.name,
       index: props.textItemIndex,
+      // An FAQ question's editor is bound to its item; Apply to all keeps that item's live doc.
+      itemId: props.item?.id,
       doc: sanitizeRteJson(editor.getJSON()),
     });
   };

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

@@ -77,6 +77,7 @@ export const EVENTS = {
   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',
+  WEBSITE_MAKER_UPDATE_HEADER_LOGO: 'website_maker_update_header_logo',
 };
 
 // The global `location` prop already means pre/post purchase, so the surface a
@@ -505,6 +506,13 @@ const useEventTracker = () => {
     }) => {
       _publishEvent(EVENTS.WEBSITE_MAKER_HISTORY_OVERSIZED, props);
     },
+    // BP/BC header logo and header background changes; BS sends none.
+    sendWebsiteMakerUpdateHeaderLogoEvent: (props: {
+      setting: string;
+      viewport: string;
+    }) => {
+      _publishEvent(EVENTS.WEBSITE_MAKER_UPDATE_HEADER_LOGO, props);
+    },
   };
 };
 

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -35,8 +35,10 @@ import type {
   Content,
   ShopContent,
   BookingSectionContent,
+  FaqSectionContent,
 } from '@brand-page';
 import {
+  FAQ_DISPLAY_STYLES,
   SOCIAL_LINKS_ICON_DISPLAY_STYLES,
   BRAND_PAGE_TYPES,
   DIVIDER_STYLES,
@@ -82,6 +84,7 @@ import {
   VARIANT_DISPLAY_MODES,
   createInitialShopContent,
   createInitialBookingSectionContent,
+  createInitialFaqSectionContent,
 } from '../models';
 import * as uuid from 'uuid';
 import type {
@@ -122,6 +125,7 @@ import {
   cardFillVisibilityAssessor,
   mediaSectionItemsFieldTypeAssessor,
   dividerToggleFieldVisibilityAssessor,
+  faqAccordionColorFieldVisibilityAssessor,
   shapeSectionItemsFieldTypeAssessor,
   colorReplacementVisibilityTypeAssessor,
   colorReplacementProfileVisibilityTypeAssessor,
@@ -147,6 +151,7 @@ import {
 import { socialLinksIconDisplayStyleConvertor } from '../convertors/social-links-icon-display-style.convertor';
 import { getTextMediaOptionsConverterByMediaType } from '../convertors/text-image-display-style.convertor';
 import { testimonialDisplayStyleConvertor } from '../convertors/testimonial-display-style-convertor';
+import { faqDisplayStyleConvertor } from '../convertors/faq-display-style.convertor';
 import { pageValidator, urlValidator } from '../validators';
 import { imagesSectionAspectRatioVisibilityAssessor } from '../assessors/images-section-aspect-ratio-visibility.assessor';
 import {
@@ -167,7 +172,7 @@ import {
   brandPageOrbrandContactTypeVisibilityAssessor,
   brandSiteTypeVisibilityAssessor,
 } from '../assessors/brand-page-type-visibility.assessor';
-import { contentSettingsTr } from '@src/composables/useTranslate';
+import { commonTr, contentSettingsTr } from '@src/composables/useTranslate';
 import type { GettyVideoMediaSelectedPayload } from '@shared/my-uploads/models';
 
 const MediaFieldNames = {
@@ -3289,6 +3294,121 @@ export const BOOKING_SECTION_SETTINGS_CONFIG =
     isLocked: false,
   });
 
+const FAQ_FIELD_GROUP_IDS = {
+  settings: 'settings',
+  items: 'items',
+  style: 'style',
+} as const;
+
+export const FAQ_SECTION_SETTINGS_CONFIG =
+  (): ContentSettingsConfig<FaqSectionContent> => ({
+    type: 'faq-section',
+    category: 'general',
+    createInitialContent: createInitialFaqSectionContent,
+    displayMode: CONTENT_SETTINGS_DISPLAY_MODES.focused,
+    defaultIconName: 'question-circle-filled',
+    displayName: contentSettingsTr(`faqSectionDisplayName`),
+    fieldGroups: [
+      {
+        id: FAQ_FIELD_GROUP_IDS.settings,
+        displayName: contentSettingsTr(`settingsDisplayName`),
+        isCollapsed: false,
+      },
+      {
+        id: FAQ_FIELD_GROUP_IDS.items,
+        displayName: contentSettingsTr(`faqItemsDisplayName`),
+        isCollapsed: false,
+      },
+      {
+        id: FAQ_FIELD_GROUP_IDS.style,
+        displayName: contentSettingsTr(`styleDisplayName`),
+        isCollapsed: true,
+      },
+    ],
+    fields: {
+      titleStyle: DEFAULT_TITLE_STYLE_SETTINGS_FILED_WITH_TITLE(),
+      descriptionStyle: DEFAULT_DESCRIPTION_STYLE_FILED(),
+      // Edited in each item's editor (FaqItemsField), not as section fields.
+      questionStyle: undefined,
+      answerStyle: undefined,
+      title: {
+        type: 'text',
+        placeholder: contentSettingsTr(`titlePlaceholder`),
+        title: contentSettingsTr(`titleTitle`),
+        groupId: FAQ_FIELD_GROUP_IDS.settings,
+        maxLength: 200,
+      },
+      titleOverride: {
+        type: 'personalisation-override',
+        groupId: FAQ_FIELD_GROUP_IDS.settings,
+        visibilityAssessor: (c, b) =>
+          personalisationOverrideVisibility(c, b, 'title'),
+      },
+      description: {
+        type: 'textarea',
+        placeholder: contentSettingsTr(`descriptionPlaceholder`),
+        title: contentSettingsTr(`descriptionTitle`),
+        groupId: FAQ_FIELD_GROUP_IDS.settings,
+        maxLength: 1000,
+      },
+      descriptionOverride: {
+        type: 'personalisation-override',
+        groupId: FAQ_FIELD_GROUP_IDS.settings,
+        visibilityAssessor: (c, b) =>
+          personalisationOverrideVisibility(c, b, 'description'),
+      },
+      // FaqItemsField owns the question/answer inputs and the FAQ_MAX_ITEMS cap.
+      items: {
+        type: 'faq-items',
+        defaultValue: [],
+        groupId: FAQ_FIELD_GROUP_IDS.items,
+      },
+      displayStyle: {
+        type: 'radio',
+        role: 'multi',
+        defaultValue: FAQ_DISPLAY_STYLES.centered,
+        title: contentSettingsTr(`displayStyleTitle`),
+        optionsConvertor: faqDisplayStyleConvertor,
+        groupId: FAQ_FIELD_GROUP_IDS.style,
+        variant: 'icon',
+      },
+      ...PADDING_CONTROL_FIELDS(FAQ_FIELD_GROUP_IDS.style),
+      iconColor: {
+        type: 'color',
+        groupId: FAQ_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        disableTransparent: true,
+        visibilityAssessor: faqAccordionColorFieldVisibilityAssessor,
+        title: commonTr(`iconColor`),
+        valueConvertor: colorConvertor,
+      },
+      // Transparent allowed on purpose (it hides the line), unlike the Divider section's field.
+      dividerColor: {
+        type: 'color',
+        groupId: FAQ_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        visibilityAssessor: faqAccordionColorFieldVisibilityAssessor,
+        title: contentSettingsTr(`dividerColorTitle`),
+        valueConvertor: backgroundColorConvertor,
+      },
+      backgroundStyle: {
+        type: 'color',
+        groupId: FAQ_FIELD_GROUP_IDS.style,
+        defaultValue: {},
+        isInline: true,
+        showToggle: false,
+        title: contentSettingsTr(`backgroundColorTitle`),
+        valueConvertor: backgroundColorConvertor,
+      },
+    },
+    isEnabled: true,
+    isLocked: false,
+  });
+
 export const CONTENT_SETTINGS_CONFIGS = (): Record<
   ContentType,
   ContentSettingsConfig<any>
@@ -3325,4 +3445,5 @@ export const CONTENT_SETTINGS_CONFIGS = (): Record<
   'shapes-section': SHAPES_SECTION_SETTINGS_CONFIG(),
   'shop-section': SHOP_SECTION_SETTINGS_CONFIG(),
   'booking-section': BOOKING_SECTION_SETTINGS_CONFIG(),
+  'faq-section': FAQ_SECTION_SETTINGS_CONFIG(),
 });

package/src/brand-page-maker/constants/faq-section-config.test.ts

@@ -0,0 +1,22 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page';
+import { faqDisplayStyleConvertor } from '../convertors/faq-display-style.convertor';
+
+describe('faqDisplayStyleConvertor', () => {
+  test.each([
+    [FAQ_DISPLAY_STYLES.centered, 'center'],
+    [FAQ_DISPLAY_STYLES.split, 'left'],
+    [FAQ_DISPLAY_STYLES.grid, 'center'],
+  ])(
+    'switching to %s only moves the display style and heading alignment',
+    (value, textAlign) => {
+      const config = faqDisplayStyleConvertor.convert(value);
+      const result = faqDisplayStyleConvertor.convertBack(config);
+
+      expect(result).toEqual({
+        displayStyle: value,
+        titleStyle: { textAlign },
+        descriptionStyle: { textAlign },
+      });
+    },
+  );
+});

package/src/brand-page-maker/constants/personalisation.constant.ts

@@ -1,5 +1,6 @@
 import type {
   ButtonContent,
+  FaqItem,
   PersonalisationMappingType,
   TestimonialItems,
   TextItem,
@@ -38,10 +39,10 @@ export const DEFAULT_PERSONALISATION_MAPPING: ContentPersonalisationMapping<any>
   };
 
 export const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING: ContentPersonalisationMapping<
-  TextMediaItem & TestimonialItems & TextItem
+  TextMediaItem & TestimonialItems & TextItem & FaqItem
 > = {
-  itemTitle: ['title', 'imageTitle', 'name'],
-  itemDescription: ['paragraph', 'testimonials', 'text'],
+  itemTitle: ['title', 'imageTitle', 'name', 'question'],
+  itemDescription: ['paragraph', 'testimonials', 'text', 'answer'],
   itemDescriptionShort: ['position'],
   imageUrls: ['imageUrl'],
 };
@@ -53,6 +54,7 @@ export const TEXT_MEDIA_CONTENT_TYPES: PersonalisationMappingType[] = [
   'text-media-items',
   'image-gallery',
   'text',
+  'faq-section',
 ];
 
 export const PERSONALISATION_MAPPINGS: Partial<