@designcrowd/library.brand-page 5.8.8 → 5.8.9-kp-1

package/lib/src/brand-page/constants/sections/footer-display.constants.d.ts

@@ -11,5 +11,5 @@ export type FooterDisplayStyle = (typeof FOOTER_DISPLAY)[keyof typeof FOOTER_DIS
 interface FooterDisplayStyleConfig {
     option: ButtonGroupOption;
 }
-export declare const FOOTER_DISPLAY_STYLE_CONFIGS: FooterDisplayStyleConfig[];
+export declare const FOOTER_DISPLAY_STYLE_CONFIGS: () => FooterDisplayStyleConfig[];
 export {};

package/lib/src/brand-page/constants/sections/footer-display.constants.js

@@ -1,4 +1,5 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
+import { tr, commonTr } from '../../../composables/useTranslate';
 export const FOOTER_DISPLAY = {
     /** @deprecated */
     ALIGN_CENTERED, // mapped to CENTERED
@@ -7,7 +8,7 @@ export const FOOTER_DISPLAY = {
     CENTERED: 'centered-menu',
     JUSTIFIED: 'justified-menu',
 };
-export const FOOTER_DISPLAY_STYLE_CONFIGS = [
+export const FOOTER_DISPLAY_STYLE_CONFIGS = () => [
     {
         option: {
             value: FOOTER_DISPLAY.CENTERED,
@@ -15,7 +16,7 @@ export const FOOTER_DISPLAY_STYLE_CONFIGS = [
             iconViewBox: '0 0 169 57',
             dataAttribute: FOOTER_DISPLAY.CENTERED,
             isSelected: false,
-            title: 'Centered',
+            title: commonTr('centered'),
         },
     },
     {
@@ -25,7 +26,7 @@ export const FOOTER_DISPLAY_STYLE_CONFIGS = [
             iconViewBox: '0 0 169 57',
             dataAttribute: FOOTER_DISPLAY.JUSTIFIED,
             isSelected: false,
-            title: 'Justified',
+            title: commonTr('justified'),
         },
     },
 ];

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

@@ -277,6 +277,7 @@ export interface TextMediaItem extends ImageItem {
 export interface TextShapeItem extends TextMediaItem {
     colorReplacements: ColorReplacement[];
     mediaType: 'shape';
+    aspectRatio?: number | null;
 }
 export interface ShapeItem extends ImageItem {
     colorReplacements: ColorReplacement[];

package/lib/src/brand-page/models/styles.model.js

@@ -1,4 +1,5 @@
 import { FONT_SIZE_HEADINGS, FONT_SIZE_TITLE, LINE_HEIGHT_HEADINGS, LINE_HEIGHT_TITLE, FONT_SIZE_BODY, LINE_HEIGHT_BODY, DISPLAY_TEXT_TITLE, DISPLAY_TEXT_HEADINGS, DISPLAY_TEXT_BODY, STYLE_THEME_KEYS, FONT_FAMILY_CONFIGS, DEFAULT_FONT_FAMILY_KEY, DISPlAY_TEXT_BUTTONS, } from '../constants';
+import { styleSettingsTr } from '../../composables/useTranslate';
 export const TEXT_STYLE_TYPES = {
     titles: 'titles',
     headings: 'headings',
@@ -81,13 +82,13 @@ export class TextStyles {
         this.textFontFamily = option.textFontFamily || DEFAULT_FONT_FAMILY_KEY;
         this.textStyleOptions = option.textStyleOptions
             ? {
-                [TEXT_STYLE_TYPES.titles]: new TextStyleOption(TEXT_STYLE_TYPES.titles, DISPLAY_TEXT_TITLE, option.textStyleOptions.titles ||
+                [TEXT_STYLE_TYPES.titles]: new TextStyleOption(TEXT_STYLE_TYPES.titles, styleSettingsTr('titles'), option.textStyleOptions.titles ||
                     createDefaultTitlesTextStyleOption()),
-                [TEXT_STYLE_TYPES.headings]: new TextStyleOption(TEXT_STYLE_TYPES.headings, DISPLAY_TEXT_HEADINGS, option.textStyleOptions.headings ||
+                [TEXT_STYLE_TYPES.headings]: new TextStyleOption(TEXT_STYLE_TYPES.headings, styleSettingsTr('headings'), option.textStyleOptions.headings ||
                     createDefaultHeadingsTextStyleOption()),
-                [TEXT_STYLE_TYPES.paragraphs]: new TextStyleOption(TEXT_STYLE_TYPES.paragraphs, DISPLAY_TEXT_BODY, option.textStyleOptions.paragraphs ||
+                [TEXT_STYLE_TYPES.paragraphs]: new TextStyleOption(TEXT_STYLE_TYPES.paragraphs, styleSettingsTr('paragraphs'), option.textStyleOptions.paragraphs ||
                     createDefaultParagraphTextStyleOption()),
-                [TEXT_STYLE_TYPES.buttons]: new TextStyleOption(TEXT_STYLE_TYPES.buttons, DISPlAY_TEXT_BUTTONS, option.textStyleOptions.buttons ||
+                [TEXT_STYLE_TYPES.buttons]: new TextStyleOption(TEXT_STYLE_TYPES.buttons, styleSettingsTr('buttons'), option.textStyleOptions.buttons ||
                     createDefaultButtonTextStyleOption()),
             }
             : createDefaultTextStyleOptions();

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

@@ -23,7 +23,8 @@ export interface UserPersonalisationSection {
     imageSearchTerms?: string[];
     imageUrls?: ImageUrl[];
     shapeSearchTerms?: string[];
-    shapes?: Shape[];
+    mainShapesCollection: ShapeAspectRatioCollection;
+    shapes: Shape[];
     items?: UserPersonalisationItem[];
 }
 export interface UserPersonalisationItem {
@@ -49,6 +50,25 @@ export interface Shape {
     shapeCategoryId: number;
     shapeCategory: any;
 }
+export interface ShapeEsModel {
+    token: string;
+    url: string;
+    categories: string[];
+    tags: string[];
+    enabled: boolean;
+    keepColor: boolean;
+    enabledToAdmin: boolean;
+}
+export interface ShapeAspectRatioCollection {
+    tall: ShapeEsModel[];
+    square: ShapeEsModel[];
+    wide: ShapeEsModel[];
+}
+export declare enum ShapeAspectRatioCategory {
+    Tall = "tall",
+    Square = "square",
+    Wide = "wide"
+}
 export type ContentPersonalisationMapping<T extends Content> = {
     [key in keyof UserPersonalisationSection]?: (keyof T)[];
 };

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

@@ -1 +1,6 @@
-export {};
+export var ShapeAspectRatioCategory;
+(function (ShapeAspectRatioCategory) {
+    ShapeAspectRatioCategory["Tall"] = "tall";
+    ShapeAspectRatioCategory["Square"] = "square";
+    ShapeAspectRatioCategory["Wide"] = "wide";
+})(ShapeAspectRatioCategory || (ShapeAspectRatioCategory = {}));

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

@@ -1,4 +1,6 @@
+import { ShapeAspectRatioCategory } from '../models';
 import type { BrandPageModel, PageModel, PageStyles, UserPersonalisation, UserPersonalisationWithIndices } from '../models';
+export declare const filterPersonalisationByShapesAspectRatio: (personalisation: UserPersonalisationWithIndices, aspectRatio: ShapeAspectRatioCategory | null) => UserPersonalisationWithIndices;
 export declare const applyUserPersonalisationToBrandPageContentsAsync: (userPersonalisation: UserPersonalisationWithIndices, pages: PageModel[]) => Promise<{
     pages: PageModel[];
     isModified: boolean;

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

@@ -1,6 +1,8 @@
 import { DEFAULT_PERSONALISATION_MAPPING, PERSONALISATION_MAPPINGS, TEXT_MEDIA_CONTENT_TYPES, } from '../../brand-page-maker/constants/personalisation.constant';
-import { BRAND_PAGE_TYPES } from '../models';
+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) => {
     const baseMapping = Object.assign({}, DEFAULT_PERSONALISATION_MAPPING);
     const contentBasedMapping = PERSONALISATION_MAPPINGS[contentType];
@@ -49,7 +51,21 @@ const getPersonalisationValueAsync = async (section, property, value, brandPageT
             break;
         case 'imageSearchTerms':
         case 'shapeSearchTerms':
-            if (section.shapes) {
+            if (section.mainShapesCollection.tall.length > 0 ||
+                section.mainShapesCollection.square.length > 0 ||
+                section.mainShapesCollection.wide.length > 0) {
+                const aspectRatioCategory = section.mainShapesCollection.tall.length > 0
+                    ? ShapeAspectRatioCategory.Tall
+                    : section.mainShapesCollection.square.length > 0
+                        ? ShapeAspectRatioCategory.Square
+                        : ShapeAspectRatioCategory.Wide;
+                return {
+                    value: propertyValue[section.shapeIndex %
+                        section.mainShapesCollection[aspectRatioCategory].length],
+                    section,
+                };
+            }
+            else if (section.shapes) {
                 return {
                     value: propertyValue[section.shapeIndex % section.shapes.length],
                     section,
@@ -57,7 +73,33 @@ const getPersonalisationValueAsync = async (section, property, value, brandPageT
             }
             break;
         case 'shapes':
-            if (section.shapes) {
+            console.log(section.mainShapesCollection, 'NEW PERSONALISATION');
+            if (section.mainShapesCollection.tall.length > 0 ||
+                section.mainShapesCollection.square.length > 0 ||
+                section.mainShapesCollection.wide.length > 0) {
+                const aspectRatioCategory = section.mainShapesCollection.tall.length > 0
+                    ? ShapeAspectRatioCategory.Tall
+                    : section.mainShapesCollection.square.length > 0
+                        ? ShapeAspectRatioCategory.Square
+                        : ShapeAspectRatioCategory.Wide;
+                const shapeUrl = propertyValue[section.shapeIndex %
+                    section.mainShapesCollection[aspectRatioCategory].length].url;
+                const svgResponse = await (await fetch(shapeUrl)).text();
+                const colorReplacements = typeof DOMParser !== 'undefined'
+                    ? getColorReplacementsFromSvgString(svgResponse)
+                    : getColorReplacementsFromSvgStringServer(svgResponse);
+                return {
+                    value: shapeUrl,
+                    section: {
+                        ...section,
+                        shapeIndex: section.shapeIndex + 1,
+                    },
+                    valuesToUpdate: {
+                        colorReplacements,
+                    },
+                };
+            }
+            else if (section.shapes) {
                 const shapeUrl = propertyValue[section.shapeIndex % section.shapes.length].url;
                 const svgResponse = await (await fetch(shapeUrl)).text();
                 const colorReplacements = typeof DOMParser !== 'undefined'
@@ -163,6 +205,14 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisa
                 continue;
             }
             if (value) {
+                if (mappingType === 'text-media-items' &&
+                    key === 'aspectRatio' &&
+                    !isNaN(Number(value))) {
+                    const aspectRatioIndex = Number(value);
+                    const aspectRatio = getShapeAspectRatioCategory(aspectRatioIndex);
+                    alert(aspectRatio);
+                    newPersonalisation = filterPersonalisationByShapesAspectRatio(newPersonalisation, aspectRatio);
+                }
                 const { personalisation: updatedPersonalisation, value: personalisationValue, valuesToUpdate: newValuesToUpdate, } = await getPersonalisationValueFromPropertyAsync(key, value, personalisationRole, newPersonalisation, mappingType);
                 newPersonalisation = updatedPersonalisation;
                 if (personalisationValue) {
@@ -204,6 +254,48 @@ const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisa
     }
     return { newContents, isApplied, newPersonalisation };
 };
+export const filterPersonalisationByShapesAspectRatio = (personalisation, aspectRatio) => {
+    if (!aspectRatio) {
+        return personalisation;
+    }
+    const result = {
+        type: personalisation.type,
+    };
+    for (const sectionKey in personalisation) {
+        if (sectionKey === 'type')
+            continue;
+        const section = personalisation[sectionKey];
+        result[sectionKey] = {
+            ...section,
+            mainShapesCollection: {
+                tall: aspectRatio === 'tall'
+                    ? section.mainShapesCollection?.tall || []
+                    : [],
+                square: aspectRatio === 'square'
+                    ? section.mainShapesCollection?.square || []
+                    : [],
+                wide: aspectRatio === 'wide'
+                    ? section.mainShapesCollection?.wide || []
+                    : [],
+            },
+        };
+    }
+    return result;
+};
+const getShapeAspectRatioCategory = (aspectRatio) => {
+    if (!aspectRatio) {
+        return null;
+    }
+    else if (aspectRatio < ASPECT_RATIO_LOWER_CUT_OFF) {
+        return ShapeAspectRatioCategory.Tall;
+    }
+    else if (aspectRatio > ASPECT_RATIO_UPPER_CUT_OFF) {
+        return ShapeAspectRatioCategory.Wide;
+    }
+    else {
+        return ShapeAspectRatioCategory.Square;
+    }
+};
 export const applyUserPersonalisationToBrandPageContentsAsync = async (userPersonalisation, pages) => {
     let isModified = false;
     let currentPersonalisation = userPersonalisation;

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -234,10 +234,11 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundImageUrl({ backgroundImageUrl, }: {
             backgroundImageUrl: string;
         }): void;
-        addBackgroundShape({ shapeUrl, width, height, }: {
+        addBackgroundShape({ shapeUrl, width, height, aspectRatio, }: {
             shapeUrl: string;
             width?: number | undefined;
             height?: number | undefined;
+            aspectRatio?: number | undefined;
         }): void;
         deleteBackgroundShape({ shapeIndex }: {
             shapeIndex: number;

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

@@ -2,11 +2,11 @@ declare const _default: import("vue").DefineComponent<{}, {
     templates: import("vue").ComputedRef<import("../../stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[]>;
     items: import("vue").ComputedRef<{
         id: string;
-        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
         settings: {
             content: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
             };
             fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;

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

@@ -399,7 +399,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         contentErrorCount(): number;
         getContent(state: {
             addContentOptions: {
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -410,11 +410,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 settings: {
                     content: {
                         id: string;
-                        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
@@ -436,7 +436,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../brand-page").Content | undefined;
         getFieldSettings(state: {
             addContentOptions: {
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -447,11 +447,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 settings: {
                     content: {
                         id: string;
-                        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
@@ -473,7 +473,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => import("../../../shared/content-settings/models").ContentItemFieldSettings | undefined;
         getItem(state: {
             addContentOptions: {
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -484,11 +484,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 settings: {
                     content: {
                         id: string;
-                        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
@@ -510,7 +510,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/content-settings/models").ContentItem<any> | undefined;
         getValue(state: {
             addContentOptions: {
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -521,11 +521,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 settings: {
                     content: {
                         id: string;
-                        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
@@ -547,7 +547,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string, fieldName: string) => string | import("../../../brand-page").Content | undefined;
         getItemState(state: {
             addContentOptions: {
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -558,11 +558,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 settings: {
                     content: {
                         id: string;
-                        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
@@ -584,7 +584,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & import("pinia").PiniaCustomStateProperties<import("../../../shared/content-settings/store").ContentSettingsState>): (id: string) => import("../../../shared/content-settings/models").ContentSettingsItemState;
         getItemGroupState(state: {
             addContentOptions: {
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 category: string;
                 createInitialContent: (options: import("../../../shared/content-settings/models").CreateInitialContentOptions) => import("../../../brand-page").Content;
                 displayName: string;
@@ -595,11 +595,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             }[];
             items: {
                 id: string;
-                type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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";
                 settings: {
                     content: {
                         id: string;
-                        type: "email" | "phone" | "logo" | "general-link" | "profile" | "website" | "image" | "video" | "text" | "facebook" | "twitter" | "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";
+                        type: "email" | "phone" | "image" | "logo" | "general-link" | "profile" | "website" | "video" | "text" | "facebook" | "twitter" | "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;
                     };
                     fields: Record<string, import("../../../shared/content-settings/models").ContentItemFieldSettings>;
@@ -654,12 +654,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _setSelectedItemValue({ value: value }: {
             value: string | null;
         }): void;
-        _setSelectedItemImage({ selectedItemId, imageUrl, width, height, colorReplacements, }: {
+        _setSelectedItemImage({ selectedItemId, imageUrl, width, height, colorReplacements, aspectRatio, }: {
             selectedItemId: string | null;
             imageUrl: string;
             width?: number | undefined;
             height?: number | undefined;
             colorReplacements?: import("../../../brand-page").ColorReplacement[] | undefined;
+            aspectRatio?: number | null | undefined;
         }): void;
         _setItems({ items }: {
             items: import("../../../shared/content-settings/models").ContentItem<any>[];
@@ -726,6 +727,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             width?: number | undefined;
             height?: number | undefined;
             colorReplacements?: import("../../../brand-page").ColorReplacement[] | undefined;
+            aspectRatio?: number | null | undefined;
         }): void;
         setItems(payload: {
             items: import("../../../shared/content-settings/models").ContentItem<import("../../../brand-page").Content>[];
@@ -820,7 +822,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "navigation" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../brand-page").LinksItem[] | Partial<import("../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;
@@ -884,8 +886,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         _setSearchTerm({ searchTerm }: {
             searchTerm: string | undefined;
         }): void;
-        _setSelectedTabName({ tabName }: {
-            tabName: "all" | "categories" | "AI";
+        _setSelectedTab({ tabName }: {
+            tabName: "AI" | "all" | "categories";
         }): void;
         _setSelectedCategory({ categoryName, }: {
             categoryName: string | undefined;

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

@@ -23,6 +23,7 @@ import { brandPageContentsSampleData } from './__fixtures__/page-content-items';
 import { setupStoryPinia } from './__fixtures__/store-fixture';
 import { CONTENT_SETTINGS_CONFIGS, DNS_CONFIGURATION_STATUSES, SIDE_BAR_TAB_NAMES, } from '../../constants';
 import { BRAND_SITE_TEMPLATE_SAMPLE } from './__fixtures__/brand-site-template.examples';
+import { setLocaleAsync } from '../../../composables/useTranslate';
 const InitialiseMakerStores = (options) => {
     const isPrePurchase = !!options.prepurchase;
     const brandPageContainerStore = useBrandPageContainerStore();
@@ -205,12 +206,17 @@ export const Sample = () => {
                         selectedContentCategory: 'monetize',
                     },
                 },
+                show: false,
             };
         },
         template: `
-      <BrandPageMaker :view-model="viewModel"/>
+      <BrandPageMaker v-if="show" :view-model="viewModel"/>
     `,
         pinia: setupStoryPinia(),
+        async beforeMount() {
+            await setLocaleAsync('en-US');
+            this.show = true;
+        },
     };
 };
 Sample.story = {
@@ -486,12 +492,17 @@ export const SamplePublishedBrandSite = {
                     features: userFeatures,
                     initialCategories: {},
                 },
+                show: false,
             };
         },
         template: `
-      <BrandPageMaker :view-model="viewModel"/>
+      <BrandPageMaker v-if="show" :view-model="viewModel"/>
     `,
         pinia: setupStoryPinia(),
+        async beforeMount() {
+            await setLocaleAsync('en-US');
+            this.show = true;
+        },
     }),
 };
 export const SampleProfile = () => {

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

@@ -25,19 +25,64 @@ export declare const DIGITAL_CARD_PERSONALIZATION: {
     profileSection: {
         name: string;
         title: string;
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
     };
     phoneSection: {
         url: string;
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
     };
     emailSection: {
         url: string;
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
     };
     websiteSection: {
         url: string;
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
+    };
+    aboutSection: {
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
+    };
+    mediaSection: {
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
+    };
+    informationSection: {
+        shapes: never[];
+        mainShapesCollection: {
+            tall: never[];
+            square: never[];
+            wide: never[];
+        };
     };
-    aboutSection: {};
-    mediaSection: {};
-    informationSection: {};
 };
 export declare const PERSONALISATION_CONTENT: UserPersonalisationContent[];
 export declare const PUBLISHED_DESIGN_DRAFT_TOKEN = "00000000-0000-0000-0000-000000000000";