@designcrowd/library.brand-page 5.19.0 → 5.19.1-error-html2canvas-2

package/lib/src/brand-page/utils/index.js

@@ -1,4 +1,5 @@
 export * from './style.util';
+export * from './content-padding.util';
 export * from './view-model.util';
 export * from './text.util';
 export * from './model.util';

package/lib/src/brand-page/utils/migration/migration-17.d.ts

@@ -0,0 +1,2 @@
+import type { MigrationData } from '../migration.util';
+export declare const migration17: (migrationResult: MigrationData) => Promise<MigrationData>;

package/lib/src/brand-page/utils/migration/migration-17.js

@@ -0,0 +1,60 @@
+import { BRAND_PAGE_TYPES } from '../../models';
+import { CONTACT_FORM_LAYOUT_DEFAULT_PADDING, TESTIMONIAL_DEFAULT_PADDING, bannerDisplayStyleDefaultPadding, } from '../../constants';
+/**
+ * Padding Control backfill (BP-5699 Tier 2, BP-5700 Store): blocks that already
+ * had hard-coded top/bottom spacing. Backfill that spacing as the block's explicit
+ * topPadding/bottomPadding so existing pages render unchanged once the spacing
+ * moves to the Padding Control sliders. Type-scoped and idempotent — only the
+ * listed types, and only when the value isn't already set.
+ *
+ * Exception — `testimonial-section` (BP-5703): testimonials had 32px mobile / 80px
+ * desktop and are intentionally collapsing to a single value across both breakpoints,
+ * so the backfill sets that single value rather than preserving the old desktop 80px.
+ * Existing testimonials will look tighter on desktop / roomier on mobile — by design.
+ */
+const BLOCK_DEFAULT_PADDING = {
+    'images-section': 32,
+    'social-links': 32,
+    'shapes-section': 32,
+    'booking-section': 32,
+    'shop-section': 16,
+    'about-section': 32,
+    'testimonial-section': TESTIMONIAL_DEFAULT_PADDING,
+};
+export const migration17 = async (migrationResult) => {
+    const { brandPageModel } = migrationResult;
+    brandPageModel.pages.forEach((page) => {
+        page.contents.forEach((content) => {
+            // Contact Form and Banner previously varied their hard-coded spacing by
+            // layout/display style (full-bleed image layouts had no outer padding), so they're
+            // keyed by that rather than a single per-type value.
+            let value;
+            if (content.type === 'contact-form') {
+                value =
+                    CONTACT_FORM_LAYOUT_DEFAULT_PADDING[content.layoutStyle ?? ''];
+            }
+            else if (content.type === 'banner-section') {
+                value = bannerDisplayStyleDefaultPadding(content.displayStyle);
+            }
+            else if (content.type === 'text') {
+                // Text outer padding is brand-page-type specific: 12 on Brand Site, 0 on
+                // Brand Page / Brand Contact - backfill per type so existing pages render unchanged.
+                value =
+                    brandPageModel.brandPageType === BRAND_PAGE_TYPES.brandSite ? 12 : 0;
+            }
+            else {
+                value = BLOCK_DEFAULT_PADDING[content.type];
+            }
+            if (value === undefined) {
+                return;
+            }
+            if (content.topPadding === undefined) {
+                content.topPadding = value;
+            }
+            if (content.bottomPadding === undefined) {
+                content.bottomPadding = value;
+            }
+        });
+    });
+    return migrationResult;
+};

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

@@ -19,6 +19,7 @@ import { migration13 } from './migration/migration-13';
 import { migration14 } from './migration/migration-14';
 import { migration15 } from './migration/migration-15';
 import { migration16 } from './migration/migration-16';
+import { migration17 } from './migration/migration-17';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -122,6 +123,15 @@ const MIGRATION_TABLE = [
         runAlways: true,
         description: 'Default sub nav background color to color match on for TAB_2 and hamburger navs depending on font color only on first load flow',
     },
+    {
+        version: 17,
+        migrateFn: migration17,
+        // runAlways: re-apply on every load (ticket stack) so already-migrated pages
+        // pick up newly-added block defaults (e.g. Store) without a new migration.
+        // Idempotent — only backfills when topPadding/bottomPadding aren't already set.
+        runAlways: true,
+        description: 'Padding Control backfill (BP-5699 Tier 2 + BP-5700 Store): backfill existing top/bottom spacing as explicit padding for text (12px), images/social links/shapes/booking (32px), store (16px), contact form (per layout), banner and about (per display style)',
+    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = async (brandPageModel, options) => {

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

@@ -206,15 +206,59 @@ const getPersonalisationValueAsync = async (section, property) => {
     }
     return { value: propertyValue, section };
 };
+// The userPrompt AI content generation only populates these content-bearing sections
+// (see GenerateAiDesignMakerContentService / GenerateWebsiteContentService - About,
+// Information, Profile, Media). Sections like email/website/phone are never generated, so
+// blocks whose role points at an ungenerated section fall back to this pool.
+const PERSONALISATION_FALLBACK_ROLES = [
+    'profile',
+    'about',
+    'information',
+    'media',
+];
+// "Effectively empty" = no renderable content (ungenerated userPrompt sections like
+// email/website/phone). A section that has data but lacks one property is NOT empty - it
+// intentionally keeps its original content.
+const isSectionEffectivelyEmpty = (section) => {
+    if (!section) {
+        return true;
+    }
+    return (!section.title &&
+        !section.name &&
+        !section.url &&
+        !section.description &&
+        !section.descriptionShort &&
+        !section.ctaTitle &&
+        !section.imageUrls?.length &&
+        !section.shapes?.length &&
+        !section.items?.length &&
+        !section.mainShapesCollection?.tall?.length &&
+        !section.mainShapesCollection?.square?.length &&
+        !section.mainShapesCollection?.wide?.length);
+};
+// Resolve a property from a specific role's section. Returns null when that section is
+// ungenerated (effectively empty) or cannot supply the property, so the caller can try the
+// next role.
+const resolvePersonalisationValueForRoleAsync = async (role, property, personalisation) => {
+    const key = `${role}Section`;
+    const section = personalisation[key];
+    if (isSectionEffectivelyEmpty(section)) {
+        return null;
+    }
+    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
+    if (value === undefined || value === null) {
+        return null;
+    }
+    return {
+        value,
+        personalisation: { ...personalisation, [key]: updatedSection },
+        valuesToUpdate,
+    };
+};
 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`);
-    if (!matchingValue) {
-        return { value: undefined, personalisation };
-    }
-    const section = matchingValue[1];
     const mapping = getPersonalisationMappingForContentType(contentType);
     const matchingProperty = Object.entries(mapping).find(([, value]) => value.includes(propertyKey));
     if (!matchingProperty) {
@@ -225,15 +269,29 @@ const getPersonalisationValueFromPropertyAsync = async (propertyKey, propertyVal
         brandPageType: personalisation.type,
         isSvgShape: typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
     });
-    const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(section, property);
-    return {
-        value,
-        personalisation: {
-            ...personalisation,
-            [`${personalisationRole}Section`]: updatedSection,
-        },
-        valuesToUpdate,
-    };
+    const primaryKey = `${personalisationRole}Section`;
+    const primarySection = personalisation[primaryKey];
+    // When the block's own section has content, use it as-is - this preserves existing
+    // behaviour, including legitimately keeping the original when that section lacks a
+    // specific property (e.g. no items, or an invalid shape).
+    if (!isSectionEffectivelyEmpty(primarySection)) {
+        const { value, section: updatedSection, valuesToUpdate, } = await getPersonalisationValueAsync(primarySection, property);
+        return {
+            value,
+            personalisation: { ...personalisation, [primaryKey]: updatedSection },
+            valuesToUpdate,
+        };
+    }
+    // The block's section was never generated - fall back to the first populated section that
+    // can supply this property, so it doesn't render the "should be AI generated" placeholder.
+    // Never reached when the section exists (above) or all are populated (AI Website Builder).
+    for (const role of PERSONALISATION_FALLBACK_ROLES) {
+        const resolved = await resolvePersonalisationValueForRoleAsync(role, property, personalisation);
+        if (resolved) {
+            return resolved;
+        }
+    }
+    return { value: undefined, personalisation };
 };
 const applyPersonalisationToBrandPageContentsRecursiveAsync = async (personalisation, mappingType, content, personalisationRole) => {
     let isApplied = false;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.d.ts

@@ -6,12 +6,12 @@ declare const _default: import("vue").DefineComponent<{}, {
     isBrandContact: import("vue").ComputedRef<boolean>;
     userStore: import("pinia").Store<"brandPageMakerUser", import("@brand-page-maker/stores").UserState, {}, {
         setUserState(payload: {
-            emailAddress?: string | undefined;
-            userToken?: string | undefined;
-            isAdmin?: boolean | undefined;
-            hasPremiumSubscription?: boolean | undefined;
-            brandPageCommissionPercentage?: number | undefined;
-            features?: Partial<import("../../../constants/ui").UIUserFeatures> | undefined;
+            emailAddress?: string;
+            userToken?: string;
+            isAdmin?: boolean;
+            hasPremiumSubscription?: boolean;
+            brandPageCommissionPercentage?: number;
+            features?: Partial<import("@brand-page-maker/stores").UserFeatures>;
         }): void;
     }>;
     brandPageMakerStore: import("pinia").Store<"brandPageMaker", import("@brand-page-maker/stores").BrandPageMakerState, {
@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         brandPageToken(): string | undefined;
         brandPageDescription(): string;
         brandPageSlug(): string;
-        brandPageTemplate(): any;
+        brandPageTemplate(): import("@brand-page/models").BrandPageData;
         brandPageTitle(): string;
         brandPageViewModel(): import("../../../brand-page").BrandPageViewModel;
         gettyVideoIds(): string[];
@@ -37,7 +37,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         showBrandCrowdLogo(): boolean;
     }, {
         setMode(payload: {
-            mode: "images" | "edit";
+            mode: import("@brand-page-maker/stores").BrandPageSettingsMode;
         }): void;
         setFaviconUrl(payload: {
             faviconUrl: string | undefined;
@@ -81,7 +81,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         enqueueContentErrorMessage(): void;
         dequeueNotificationMessageQueue(): void;
         setCurrentNotificationMessage(payload: {
-            message: false | import("@brand-page-maker/stores").NotificationMessage;
+            message: import("@brand-page-maker/stores").NotificationMessage | false;
         }): void;
         setIsApplyingTemplate(payload: import("@brand-page-maker/stores").IsApplyingTemplatePayload): void;
         setIsPageNavigating(isPageNavigating: boolean): void;
@@ -100,9 +100,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         applySelectedTemplate(): Promise<void>;
         enqueueErrorMessage(): Promise<void>;
         enqueueSaveSuccessMessage(payload?: {
-            description?: string | undefined;
-            isPublished?: boolean | undefined;
-            noDescription?: boolean | undefined;
+            description?: string;
+            isPublished?: boolean;
+            noDescription?: boolean;
         }): Promise<void>;
         hideChangeTemplateConfirmModal(): void;
         onBackgroundChanged(): void;
@@ -118,16 +118,16 @@ declare const _default: import("vue").DefineComponent<{}, {
             content: TContent;
         }>(payload: P): Promise<void>;
         _captureTemplateSwitchIfEnabled(): void;
-        applyHistorySnapshot(snapshot: import("@brand-page/models").BrandPageModel, activePageId?: string | undefined, logoEditsStr?: string | undefined): Promise<void>;
-        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page/models").BrandPageModel, logoEditsStr?: string | undefined): Promise<void>;
-        _navigateToActivePage(activePageId?: string | undefined): void;
+        applyHistorySnapshot(snapshot: import("@brand-page/models").BrandPageModel, activePageId?: string, logoEditsStr?: string): Promise<void>;
+        _syncLogoSettingsFromSnapshot(snapshot: import("@brand-page/models").BrandPageModel, logoEditsStr?: string): Promise<void>;
+        _navigateToActivePage(activePageId?: string): void;
         _fallbackSidebarIfSelectedContentMissing(snapshot: import("@brand-page/models").BrandPageModel): void;
         export(): import("@brand-page/models").BrandPageModel;
         setBrandPageType({ brandPageType }: {
-            brandPageType: "default" | "brandSite" | "brandContact";
+            brandPageType: import("@brand-page/models").BrandPageType;
         }): void;
         initialiseStoresByBrandPageModelAsync(brandPageModel: import("@brand-page/models").BrandPageModel): Promise<void>;
-        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, businessName, industry, layout, logoVariationImageUrls, shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
+        initialise({ brandPage, brandPageType, logoDraftDesignAttributes, unsplashApplicationName, templateCategories, personalisationData, isPersonalisationEnabled, userPromptContentKey, showAiTemplatesTab, businessName, industry, layout, logoVariationImageUrls, shopConfigData: _shopConfigData, isServerRenderOverride, }: import("@brand-page-maker/stores").InitialisePayload): Promise<void>;
         initialisePages({ pages, sections, }: {
             pages: import("@brand-page/models").PageModel[];
             sections: import("../../../shared/page-settings/store").PageSettingsStateSections;
@@ -155,11 +155,13 @@ declare const _default: import("vue").DefineComponent<{}, {
             viewport: import("@brand-page/models").ViewportsType;
         }): void;
         showStripeOnboardingModal(): Promise<void>;
-        selectInitialCategories(payload: import("../../../shared/template-settings/models").InitialCategories): void;
+        selectInitialCategories(payload: import("@brand-page-maker/stores").SelectedCategoryPayload): void;
     }>;
 }, {}, {}, {
     saveBrandPage(): void;
     saveAndPublishBrandPage(isActionBar: boolean): void;
     createTeamCards(isTopNav: boolean): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "create-team-cards"[], "create-team-cards", import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onCreate-team-cards"?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/lib/src/brand-page-maker/components/action-bar/ActionBar.mixin.js

@@ -4,6 +4,7 @@ import { computed, defineComponent } from 'vue';
 import { UPGRADE_CTA_LOCATIONS } from './../../composables/useEventTracker';
 import { BRAND_PAGE_TYPES } from '@brand-page/models';
 export default defineComponent({
+    emits: ['create-team-cards'],
     setup() {
         const userStore = useBrandPageMakerUserStore();
         const brandPageMakerStore = useBrandPageMakerStore();

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

@@ -180,7 +180,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 wordBreak?: string | undefined;
             };
         }[];
-        personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+        personalisationRole?: import("../../../brand-page").PersonalisationRole | undefined;
         media?: {
             type: import("../../../brand-page").MediaTypes;
         } | undefined;
@@ -243,14 +243,20 @@ declare const _default: import("vue").DefineComponent<{}, {
             thirdPartySettings: import("../../../lib").UIRootStateThirdPartySettings;
         }): void;
         setDeviceMode({ mode }: {
-            mode: "desktop" | "mobile";
+            mode: import("../../../lib").UiDeviceMode;
         }): void;
         setScreenSizeMode({ mode }: {
-            mode: "desktop" | "mobile";
+            mode: import("../../../lib").UiScreenSizeMode;
         }): void;
         setUserPersonalisationData({ personalisationData, }: {
             personalisationData: import("../../../brand-page").UserPersonalisationContent[];
         }): void;
+        setUserPromptContentKey({ userPromptContentKey, }: {
+            userPromptContentKey: string | undefined;
+        }): void;
+        setShowAiTemplatesTab({ showAiTemplatesTab, }: {
+            showAiTemplatesTab: boolean;
+        }): void;
         onBackgroundChanged(): void;
         onContentChanged(): void;
         onStyleChanged(): void;
@@ -263,7 +269,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             type: string;
         }): Promise<void>;
         onTemplateSelected(payload: import("@brand-page-maker/stores").OnTemplateSelectedPayload): Promise<void>;
-        showUpgradeModalAndSaveAsync(contextualUpgradeType?: string | number | symbol | undefined): Promise<void>;
+        showUpgradeModalAndSaveAsync(contextualUpgradeType?: import("@brand-page-maker/stores").WebsiteContextUpgradeType): Promise<void>;
         setIsPersonalisationEnabled({ isPersonalisationEnabled, }: {
             isPersonalisationEnabled: boolean;
         }): void;
@@ -273,11 +279,11 @@ declare const _default: import("vue").DefineComponent<{}, {
     }, {
         onBackgroundChanged(): void;
         setBackgroundStyle({ backgroundStyle, }: {
-            backgroundStyle: Partial<Omit<BrandPageCssStyle, "backgroundColor">>;
+            backgroundStyle: import("../../../brand-page").BackgroundStyle;
         }): void;
         setBackgroundShapes(payload: import("../../../brand-page").BackgroundShape[]): void;
         setBackgroundPersonalisationRole(payload: {
-            personalisationRole: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+            personalisationRole: import("../../../brand-page").PersonalisationRole | undefined;
         }): void;
         setBackgroundShapeStyle(payload: BrandPageCssStyle): void;
         setPrimaryBackgroundShapeStyle(payload: BrandPageCssStyle): void;
@@ -286,9 +292,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         addBackgroundShape({ shapeUrl, width, height, aspectRatio, }: {
             shapeUrl: string;
-            width?: number | undefined;
-            height?: number | undefined;
-            aspectRatio?: number | undefined;
+            width?: number;
+            height?: number;
+            aspectRatio?: number;
         }): void;
         deleteBackgroundShape({ shapeIndex }: {
             shapeIndex: number;
@@ -303,7 +309,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         setBackgroundShapeSettings(payload: import("../../../shared/background-settings/background-settings-models").SetBackgroundShapeSettingsPayload): void;
         setRecommendedLogoColors(payload: import("../../../shared/background-settings/background-settings-models").SetRecommendedLogoColorsPayload): void;
         setBackgroundMode(payload: {
-            backgroundMode: "images" | "edit";
+            backgroundMode: import("@brand-page-maker/stores").BrandPageSettingsMode;
         }): void;
         setBackgroundMedia(payload: import("src/shared/my-uploads/models").MediaBaseSelectedPayload): void;
         removeBackgroundVideo(): void;

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

@@ -2,12 +2,14 @@ declare const _default: import("vue").DefineComponent<{}, {
     templates: import("vue").ComputedRef<import("@brand-page-maker/stores/admin-logo-settings").AdminPreviewLogoTemplateTemplate[]>;
     items: import("vue").ComputedRef<{
         id: string;
-        type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "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" | "booking-section";
+        type: import("../../../brand-page").ContentType;
         settings: {
             content: {
                 id: string;
-                type: "website" | "image" | "email" | "phone" | "logo" | "general-link" | "profile" | "video" | "text" | "facebook" | "x" | "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" | "booking-section";
-                personalisationRole?: "website" | "email" | "phone" | "profile" | "about" | "information" | "media" | undefined;
+                type: import("../../../brand-page").ContentType;
+                personalisationRole?: import("../../../brand-page").PersonalisationRole | undefined;
+                topPadding?: number | undefined;
+                bottomPadding?: number | undefined;
                 imageUrlOverride?: string | undefined;
                 imageUrlsOverride?: string | undefined;
                 avatarImageUrlOverride?: string | undefined;