@designcrowd/library.brand-page 5.10.2 → 5.10.3-jj1

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

@@ -46,4 +46,16 @@ export interface Content {
     id: string;
     type: ContentType;
     personalisationRole?: PersonalisationRole;
+    imageUrlOverride?: string;
+    imageUrlsOverride?: string;
+    avatarImageUrlOverride?: string;
+    backgroundImageUrlOverride?: string;
+    nameOverride?: string;
+    titleOverride?: string;
+    descriptionOverride?: string;
+    buttonTextOverride?: string;
+    ctaTitleOverride?: string;
+    urlOverride?: string;
+    textOverride?: string;
+    paragraphOverride?: string;
 }

package/lib/src/brand-page/models/index.d.ts

@@ -115,6 +115,8 @@ export interface ImageItem {
     colorReplacements?: ColorReplacement[];
     size?: string;
     imageLink: string;
+    imageUrlOverride?: string;
+    imageTitleOverride?: string;
 }
 export type ImageGalleryItem = ImageItem;
 export interface ImageGalleryContent extends Content {
@@ -275,6 +277,8 @@ export interface TextMediaItem extends ImageItem {
     paragraph: string;
     imageLink: string;
     itemsId: number;
+    titleOverride?: string;
+    paragraphOverride?: string;
 }
 export interface TextShapeItem extends TextMediaItem {
     colorReplacements: ColorReplacement[];
@@ -286,6 +290,8 @@ export interface ShapeItem extends ImageItem {
     mediaType: 'shape';
     title?: string;
     paragraph?: string;
+    titleOverride?: string;
+    paragraphOverride?: string;
 }
 export interface TestimonialItems {
     imageUrl: string;
@@ -296,10 +302,15 @@ export interface TestimonialItems {
     mediaType: string;
     size?: string;
     aspectRatio?: number | null;
+    nameOverride?: string;
+    testimonialsOverride?: string;
+    imageUrlOverride?: string;
+    positionOverride?: string;
 }
 export interface TextItem {
     text: string;
     textStyle: TextStyleDeclaration;
+    textOverride?: string;
 }
 export interface ShapesSectionContent extends Content, MediaSection {
     type: 'shapes-section';

package/lib/src/brand-page/models/user-personalisation.model.d.ts

@@ -70,7 +70,7 @@ export declare enum ShapeAspectRatioCategory {
     Wide = "wide"
 }
 export type ContentPersonalisationMapping<T extends Content> = {
-    [key in keyof UserPersonalisationSection]?: (keyof T)[];
+    [key in keyof UserPersonalisationSection | keyof UserPersonalisationItem]?: (keyof T)[];
 };
 export interface UserPersonalisationSectionWithIndices extends UserPersonalisationSection {
     imageIndex: number;

package/lib/src/brand-page/utils/personalisation.util.d.ts

@@ -1,5 +1,10 @@
 import { ShapeAspectRatioCategory } from '../models';
-import type { BrandPageModel, PageModel, PageStyles, UserPersonalisation, UserPersonalisationWithIndices } from '../models';
+import type { BrandPageModel, BrandPageType, ContentPersonalisationMapping, PageModel, PageStyles, PersonalisationMappingType, UserPersonalisation, UserPersonalisationItem, UserPersonalisationSection, UserPersonalisationWithIndices } from '../models';
+export declare const getPersonalisationMappingForContentType: (contentType: PersonalisationMappingType) => ContentPersonalisationMapping<any>;
+export declare const getModifiedPersonalisationPropertyKeyBasedOnCondition: (property: keyof UserPersonalisationSection | keyof UserPersonalisationItem, option: {
+    brandPageType: BrandPageType;
+    isSvgShape?: boolean;
+}) => keyof UserPersonalisationSection | keyof UserPersonalisationItem;
 export declare const filterPersonalisationByShapesAspectRatio: (personalisation: UserPersonalisationWithIndices, aspectRatio: ShapeAspectRatioCategory | null) => UserPersonalisationWithIndices;
 export declare const applyUserPersonalisationToBrandPageContentsAsync: (userPersonalisation: UserPersonalisationWithIndices, pages: PageModel[]) => Promise<{
     pages: PageModel[];

package/lib/src/brand-page/utils/personalisation.util.js

@@ -1,9 +1,10 @@
+import { escapeContentText } from '../../shared/content-settings/utils';
 import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '../../brand-page-maker/constants/personalisation.constant';
 import { BRAND_PAGE_TYPES, ShapeAspectRatioCategory } from '../models';
 import { getColorReplacementsFromSvgString, getColorReplacementsFromSvgStringServer, } from './svg-color.util';
 const ASPECT_RATIO_LOWER_CUT_OFF = 0.5;
 const ASPECT_RATIO_UPPER_CUT_OFF = 1.5;
-const getPersonalisationMappingForContentType = (contentType) => {
+export const getPersonalisationMappingForContentType = (contentType) => {
     const baseMapping = Object.assign({}, DEFAULT_PERSONALISATION_MAPPING);
     const contentBasedMapping = PERSONALISATION_MAPPINGS[contentType];
     if (contentBasedMapping) {
@@ -15,13 +16,19 @@ const getPersonalisationMappingForContentType = (contentType) => {
     }
     return Object.assign({}, baseMapping, contentBasedMapping);
 };
-const getPersonalisationValueAsync = async (section, property, value, brandPageType) => {
-    let propertyValue = section[property];
-    if (typeof value === 'string' &&
-        (property === 'imageUrls' || property === 'shapes')) {
-        property = value.endsWith('.svg') ? 'shapes' : 'imageUrls';
-        propertyValue = section[property];
+export const getModifiedPersonalisationPropertyKeyBasedOnCondition = (property, option) => {
+    let newProperty = property;
+    if (property === 'description' &&
+        option.brandPageType !== BRAND_PAGE_TYPES.brandSite) {
+        newProperty = 'descriptionShort';
+    }
+    else if (property === 'imageUrls' || property === 'shapes') {
+        newProperty = !!option.isSvgShape ? 'shapes' : 'imageUrls';
     }
+    return newProperty;
+};
+const getPersonalisationValueAsync = async (section, property) => {
+    const propertyValue = section[property];
     if ((property === 'imageUrls' && section.imageUrls?.length === 0) ||
         (property === 'shapes' && section.shapes?.length === 0)) {
         return { value: undefined, section };
@@ -32,11 +39,6 @@ const getPersonalisationValueAsync = async (section, property, value, brandPageT
             property === 'itemDescriptionShort')) {
         return { value: undefined, section };
     }
-    if (property === 'description' &&
-        brandPageType === BRAND_PAGE_TYPES.default) {
-        property = 'descriptionShort';
-        propertyValue = section[property];
-    }
     switch (property) {
         case 'imageUrls':
             if (section.imageUrls) {
@@ -195,8 +197,8 @@ const getPersonalisationValueAsync = async (section, property, value, brandPageT
     }
     return { value: propertyValue, section };
 };
-const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyValue, personalisationRole, personalisation, contentType) => {
-    if (!personalisationRole) {
+const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyValue, personalisationRole, personalisationOverride, personalisation, contentType) => {
+    if (!personalisationRole || personalisationOverride === 'none') {
         return { value: undefined, personalisation };
     }
     const matchingValue = Object.entries(personalisation).find(([key]) => key === `${personalisationRole}Section`);
@@ -209,8 +211,12 @@ const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyVal
     if (!matchingProperty) {
         return { value: undefined, personalisation };
     }
-    const property = matchingProperty[0];
-    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property, propertyValue, personalisation.type);
+    let property = matchingProperty[0];
+    property = getModifiedPersonalisationPropertyKeyBasedOnCondition(property, {
+        brandPageType: personalisation.type,
+        isSvgShape: typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
+    });
+    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
     return {
         value,
         personalisation: {
@@ -246,7 +252,9 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisa
                 isApplied = isApplied || output.isApplied;
                 continue;
             }
-            if (value) {
+            // If original value is falsy, skip personalisation due to curation team have design the UI to no have any data
+            if (value &&
+                (typeof value !== 'string' || !!escapeContentText(value)?.trim())) {
                 if (shouldFilterShapeContentsByAspectRatio(personalisationRole, mappingType, key, value)) {
                     const aspectRatio = Number(value);
                     const aspectRatioCategory = getShapeAspectRatioCategory(aspectRatio);
@@ -254,9 +262,11 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisa
                         newPersonalisation = filterPersonalisationByShapesAspectRatio(newPersonalisation, aspectRatioCategory);
                     }
                 }
-                const { personalisation: updatedPersonalisation, value: personalisationValue, valuesToUpdate: newValuesToUpdate, } = await getPersonalisationValueFromPropertyAsync(key, value, personalisationRole, newPersonalisation, mappingType);
+                const { personalisation: updatedPersonalisation, value: personalisationValue, valuesToUpdate: newValuesToUpdate, } = await getPersonalisationValueFromPropertyAsync(key, value, personalisationRole, content[`${key}Override`], newPersonalisation, mappingType);
                 newPersonalisation = updatedPersonalisation;
                 if (personalisationValue) {
+                    console.log('newContents', content);
+                    console.log('1111', personalisationValue, '--', key, '--', value);
                     newContents[key] = personalisationValue;
                     if (newValuesToUpdate) {
                         for (const [k, v] of Object.entries(newValuesToUpdate)) {

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

@@ -14,3 +14,4 @@ export * from './color-replacement-icon-visibility.assessor';
 export * from './contact-form-visibility.assessor';
 export * from './logo-field-visibility.assessor';
 export * from './shop-item-color-visibility.assessor';
+export * from './personalisation-visibility.assessor';

package/lib/src/brand-page-maker/assessors/index.js

@@ -14,3 +14,4 @@ export * from './color-replacement-icon-visibility.assessor';
 export * from './contact-form-visibility.assessor';
 export * from './logo-field-visibility.assessor';
 export * from './shop-item-color-visibility.assessor';
+export * from './personalisation-visibility.assessor';

package/lib/src/brand-page-maker/assessors/personalisation-visibility.assessor.d.ts

@@ -0,0 +1,3 @@
+import { type Content } from '../../brand-page';
+import type { VisibilityAssessor } from '../models';
+export declare const personalisationOverrideVisibility: VisibilityAssessor<Content>;

package/lib/src/brand-page-maker/assessors/personalisation-visibility.assessor.js

@@ -0,0 +1,20 @@
+import { isTextContent } from '../../brand-page/utils';
+import { BRAND_PAGE_TYPES } from '../../brand-page';
+// Accepts an optional third parameter for the target property key
+export const personalisationOverrideVisibility = (content, context, targetPropertyKey) => {
+    const personalisationRoleEnabled = Boolean(content.personalisationRole);
+    if (!personalisationRoleEnabled) {
+        return false;
+    }
+    if (isTextContent(content)) {
+        if (context?.brandPageType === BRAND_PAGE_TYPES.brandSite &&
+            targetPropertyKey === 'text') {
+            return false;
+        }
+        else if (context?.brandPageType !== BRAND_PAGE_TYPES.brandSite &&
+            targetPropertyKey === 'textItems') {
+            return false;
+        }
+    }
+    return true;
+};

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

@@ -8,6 +8,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                 id: string;
                 type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                 personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                imageUrlOverride?: string | undefined;
+                imageUrlsOverride?: string | undefined;
+                avatarImageUrlOverride?: string | undefined;
+                backgroundImageUrlOverride?: string | undefined;
+                nameOverride?: string | undefined;
+                titleOverride?: string | undefined;
+                descriptionOverride?: string | undefined;
+                buttonTextOverride?: string | undefined;
+                ctaTitleOverride?: string | undefined;
+                urlOverride?: string | undefined;
+                textOverride?: string | undefined;
+                paragraphOverride?: string | undefined;
             };
             fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
         };

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.d.ts

@@ -420,6 +420,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -457,6 +469,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -494,6 +518,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -531,6 +567,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -568,6 +616,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -605,6 +665,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.js

@@ -1117,6 +1117,7 @@ export const SampleAdminMode = () => {
                 unsplashApplicationName: '',
                 templateCategories: [],
                 initialCategories: {},
+                isPersonalisationEnabled: true,
             };
             return {
                 viewModel,
@@ -1157,6 +1158,7 @@ export const SampleAdminModeBrandSite = {
                 unsplashApplicationName: '',
                 templateCategories: [],
                 initialCategories: {},
+                isPersonalisationEnabled: true,
             };
             return {
                 viewModel,

package/lib/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-examples.js

@@ -130,55 +130,9 @@ export const BRAND_SITE = {
             title: 'Home',
             slug: 'home',
             contents: [
-                {
-                    id: '837a501d-a6b7-4803-9859-d264a6d3b82c',
-                    url: '',
-                    size: '100%',
-                    type: 'banner-section',
-                    title: 'Building the Future, One Project at a Time.',
-                    imageUrl: 'https://bcassetcdn.com/shapes/prod/b2efecd4-f406-4b20-b9a6-f362fb0db749.svg',
-                    pageSlug: '',
-                    cardStyle: {
-                        backgroundColor: 'rgb(255,255,255)',
-                    },
-                    mediaType: 'shape',
-                    buttonText: 'Explore Portfolio',
-                    titleStyle: {
-                        color: 'logo-text-color',
-                        fontSize: '4.375em',
-                        textAlign: 'left',
-                        fontFamily: 'Oswald',
-                        fontWeight: 'bold',
-                        lineHeight: '1.5',
-                        textDecoration: '',
-                    },
-                    description: `<p style="text-align: left"><span style="font-family: Nunito; font-size: 1.5em; line-height: 1.5; color: rgb(0, 0, 0)">We're a team of passionate construction professionals dedicated to </span></p><p><br /></p><p style="text-align: left"><span style="font-family: Nunito; font-size: 1.5em; line-height: 1.5; color: rgb(0, 0, 0)">exceeding client expectations and creating exceptional spaces.</span></p></br></br>`,
-                    displayStyle: 'right-aligned',
-                    buttonLinkType: 'page',
-                    backgroundStyle: {
-                        backgroundColor: 'logo-background-color',
-                    },
-                    buttonTextStyle: {
-                        color: 'logo-background-color',
-                        fontSize: '1.25rem',
-                        fontFamily: 'Nunito',
-                        lineHeight: '1.875rem',
-                    },
-                    descriptionStyle: {
-                        color: 'logo-text-color',
-                        fontSize: '1.5rem',
-                        textAlign: 'left',
-                        fontFamily: 'Nunito',
-                        lineHeight: '2rem',
-                    },
-                    colorReplacements: [
-                        {
-                            attribute: 'fill',
-                            originalColor: '#2F455C',
-                            replacementColor: 'logo-text-color',
-                        },
-                    ],
-                },
+                ...Object.values(CONTENT_SETTINGS_CONFIGS())
+                    .filter((x) => x.brandPageType === BRAND_PAGE_TYPES.brandSite)
+                    .map((x) => x.createInitialContent()),
                 {
                     id: '837a501d-a6b7-4803-9859-d264a6d3b82css',
                     url: '',
@@ -233,7 +187,7 @@ export const BRAND_SITE = {
         {
             title: 'About',
             slug: 'about',
-            contents: Object.values(CONTENT_SETTINGS_CONFIGS)
+            contents: Object.values(CONTENT_SETTINGS_CONFIGS())
                 .filter((x) => x.brandPageType === BRAND_PAGE_TYPES.brandSite)
                 .map((x) => x.createInitialContent()),
         },

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

@@ -11,6 +11,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                 id: string;
                 type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                 personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                imageUrlOverride?: string | undefined;
+                imageUrlsOverride?: string | undefined;
+                avatarImageUrlOverride?: string | undefined;
+                backgroundImageUrlOverride?: string | undefined;
+                nameOverride?: string | undefined;
+                titleOverride?: string | undefined;
+                descriptionOverride?: string | undefined;
+                buttonTextOverride?: string | undefined;
+                ctaTitleOverride?: string | undefined;
+                urlOverride?: string | undefined;
+                textOverride?: string | undefined;
+                paragraphOverride?: string | undefined;
             };
             fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
         };
@@ -46,6 +58,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -83,6 +107,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -120,6 +156,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -157,6 +205,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -194,6 +254,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };
@@ -231,6 +303,18 @@ declare const _default: import("vue").DefineComponent<{}, {
                         id: string;
                         type: "image" | "facebook" | "twitter" | "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "instagram" | "youtube" | "linkedin" | "pinterest" | "twitch" | "tiktok" | "map" | "image-gallery" | "mailing-list" | "request-payment" | "support-me" | "contact-form" | "banner-section" | "about-section" | "divider-section" | "images-section" | "testimonial-section" | "social-links" | "shapes-section" | "shop-section";
                         personalisationRole?: "email" | "phone" | "profile" | "website" | "about" | "information" | "media" | undefined;
+                        imageUrlOverride?: string | undefined;
+                        imageUrlsOverride?: string | undefined;
+                        avatarImageUrlOverride?: string | undefined;
+                        backgroundImageUrlOverride?: string | undefined;
+                        nameOverride?: string | undefined;
+                        titleOverride?: string | undefined;
+                        descriptionOverride?: string | undefined;
+                        buttonTextOverride?: string | undefined;
+                        ctaTitleOverride?: string | undefined;
+                        urlOverride?: string | undefined;
+                        textOverride?: string | undefined;
+                        paragraphOverride?: string | undefined;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
                 };