@designcrowd/library.brand-page 6.2.9 → 6.2.10-ast-faq-2

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

@@ -24,6 +24,18 @@ export const useExternalRichTextEditor = () => {
         externalEditor,
     };
 };
+/**
+ * Saves a field's style. An editor bound to a list item (`itemStyleTarget`) saves to that
+ * item's own style instead of the section's `${name}Style`.
+ */
+export const updateFieldTextStyles = (store, itemStyleTarget, payload) => {
+    if (itemStyleTarget) {
+        store.updateListItemTextStyles({ ...payload, target: itemStyleTarget });
+    }
+    else {
+        store.updateTextStyles(payload);
+    }
+};
 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 +216,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 +244,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,7 +324,7 @@ 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({
+            updateFieldTextStyles(contentSettingStore, props.itemStyleTarget, {
                 id: props.rawId,
                 name: props.name,
                 value: {
@@ -488,7 +509,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
             });
         }
         else {
-            contentSettingStore.updateTextStyles({
+            updateFieldTextStyles(contentSettingStore, props.itemStyleTarget, {
                 id: props.rawId,
                 name: props.name,
                 value: {
@@ -584,7 +605,7 @@ selectedGlobalTextStyles, onSelectTextStyleType, updateRichTextEditor, textStyle
         editor,
         onFocus,
         onBlur,
-        triggerEditorStyleChange,
+        triggerEditorStyleChange: (editorOption) => runAsToolbarCommand(() => triggerEditorStyleChange(editorOption)),
         toggleBold,
         toggleItalic,
         toggleUnderline,
@@ -601,7 +622,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,13 +1,14 @@
-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, 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, } 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';
-import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardColorVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
+import { imageFieldVisibilityAssessor, imageOptionVisibilityAssessor, imageGalleryFieldVisibilityAssessor, cardFillVisibilityAssessor, mediaSectionItemsFieldTypeAssessor, dividerToggleFieldVisibilityAssessor, faqAccordionColorFieldVisibilityAssessor, shapeSectionItemsFieldTypeAssessor, colorReplacementVisibilityTypeAssessor, colorReplacementProfileVisibilityTypeAssessor, colorReplacementIconVisibilityTypeAssessor, imagesSectionCardStyleVisibilityAssessor, contactCardColorVisibilityAssessor, imageUrlVisibilityAssessor, displayTypeVisibilityAssessor, logoFieldVisibilityAssessor, shapesSectionCardStyleVisibilityAssessor, shopImageOptionVisibilityAssessor, shopItemColorVisibility, personalisationOverrideVisibility, } from '../assessors';
 import { contactFormCardColorDefaultGetter, paymentFillColorFieldDefaultGetter, paymentTextAndBorderColorFieldDefaultGetter, shopBorderColorFieldDefaultGetter, shopFillColorFieldDefaultGetter, textColorFieldDefaultGetter, } from '../default-getters';
 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';
@@ -15,7 +16,7 @@ import { imagesSectionTextStyleVisibilityAssessor } from '../assessors/images-se
 import { bannerPlaceholderFieldTypeAssessor, bannerSectionFieldTypeAssessor, bannerSectionRoleTypeAssessor, } from '../assessors/banner-section-field.assessor';
 import { isValidSvgUrl } from '@brand-page/utils';
 import { brandPageOrbrandContactTypeVisibilityAssessor, brandSiteTypeVisibilityAssessor, } from '../assessors/brand-page-type-visibility.assessor';
-import { contentSettingsTr } from '@src/composables/useTranslate';
+import { commonTr, contentSettingsTr } from '@src/composables/useTranslate';
 const MediaFieldNames = {
     aspectRatio: 'aspectRatio',
     iconUrl: 'iconUrl',
@@ -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,
+        },
+        // 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 = () => ({
     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,49 @@
+import { FAQ_DISPLAY_STYLES } from '@brand-page/constants';
+const ICON_VIEW_BOX = '0 0 96 56';
+export const faqDisplayStyleConvertor = {
+    convertBackToMultipleValues: true,
+    convert(value) {
+        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) {
+        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

@@ -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 'faq-items': "faq-items";
     readonly 'page-dropdown': "page-dropdown";
     readonly 'personalisation-override': "personalisation-override";
 };

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',
+    'faq-items': 'faq-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,52 @@ 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: {},
+        iconColor: { color: '#555555' },
+        dividerColor: { backgroundColor: '#dcdcdc' },
+    };
+};
 export const createInitialImagesSectionContent = (options) => {
     return {
         id: uuid.v4(),

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

@@ -1,7 +1,7 @@
 import { type getWebsiteContextualUpgradeResponse } from '../../../clients/brand-page-client';
 import { type LogoDraftAsset, type LogoTemplateAsset } from '@brand-page-maker/stores';
 import type { CustomDomainConfigModel, CustomDomainModel } from '@brand-page-maker/models';
-import { type AbTest } from '@brand-page';
+import { type AbTest, type SensitiveContent } from '@brand-page';
 import type { WebsiteSlugCheckResponse } from '@brand-page-maker/models/api.model';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES } from '@designcrowd/fe-shared-lib';
 import { type OnSearchTermChangedCallback } from '@shared/template-settings/store';
@@ -418,13 +418,14 @@ export declare const useBrandPageContainerStore: import("pinia").StoreDefinition
     startBrandPageSlugEditMode(): void;
     triggerLockedContentClickedEvent(contentType: string): Promise<void>;
     unpublishBrandPage(): Promise<void>;
-    updateBrandPageSettings({ description, title }: {
-        description: any;
-        title: any;
+    updateBrandPageSettings(payload: {
+        description: string;
+        title: string;
     }): Promise<void>;
-    updateSensitiveContent({ sensitiveContent }: {
-        sensitiveContent: any;
+    updateSensitiveContent(payload: {
+        sensitiveContent: SensitiveContent;
     }): Promise<void>;
+    saveSiteBeforeFirstSettingsWrite(): Promise<boolean>;
     createBrandPageCustomDomain({ domainName }: {
         domainName: any;
     }): Promise<false | undefined>;

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

@@ -863,13 +863,17 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 console.error(err);
             }
         },
-        async updateBrandPageSettings({ description, title }) {
+        async updateBrandPageSettings(payload) {
+            if (!this.designDraftToken &&
+                !(await this.saveSiteBeforeFirstSettingsWrite())) {
+                return;
+            }
             const brandPageMakerStore = useBrandPageMakerStore();
             try {
                 this.setIsPublishing({ isPublishing: true });
                 const result = await brandPageClient.updateBrandPageMetaAsync(brandPageMakerStore.brandPageType, this.designDraftToken, {
-                    pageDescription: description,
-                    pageTitle: title,
+                    pageDescription: payload.description,
+                    pageTitle: payload.title,
                     metaKeywords: [],
                 });
                 if (!result) {
@@ -893,12 +897,16 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 await brandPageMakerStore.showNextNotificationMessage();
             }
         },
-        async updateSensitiveContent({ sensitiveContent }) {
+        async updateSensitiveContent(payload) {
+            if (!this.designDraftToken &&
+                !(await this.saveSiteBeforeFirstSettingsWrite())) {
+                return;
+            }
             const brandPageMakerStore = useBrandPageMakerStore();
             try {
                 this.setIsPublishing({ isPublishing: true });
                 const result = await brandPageClient.updateSensitiveContentAsync(brandPageMakerStore.brandPageType, this.designDraftToken, {
-                    sensitiveContentType: sensitiveContent,
+                    sensitiveContentType: payload.sensitiveContent,
                 });
                 if (!result) {
                     await brandPageMakerStore.enqueueErrorMessage();
@@ -921,6 +929,45 @@ export const useBrandPageContainerStore = defineStore('brandPageContainer', {
                 await brandPageMakerStore.showNextNotificationMessage();
             }
         },
+        // Pre-purchase drafts are saved by the host, never the maker — save-publish.md.
+        async saveSiteBeforeFirstSettingsWrite() {
+            if (this.isAdminMaker) {
+                return false;
+            }
+            const brandPageMakerStore = useBrandPageMakerStore();
+            if (this.isPrePurchase) {
+                window.dispatchEvent(new Event('SAVE_PROGRESS_CLICKED'));
+                // The host's saveDesign sets isSaving synchronously on the dispatch; if it
+                // didn't, no listener is wired and the click would otherwise go silent.
+                if (!this.isSaving) {
+                    await brandPageMakerStore.enqueueErrorMessage();
+                    await brandPageMakerStore.showNextNotificationMessage();
+                }
+                return false;
+            }
+            if (this.isSaving || this.isPublishing) {
+                await brandPageMakerStore.enqueueErrorMessage();
+                await brandPageMakerStore.showNextNotificationMessage();
+                return false;
+            }
+            this.setIsPublishing({ isPublishing: true });
+            // saveBrandPage enqueues its own error on a throw but not on an empty response.
+            const messagesBeforeSave = [
+                ...brandPageMakerStore.notificationMessageQueue,
+            ];
+            const result = await this.saveBrandPage({ saveOnly: true });
+            if (!result || !result.saved) {
+                const hasErrorQueued = brandPageMakerStore.notificationMessageQueue.some((message) => message.type === 'error' && !messagesBeforeSave.includes(message));
+                if (!hasErrorQueued) {
+                    await brandPageMakerStore.enqueueErrorMessage();
+                }
+                this.setIsPublishing({ isPublishing: false });
+                await brandPageMakerStore.showNextNotificationMessage();
+                return false;
+            }
+            this.setTriggerSaveSuccessMessage({ triggerSaveSuccessMessage: false });
+            return true;
+        },
         async createBrandPageCustomDomain({ domainName }) {
             const brandPageMakerStore = useBrandPageMakerStore();
             const customDomainResponse = await brandPageClient.createBrandPageCustomDomainAsync(brandPageMakerStore.brandPageType, this.designDraftToken, domainName, false);

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

@@ -2,7 +2,8 @@ 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 { isTiptapDocument } from '@brand-page-maker/utils/rte-shape';
+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 +63,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 +109,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,6 +136,28 @@ 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;
 };
 /**
@@ -147,12 +172,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) => isTiptapDocument(value) ||
+        (Array.isArray(value) &&
+            value.some((item) => typeof item === 'object' &&
+                item !== null &&
+                Object.values(item).some(isTiptapDocument))));
     if (replacedRteDoc) {
         markRteResync?.();
     }

package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts

@@ -36,6 +36,12 @@ export declare const getPlainTextFromRTE: (content: unknown) => string;
  */
 export declare const getRteTextLength: (value: RichTextValue | null | undefined) => number;
 export declare const replaceTextInRTE: (existingHtml: string, newText: string) => string;
+/**
+ * Convert a new list item's plain text to RTE, as adding its section would. Goes through
+ * `transformRTEField` (element-first colour), so an item that copied a sibling's
+ * strategy-coloured style bakes that colour rather than the linked global one.
+ */
+export declare const switchRteItemFieldsToRTE: (sectionType: string, item: Record<string, unknown>, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
 export declare const transformToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState, newContent?: Content, type?: TextStyleType, newStyle?: TextStyleDeclaration) => void;
 export declare const switchAllContentToRTE: (uiPageSettingStore: PageSettingsState, externalEditor: Editor, uiStyleSettingsStore?: StyleSettingsState) => void;
 export declare const getUpdatedHTMLFromEditor: (externalEditor: Editor, contentText: RichTextValue, newContentStyle: TextStyleDeclaration) => string | import("@tiptap/core").DocumentType<Record<string, any> | undefined, import("@tiptap/core").NodeType<string, Record<string, any> | undefined, any, (import("@tiptap/core").NodeType<any, any, any, any> | import("@tiptap/core").TextType<import("@tiptap/core").MarkType<any, any>>)[]>[]>;