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

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, 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, 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',
@@ -2803,6 +2804,116 @@ 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(),
+        // 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 = () => ({
     logo: LOGO_SETTINGS_CONFIG(),
     'general-link': GENERAL_LINK_CONTENT_SETTINGS_CONFIG(),
@@ -2836,4 +2947,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/constants/personalisation.constant.d.ts

@@ -1,8 +1,8 @@
-import type { PersonalisationMappingType, TestimonialItems, TextItem, TextMediaItem, UserPersonalisationItem, UserPersonalisationSection } from '@brand-page/models';
+import type { FaqItem, PersonalisationMappingType, TestimonialItems, TextItem, TextMediaItem, UserPersonalisationItem, UserPersonalisationSection } from '@brand-page/models';
 export type ContentPersonalisationMapping<T> = {
     [key in Exclude<keyof UserPersonalisationSection, 'items'> | keyof UserPersonalisationItem]?: (keyof T)[];
 };
 export declare const DEFAULT_PERSONALISATION_MAPPING: ContentPersonalisationMapping<any>;
-export declare const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING: ContentPersonalisationMapping<TextMediaItem & TestimonialItems & TextItem>;
+export declare const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING: ContentPersonalisationMapping<TextMediaItem & TestimonialItems & TextItem & FaqItem>;
 export declare const TEXT_MEDIA_CONTENT_TYPES: PersonalisationMappingType[];
 export declare const PERSONALISATION_MAPPINGS: Partial<Record<PersonalisationMappingType, ContentPersonalisationMapping<any>>>;

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

@@ -17,8 +17,8 @@ export const DEFAULT_PERSONALISATION_MAPPING = {
     url: ['url'],
 };
 export const TEXT_MEDIA_ITEMS_PERSONALISATION_MAPPING = {
-    itemTitle: ['title', 'imageTitle', 'name'],
-    itemDescription: ['paragraph', 'testimonials', 'text'],
+    itemTitle: ['title', 'imageTitle', 'name', 'question'],
+    itemDescription: ['paragraph', 'testimonials', 'text', 'answer'],
     itemDescriptionShort: ['position'],
     imageUrls: ['imageUrl'],
 };
@@ -29,6 +29,7 @@ export const TEXT_MEDIA_CONTENT_TYPES = [
     'text-media-items',
     'image-gallery',
     'text',
+    'faq-section',
 ];
 export const PERSONALISATION_MAPPINGS = {
     'general-link': BUTTON_PERSONALISATION_MAPPING,

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, 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,7 @@ 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 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, 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, 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';
@@ -568,6 +568,51 @@ export const createInitialBookingSectionContent = (options) => {
         },
     };
 };
+export const createInitialFaqSectionContent = (options) => {
+    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 = (options) => {
     return {
         id: uuid.v4(),

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

@@ -38,7 +38,6 @@ const hamburgerNavigationConfig = {
     defaultButtonStyle: {},
     displayType: '',
     buttonGroupOption: {},
-    renderAfterLogo: false,
 };
 export const availableNavigationStyleConfigs = [
     // tab
@@ -80,7 +79,6 @@ export const availableNavigationStyleConfigs = [
             dataAttribute: 'data-nav-style-tab-1',
             isSelected: false,
         },
-        renderAfterLogo: false,
     },
     {
         displayType: NAVIGATION_DISPLAY.TAB_2,
@@ -118,7 +116,6 @@ export const availableNavigationStyleConfigs = [
             dataAttribute: 'data-nav-style-tab-2',
             isSelected: false,
         },
-        renderAfterLogo: false,
     },
     // hamburger
     {
@@ -131,7 +128,6 @@ export const availableNavigationStyleConfigs = [
             dataAttribute: 'data-nav-style-hamburger-1',
             isSelected: false,
         },
-        renderAfterLogo: false,
     },
     {
         ...hamburgerNavigationConfig,
@@ -143,7 +139,6 @@ export const availableNavigationStyleConfigs = [
             dataAttribute: 'data-nav-style-hamburger-2',
             isSelected: false,
         },
-        renderAfterLogo: false,
     },
     {
         ...hamburgerNavigationConfig,
@@ -155,7 +150,6 @@ export const availableNavigationStyleConfigs = [
             dataAttribute: 'data-nav-style-hamburger-3',
             isSelected: false,
         },
-        renderAfterLogo: false,
     },
     {
         ...hamburgerNavigationConfig,
@@ -167,7 +161,6 @@ export const availableNavigationStyleConfigs = [
             dataAttribute: 'data-nav-style-hamburger-4',
             isSelected: false,
         },
-        renderAfterLogo: false,
     },
 ];
 export const navigationTypeOptions = () => [

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

@@ -26,6 +26,5 @@ export declare const useAdminLogoSettingsStore: import("pinia").StoreDefinition<
     templates(): AdminPreviewLogoTemplateTemplate[];
 }, {
     setPreviewLogoTemplateModels({ models, }: SetAdminPreviewLogoTemplateModelsPayload): void;
-    addLogoContent(): void;
     selectPreviewLogoTemplateModel(payload: SelectAdminPreviewLogoTemplateModelPayload): void;
 }>;

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

@@ -21,35 +21,6 @@ export const useAdminLogoSettingsStore = defineStore('adminLogoSettings', {
             }
             this.previewLogoTemplateModels = models;
         },
-        addLogoContent() {
-            const contentSettingsStore = useUiContentSettingsStore();
-            contentSettingsStore.addItemByType({
-                type: 'logo',
-                index: 0,
-            });
-            const selectedPreviewLogoTemplateModel = this
-                .selectedPreviewLogoTemplateToken
-                ? this.previewLogoTemplateModels.find((x) => x.logoTemplateToken === this.selectedPreviewLogoTemplateToken)
-                : this.previewLogoTemplateModels.length > 0
-                    ? this.previewLogoTemplateModels[0]
-                    : undefined;
-            if (!selectedPreviewLogoTemplateModel) {
-                console.error('unable to locate logo template model for adding logo');
-                return;
-            }
-            const selectedPreviewLogoImage = logoUtil.safeGetLogoImageFromLogoImageUrl(selectedPreviewLogoTemplateModel.logoImageUrl);
-            contentSettingsStore.items
-                .filter((i) => i.type === 'logo')
-                .filter((i) => !i.settings.content.logoImage.logoDraftToken)
-                .forEach((i) => {
-                const logoContent = i.settings.content;
-                const newLogoContent = Object.assign({}, i.settings.content, { logoImage: selectedPreviewLogoImage });
-                contentSettingsStore.updateContent({
-                    id: logoContent.id,
-                    content: newLogoContent,
-                });
-            });
-        },
         selectPreviewLogoTemplateModel(payload) {
             const uiStore = useUiStore();
             const logoSettings = useUiLogoSettingsStore();