@designcrowd/library.brand-page 6.2.2 → 6.2.3-ast-faq

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

@@ -24,6 +24,24 @@ export const useExternalRichTextEditor = () => {
         externalEditor,
     };
 };
+/**
+ * An editor bound to a list item (`itemStyleTarget`) writes its toolbar styles to that
+ * item's own style field instead of the section-level `${name}Style`. Returns false when
+ * the editor has no item target, so the caller falls through to its section-level write.
+ */
+export const writeListItemStyles = (store, props, value, isHydrationWrite) => {
+    if (!props.itemStyleTarget) {
+        return false;
+    }
+    store.updateListItemTextStyles({
+        id: props.rawId,
+        name: props.name,
+        value,
+        target: props.itemStyleTarget,
+        isHydrationWrite,
+    });
+    return true;
+};
 export const useRichTextEditor = (model, props, emit, fontSettings, fontStyleDropdownRef, 
 // One entry of `textStyleOptions`; `undefined` when the selection is "none".
 selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyleTypeOptions, markedText, isHyperlinkPopupOpen, selectedLinkTypeValue) => {
@@ -204,6 +222,21 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             });
         }
     });
+    // Set while a toolbar command runs. The toolbar has taken focus by then, so
+    // `isFocused` alone would tag the command's write as hydration and fold it into
+    // the previous undo entry — hidden only when a style write rides along and opens
+    // an entry of its own. Synchronous commands only: the spacing sliders dispatch
+    // after a debounce and are not covered.
+    let isRunningToolbarCommand = false;
+    const runAsToolbarCommand = (command) => {
+        isRunningToolbarCommand = true;
+        try {
+            return command();
+        }
+        finally {
+            isRunningToolbarCommand = false;
+        }
+    };
     // Update model when editor content changes. RTE content is stored as Tiptap
     // JSON (BP-5787). getJSON() is already in hand (the editor holds the doc) and
     // is sanitised natively — no getHTML(), no DOMPurify, no extra editor — so
@@ -217,15 +250,9 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         // field → store chain and arms the history merge at the moment of the
         // store write — arming here at emit time would lapse before the
         // debounce fires. Genuine edits happen while focused and commit
-        // normally.
-        //
-        // Known limitation: a programmatic toolbar command run on an editor the
-        // user hasn't focused yet would also merge (losing that undo step). Today
-        // the RTE only mounts inside an already-open settings drawer and the user
-        // focuses it before formatting, so this doesn't occur — revisit if a
-        // consumer ever drives toolbar actions on an unfocused editor.
+        // normally, and so do synchronous toolbar commands (isRunningToolbarCommand).
         emit('update:modelValue', sanitizeRteJson(editor.getJSON()), {
-            isHydrationWrite: !editor.isFocused,
+            isHydrationWrite: !editor.isFocused && !isRunningToolbarCommand,
         });
     });
     editor.on('selectionUpdate', () => {
@@ -303,26 +330,30 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             // write lands ~100ms BEFORE the editor's canonical text write-back, and
             // an unflagged write here would open a plain capture burst that
             // swallows the flagged text write into a phantom entry (BP-5810).
-            contentSettingStore.updateTextStyles({
-                id: props.rawId,
-                name: props.name,
-                value: {
-                    fontSize: globalStyles.fontSize,
-                    fontFamily: globalStyles.fontFamily,
-                    fontWeight: globalStyles.fontWeight,
-                    fontStyle: globalStyles.fontStyle,
-                    textDecoration: globalStyles.textDecoration,
-                    // Keep an element colour override (a creation-time contrast bake, or a
-                    // colour picked while linked) — only fall back to the global style's colour
-                    // when the element has none, mirroring `resolveTextColor`'s element-first
-                    // cascade. Blindly taking `globalStyles.color` here re-derived the linked
-                    // colour on every RTE mount and clobbered the override.
-                    color: props.styles?.color || globalStyles.color,
-                    lineHeight: globalStyles.lineHeight,
-                    letterSpacing: globalStyles.letterSpacing,
-                },
-                isHydrationWrite: !editor.isFocused,
-            });
+            const syncedStyles = {
+                fontSize: globalStyles.fontSize,
+                fontFamily: globalStyles.fontFamily,
+                fontWeight: globalStyles.fontWeight,
+                fontStyle: globalStyles.fontStyle,
+                textDecoration: globalStyles.textDecoration,
+                // Keep an element colour override (a creation-time contrast bake, or a
+                // colour picked while linked) — only fall back to the global style's colour
+                // when the element has none, mirroring `resolveTextColor`'s element-first
+                // cascade. Blindly taking `globalStyles.color` here re-derived the linked
+                // colour on every RTE mount and clobbered the override.
+                color: props.styles?.color || globalStyles.color,
+                lineHeight: globalStyles.lineHeight,
+                letterSpacing: globalStyles.letterSpacing,
+            };
+            const isHydrationWrite = !editor.isFocused;
+            if (!writeListItemStyles(contentSettingStore, props, syncedStyles, isHydrationWrite)) {
+                contentSettingStore.updateTextStyles({
+                    id: props.rawId,
+                    name: props.name,
+                    value: syncedStyles,
+                    isHydrationWrite,
+                });
+            }
             // sync toolbar editor styles
             fontSettings.selectedFont = globalStyles?.fontFamily ?? 'Lato';
             fontSettings.selectedFontSize = globalStyles?.fontSize ?? '2.25em';
@@ -476,6 +507,9 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         syncContentSettings(fontStyleChanges);
     };
     const syncContentSettings = (fontStyleChanges) => {
+        if (writeListItemStyles(contentSettingStore, props, fontStyleChanges)) {
+            return;
+        }
         if (props.name === 'textItems') {
             contentSettingStore.updateTextItemTextStyleTypeWithStyles({
                 id: props.rawId,
@@ -584,7 +618,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         editor,
         onFocus,
         onBlur,
-        triggerEditorStyleChange,
+        triggerEditorStyleChange: (editorOption) => runAsToolbarCommand(() => triggerEditorStyleChange(editorOption)),
         toggleBold,
         toggleItalic,
         toggleUnderline,
@@ -601,7 +635,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         setInitialStyleSettings,
         copyGlobalStyleSettings,
         unsetAllMarks,
-        handleHyperlink,
+        handleHyperlink: (...args) => runAsToolbarCommand(() => handleHyperlink(...args)),
         hyperlinkValue,
         setHyperlinkUrlValue,
         shouldShow,

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

@@ -1,4 +1,4 @@
-import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent } from '@brand-page';
+import type { LogoContent, FacebookContent, GeneralLinkContent, PhoneContent, EmailContent, ImageContent, InstagramContent, LinkedInContent, PinterestContent, ProfileContent, TextContent, TiktokContent, TwitchContent, XContent, VideoContent, WebsiteContent, YoutubeContent, ContentType, MapContent, ImageGalleryContent, MailingListContent, RequestPaymentContent, SupportMeContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, ShopContent, BookingSectionContent, FaqSectionContent } from '@brand-page';
 import type { ContentSettingsConfig, ContentSettingsField, ContentSettingsMultiField } from '../models';
 export declare const LOGO_SETTINGS_CONFIG: () => ContentSettingsConfig<Omit<LogoContent, "version" | "logoVariation" | "logoImageHeight" | "logoImageWidth" | "logoLastUpdate" | "logoImageBase64Url">>;
 export declare const GENERAL_LINK_CONTENT_SETTINGS_CONFIG: () => ContentSettingsConfig<GeneralLinkContent>;
@@ -51,4 +51,5 @@ export declare const SHOP_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<S
     isShippingEnabled: boolean;
 }>;
 export declare const BOOKING_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<BookingSectionContent>;
+export declare const FAQ_SECTION_SETTINGS_CONFIG: () => ContentSettingsConfig<FaqSectionContent>;
 export declare const CONTENT_SETTINGS_CONFIGS: () => Record<ContentType, ContentSettingsConfig<any>>;

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

@@ -1,5 +1,5 @@
-import { SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
-import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, } from '../models';
+import { FAQ_DISPLAY_STYLES, FAQ_MAX_ITEMS, SOCIAL_LINKS_ICON_DISPLAY_STYLES, BRAND_PAGE_TYPES, DIVIDER_STYLES, MEDIA_TYPES, BUTTON_LINK_TYPE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, MIN_TEXT_SIZE_PX, MAX_TEXT_SIZE_PX, TEXT_COLUMNS, DEFAULT_SHAPE_SIZE, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, GettyVideoMedia, } from '@brand-page';
+import { createInitialButtonContent, createInitialImageContent, createInitialProfileContent, createInitialTextContent, createInitialVideoContent, createInitialLogoContent, createInitialMapContent, createInitialImageGalleryContent, createInitialGeneralLinkContent, createInitialMailingListContent, createInitialRequestPaymentContent, createInitialSupportMeContent, createInitialContactFormContent, CONTENT_SETTINGS_DISPLAY_MODES, createInitialBannerSectionContent, createInitialSocialLinksContent, createInitialImagesSectionContent, createInitialTestimonialSectionContent, createInitialAboutSectionContent, createInitialDividerSectionContent, createInitialShapesSectionContent, VARIANT_DISPLAY_MODES, createInitialShopContent, createInitialBookingSectionContent, createInitialFaqSectionContent, createInitialFaqQuestionStyle, createInitialFaqAnswerStyle, } from '../models';
 import * as uuid from 'uuid';
 import { colorConvertor, backgroundColorConvertor, borderColorConvertor, displayStyleConvertor, galleryTypeConvertor, imageAspectRatioConvertor, textAlignmentOptionsConvertor, videoContentStateConvertor, fillColorConvertor, bannerAlignDisplayStyleConvertor, aboutDisplayStyleConvertor, dividerStyleConvertor, shapeSizeOptionsConvertor, buttonLinkStyleConvertor, textSizeValueConvertor, textColumnStyleConvertor, contactLayoutStyleConvertor, paymentLinkDisplayStyleConvertor, shopDisplayConvertor, shopAspectRatioConvertor, } from '../convertors';
 import { ALIGN_CENTERED, DISPLAY_STYLE_COLLAPSED, DISPLAY_STYLE_PREVIEW, } from '@brand-page';
@@ -8,6 +8,7 @@ import { contactFormCardColorDefaultGetter, paymentFillColorFieldDefaultGetter,
 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 { bannerLinkTypeVisibilityAssessor, bannerSectionPageVisibilityAssessor, bannerSectionUrlVisibilityAssessor, bannerDisplayTypeVisibilityAssessor, bannerOverlayOptionsVisibilityAssessor, } from '../assessors/banner-section-description-visibility.assessor';
@@ -2807,6 +2808,103 @@ export const BOOKING_SECTION_SETTINGS_CONFIG = () => ({
     isEnabled: true,
     isLocked: false,
 });
+const FAQ_FIELD_GROUP_IDS = {
+    settings: 'settings',
+    items: 'items',
+    style: 'style',
+};
+export const FAQ_SECTION_SETTINGS_CONFIG = () => ({
+    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(),
+        title: {
+            type: 'text',
+            placeholder: contentSettingsTr(`titlePlaceholder`),
+            title: contentSettingsTr(`titleTitle`),
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            maxLength: 200,
+        },
+        description: {
+            type: 'textarea',
+            placeholder: contentSettingsTr(`descriptionPlaceholder`),
+            title: contentSettingsTr(`descriptionTitle`),
+            groupId: FAQ_FIELD_GROUP_IDS.settings,
+            maxLength: 1000,
+        },
+        items: {
+            type: 'list-items',
+            defaultValue: [],
+            groupId: FAQ_FIELD_GROUP_IDS.items,
+            maxLength: FAQ_MAX_ITEMS,
+            itemFields: [
+                {
+                    key: 'question',
+                    kind: 'text',
+                    styleKey: 'questionStyle',
+                    defaultStyle: () => createInitialFaqQuestionStyle(),
+                    maxLength: 200,
+                    title: contentSettingsTr(`faqQuestionTitle`),
+                    placeholder: contentSettingsTr(`faqQuestionPlaceholder`),
+                    defaultValue: () => contentSettingsTr(`faqNewQuestion`),
+                },
+                {
+                    key: 'answer',
+                    kind: 'textarea',
+                    styleKey: 'answerStyle',
+                    defaultStyle: () => createInitialFaqAnswerStyle(),
+                    maxLength: 1000,
+                    title: contentSettingsTr(`faqAnswerTitle`),
+                    placeholder: contentSettingsTr(`faqAnswerPlaceholder`),
+                    defaultValue: () => contentSettingsTr(`faqNewAnswer`),
+                },
+            ],
+        },
+        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),
+        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 = () => ({
     logo: LOGO_SETTINGS_CONFIG(),
     'general-link': GENERAL_LINK_CONTENT_SETTINGS_CONFIG(),
@@ -2840,4 +2938,5 @@ export const CONTENT_SETTINGS_CONFIGS = () => ({
     '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/lib/src/brand-page-maker/convertors/faq-display-style.convertor.d.ts

@@ -0,0 +1,3 @@
+import type { ButtonGroupConfig, ValueConvertor } from '../models';
+import type { FaqSectionContent } from '@brand-page/models';
+export declare const faqDisplayStyleConvertor: ValueConvertor<string | null, ButtonGroupConfig, Partial<FaqSectionContent>>;

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

@@ -0,0 +1,47 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+import { converterTr } from '@src/composables/useTranslate';
+const ICON_VIEW_BOX = '0 0 96 56';
+export const faqDisplayStyleConvertor = {
+    convertBackToMultipleValues: true,
+    convert(value) {
+        return {
+            options: [
+                {
+                    title: converterTr(`faqCenteredAccordion`),
+                    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: converterTr(`faqSplitAccordion`),
+                    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: converterTr(`faqGrid`),
+                    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',
+                },
+            ],
+        };
+    },
+    // The heading sits left beside the accordion in split, centred above it otherwise.
+    convertBack(config) {
+        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/lib/src/brand-page-maker/models/content-settings-configs.d.ts

@@ -1,4 +1,4 @@
-import type { BrandPageContext, BrandPageType, Content, ContentType } from '@brand-page';
+import type { BrandPageContext, BrandPageType, Content, ContentType, TextStyleDeclaration } from '@brand-page';
 import type { ContentReplaceImageSettings } from '@shared/content-settings/models';
 import type { UIUserFeatures } from '@src/constants/ui';
 import type { OptionsConvertor, ValueConvertor } from './convertor.model';
@@ -52,6 +52,7 @@ export declare const ITEM_FIELD_TYPES: {
     readonly 'color-replacements': "color-replacements";
     readonly 'testimonial-items': "testimonial-items";
     readonly 'text-items': "text-items";
+    readonly 'list-items': "list-items";
     readonly 'page-dropdown': "page-dropdown";
     readonly 'personalisation-override': "personalisation-override";
 };
@@ -104,6 +105,26 @@ export interface ContentSettingsField<TContent> {
      * Defaults to `${fieldName}Style` when not specified.
      */
     styleName?: string;
+    /** `list-items` only: the per-item inputs, in order. The first `text` input labels the row. */
+    itemFields?: ListItemFieldSchema[];
+}
+export interface ListItemFieldSchema {
+    key: string;
+    /** The plain input used when the rich-text editor is unavailable. */
+    kind: 'text' | 'textarea';
+    title: string;
+    placeholder?: string;
+    maxLength?: number;
+    /**
+     * The item field that holds this text's style. Set it to make the text rich text —
+     * the same editor as a section title, writing this item's own style — whenever the
+     * section allows rich text. Without rich text, a font-style control edits it instead.
+     */
+    styleKey?: string;
+    /** Style a first item starts with; later items copy the last item's style. */
+    defaultStyle?: () => TextStyleDeclaration;
+    /** Value a newly added item starts with. */
+    defaultValue?: () => string;
 }
 export interface ContentSettingsMultiField<TContent, TField> extends Omit<ContentSettingsField<TContent>, 'type' | 'role'> {
     type: ItemMultiFieldType;

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

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

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

@@ -1,5 +1,5 @@
 import { BrandPageModel } from '@brand-page';
-import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent } from '@brand-page';
+import type { ButtonContent, ContentType, ImageContent, ProfileContent, TextContent, VideoContent, LogoContent, LogoTheme, MapContent, ImageGalleryContent, GeneralLinkContent, MailingListContent, RequestPaymentContent, ContactFormContent, BannerSectionContent, SocialLinksContent, ImagesSectionContent, TestimonialSectionContent, AboutSectionContent, DividerSectionContent, ShapesSectionContent, BrandPageType, SupportMeContent, ShopContent, BookingSectionContent, TextStyleDeclaration, FaqSectionContent } from '@brand-page';
 import type { CreateInitialContentFunction } from './content-settings-configs';
 import type { CreateInitialContentOptions } from '@shared/content-settings/models';
 export declare const createInitialButtonContent: (type: ContentType, iconUrl: string, options?: CreateInitialContentOptions) => () => ButtonContent;
@@ -18,6 +18,9 @@ export declare const createInitialSupportMeContent: (options?: CreateInitialCont
 export declare const createInitialContactFormContent: CreateInitialContentFunction<ContactFormContent>;
 export declare const createInitialBannerSectionContent: CreateInitialContentFunction<BannerSectionContent>;
 export declare const createInitialBookingSectionContent: CreateInitialContentFunction<BookingSectionContent>;
+export declare const createInitialFaqQuestionStyle: (applyAutoScale?: boolean) => TextStyleDeclaration;
+export declare const createInitialFaqAnswerStyle: (applyAutoScale?: boolean) => TextStyleDeclaration;
+export declare const createInitialFaqSectionContent: CreateInitialContentFunction<FaqSectionContent>;
 export declare const createInitialImagesSectionContent: CreateInitialContentFunction<ImagesSectionContent>;
 export declare const createInitialTestimonialSectionContent: CreateInitialContentFunction<TestimonialSectionContent>;
 export declare const createInitialAboutSectionContent: CreateInitialContentFunction<AboutSectionContent>;

package/lib/src/brand-page-maker/models/content-settings.js

@@ -1,4 +1,4 @@
-import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, } from '@brand-page';
+import { BrandPageModel, PageStyles, FORM_FIELD_IDS, PAYMENT_OPTION_DISPLAY_TYPES, PAYMENT_OPTION_IMAGE_TYPES, SOCIAL_LINKS_ICON_DISPLAY_STYLES, PageHeaderMobile, PageHeaderDesktop, PageFooterMobile, PageFooterDesktop, MEDIA_TYPES, BUTTON_LINK_TYPE, DISPLAY_STYLE_PREVIEW, SUPPORT_ME_CUSTOM_PRODUCT_NAME, DEFAULT_LOGO_HEIGHT, DEFAULT_LOGO_WIDTH, FONT_SIZE_BODY, LINE_HEIGHT_BODY, TEXT_STYLE_TYPES, TEXT_COLUMNS, DEFAULT_LOGO_BACKGROUND_COLOR_RGB, DEFAULT_LOGO_TEXT_COLOR_RGB, EMPTY_LOGO_IMAGE_MODEL, BRAND_PAGE_TYPES, SENSITIVE_CONTENT_TYPES, CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, FAQ_DISPLAY_STYLES, } from '@brand-page';
 import * as uuid from 'uuid';
 import { getColorShades, DEFAULT_CARD_SURFACE_REFERENCE, } from '@brand-page/utils';
 import { contentSettingsTr } from '@src/composables/useTranslate';
@@ -556,6 +556,50 @@ export const createInitialBookingSectionContent = (options) => {
         },
     };
 };
+// Questions follow the Headings role, answers the Paragraphs role.
+export const createInitialFaqQuestionStyle = (applyAutoScale = false) => ({
+    applyAutoScale,
+    textStyleType: TEXT_STYLE_TYPES.headings,
+    textAlign: 'left',
+});
+export const createInitialFaqAnswerStyle = (applyAutoScale = false) => ({
+    applyAutoScale,
+    textStyleType: TEXT_STYLE_TYPES.paragraphs,
+    textAlign: 'left',
+});
+export const createInitialFaqSectionContent = (options) => {
+    const applyAutoScale = options?.brandPageType === BRAND_PAGE_TYPES.brandSite;
+    return {
+        id: uuid.v4(),
+        type: 'faq-section',
+        title: contentSettingsTr(`defaultFaqTitle`),
+        description: 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: contentSettingsTr(`defaultFaqQuestion`),
+                questionStyle: createInitialFaqQuestionStyle(applyAutoScale),
+                answer: contentSettingsTr(`defaultFaqAnswer`),
+                answerStyle: createInitialFaqAnswerStyle(applyAutoScale),
+            },
+        ],
+        titleStyle: {
+            applyAutoScale,
+            textStyleType: TEXT_STYLE_TYPES.titles,
+            textAlign: 'center',
+        },
+        descriptionStyle: {
+            applyAutoScale,
+            textStyleType: TEXT_STYLE_TYPES.paragraphs,
+            textAlign: 'center',
+        },
+        backgroundStyle: {},
+    };
+};
 export const createInitialImagesSectionContent = (options) => {
     return {
         id: uuid.v4(),

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

@@ -158,20 +158,6 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
                 isVariation: boolean;
                 isExcluded: boolean;
             } | undefined;
-            bp_5873_live_preview_prepurchase?: {
-                key: string;
-                value: string;
-                isControl: boolean;
-                isVariation: boolean;
-                isExcluded: boolean;
-            } | undefined;
-            bp_5873_live_preview_postpurchase?: {
-                key: string;
-                value: string;
-                isControl: boolean;
-                isVariation: boolean;
-                isExcluded: boolean;
-            } | undefined;
         };
         isSubsequentPublish: boolean;
         isContextualUpgradeModalVisible: boolean;
@@ -247,20 +233,6 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
                 isVariation: boolean;
                 isExcluded: boolean;
             } | undefined;
-            bp_5873_live_preview_prepurchase?: {
-                key: string;
-                value: string;
-                isControl: boolean;
-                isVariation: boolean;
-                isExcluded: boolean;
-            } | undefined;
-            bp_5873_live_preview_postpurchase?: {
-                key: string;
-                value: string;
-                isControl: boolean;
-                isVariation: boolean;
-                isExcluded: boolean;
-            } | undefined;
         };
         isSubsequentPublish: boolean;
         isContextualUpgradeModalVisible: boolean;
@@ -336,20 +308,6 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
                 isVariation: boolean;
                 isExcluded: boolean;
             } | undefined;
-            bp_5873_live_preview_prepurchase?: {
-                key: string;
-                value: string;
-                isControl: boolean;
-                isVariation: boolean;
-                isExcluded: boolean;
-            } | undefined;
-            bp_5873_live_preview_postpurchase?: {
-                key: string;
-                value: string;
-                isControl: boolean;
-                isVariation: boolean;
-                isExcluded: boolean;
-            } | undefined;
         };
         isSubsequentPublish: boolean;
         isContextualUpgradeModalVisible: boolean;

package/lib/src/brand-page-maker/stores/brandpage-maker/brandpage-maker-store.js

@@ -1477,6 +1477,7 @@ export const useBrandPageMakerStore = defineStore('brandPageMaker', {
                 setVideoUrlsWithToken: videoStore.setVideoUrlsWithToken,
                 isCustomDomain: false,
                 brandPageSlug: brandPageContainerStore.brandPageSlug,
+                activeItemIdByContentId: useUiContentSettingsStore().activeItemIdByContentId,
             });
         },
         gettyVideoIds() {

package/lib/src/brand-page-maker/utils/apply-color-strategy.js

@@ -2,7 +2,7 @@ import { BRAND_PAGE_TYPES } from '@brand-page';
 import { FIELD_SLOT_MAP, raisedLayerFor, strategyRoleRefForField, } from '@shared/color-strategies/color-strategies';
 import { isTransparentDisabled, } from '@shared/content-settings/disable-transparent.util';
 import { setRteTextColor } from '@shared/color-strategies/rte-color';
-import { pairedRteTextField } from '@shared/color-strategies/rte-field-pairs';
+import { pairedRteTextField, RTE_ITEM_FIELD_PAIRS, } from '@shared/color-strategies/rte-field-pairs';
 /**
  * Field types a strategy can assign. `color` fields hold nothing but a colour and are
  * REPLACED via their `valueConvertor`; `text-style` fields hold typography *and* a
@@ -62,6 +62,17 @@ const sectionLayers = (assignable, content, context) => {
             surfaceFields.every(([, field]) => !isTransparentDisabled(field.disableTransparent, context?.brandPageType ?? BRAND_PAGE_TYPES.default)),
     };
 };
+/**
+ * The strategy's text treatment for one text-style field: `color` set, text background
+ * cleared (matching the highlight strip in `setRteTextColor` — the toolbar writes both).
+ * The key is deleted rather than set undefined so `'backgroundColor' in style` checks
+ * downstream stay honest.
+ */
+const withStrategyTextStyle = (current, ref) => {
+    const nextStyle = { ...(current ?? {}), color: ref };
+    delete nextStyle.backgroundColor;
+    return nextStyle;
+};
 /**
  * Build the per-field colour writes a strategy stamps onto a section. Pure — reads the
  * section config + current content and returns a `{ fieldName: value }` partial. Each
@@ -97,16 +108,7 @@ export const buildColorStrategyValues = (config, content, strategyId, context, a
         }
         if (field.type === 'text-style') {
             const current = contentRecord[name];
-            const nextStyle = {
-                ...(current ?? {}),
-                color: ref,
-            };
-            // A strategy owns the text treatment, so it clears the text background colour
-            // too — matching the highlight strip in `setRteTextColor` (the toolbar writes
-            // both). Delete the key rather than set it undefined so `'backgroundColor' in
-            // style` checks downstream stay honest.
-            delete nextStyle.backgroundColor;
-            values[name] = nextStyle;
+            values[name] = withStrategyTextStyle(current, ref);
             // Also stamp the colour into the paired RTE document, if this field drives one.
             // `setRteTextColor` returns undefined for a plain string or legacy HTML RTE, so
             // that doubles as the "nothing to do" test — no separate type guard here.
@@ -133,8 +135,33 @@ export const buildColorStrategyValues = (config, content, strategyId, context, a
         }
         values[name] = field.valueConvertor.convertBack(ref);
     });
+    // Item-level RTE fields (each FAQ question) carry their own style and document, so
+    // the section's field loop above never sees them. Same two halves, per item, written
+    // back as one new list.
+    const itemPairs = typeof contentRecord.type === 'string'
+        ? (RTE_ITEM_FIELD_PAIRS[contentRecord.type] ?? [])
+        : [];
+    itemPairs.forEach((pair) => {
+        const ref = strategyRoleRefForField(strategyId, pair.styleField, content, context, layers, anchors);
+        const items = (values[pair.itemsField] ??
+            contentRecord[pair.itemsField]);
+        if (!ref || !Array.isArray(items)) {
+            return;
+        }
+        values[pair.itemsField] = items.map((item) => {
+            const nextDoc = setRteTextColor(item[pair.textField], ref);
+            return {
+                ...item,
+                [pair.styleField]: withStrategyTextStyle(item[pair.styleField], ref),
+                ...(nextDoc ? { [pair.textField]: nextDoc } : {}),
+            };
+        });
+    });
     return values;
 };
+const isRteDoc = (value) => typeof value === 'object' &&
+    value !== null &&
+    value.type === 'doc';
 /**
  * Apply a strategy to one content item. Shared by both settings surfaces — the focused
  * section panel and the inline list item (divider) — so the write semantics can't drift.
@@ -147,12 +174,15 @@ export const applyColorStrategyToItem = (store, { id, config, content, strategyI
     Object.entries(values).forEach(([name, value]) => {
         store.updateItemValue({ id, name, value });
     });
-    // A recoloured RTE field is emitted as a whole Tiptap document; the paired
-    // style-object writes are plain objects. Only the former needs the live editor
-    // to re-seed, so signal it just when a doc was among the writes.
-    const replacedRteDoc = Object.values(values).some((value) => typeof value === 'object' &&
-        value !== null &&
-        value.type === 'doc');
+    // A recoloured RTE field is emitted as a whole Tiptap document (at the top level,
+    // or inside a rewritten item list); the paired style-object writes are plain
+    // objects. Only the former needs the live editor to re-seed, so signal it just
+    // when a doc was among the writes.
+    const replacedRteDoc = Object.values(values).some((value) => isRteDoc(value) ||
+        (Array.isArray(value) &&
+            value.some((item) => typeof item === 'object' &&
+                item !== null &&
+                Object.values(item).some(isRteDoc))));
     if (replacedRteDoc) {
         markRteResync?.();
     }