@designcrowd/library.brand-page 6.2.16 → 6.2.17

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,
@@ -1080,6 +1082,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,
@@ -1570,6 +1593,9 @@ export const mapToViewModel =
           styles,
         );
 
+      case 'faq-section':
+        return mapToFaqSectionViewModel(content as FaqSectionContent, styles);
+
       case 'about-section':
         return mapToAboutSectionViewModel(
           content as AboutSectionContent,

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/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/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<

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) => {