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

package/src/brand-page/utils/migration.util.ts

@@ -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';
 
 export interface MigrationData {
   brandPageModel: BrandPageModel;
@@ -149,6 +150,16 @@ const MIGRATION_TABLE = [
     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)',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/personalisation.util.test.ts

@@ -701,6 +701,41 @@ describe('personalisation.util', async () => {
     ).toBe(title);
   });
 
+  test('applyUserPersonalisationToBrandPageModelAsync should fall back to a populated section when the block section was not generated', async () => {
+    // Arrange - simulate userPrompt AI content that only generated the core sections
+    // (profile/about/information/media); email/website/phone are never generated.
+    const personalisation = {
+      ...PERSONALISATION,
+      websiteSection: undefined,
+      emailSection: undefined,
+      phoneSection: undefined,
+    } as unknown as typeof PERSONALISATION;
+
+    // A block whose role points at the ungenerated website section - without the fallback
+    // this renders the designer's placeholder instead of personalised content.
+    const model = new BrandPageModel({
+      brandPageType: BRAND_PAGE_TYPES.brandSite,
+      styles: {
+        backgroundStyles: {
+          backgroundImageUrl: faker.internet.url(),
+          personalisationRole: 'website',
+        },
+      },
+    });
+
+    // Act
+    const result = await applyUserPersonalisationToBrandPageModelAsync(
+      personalisation,
+      model,
+    );
+
+    // Assert - it borrowed the first populated fallback section (profile).
+    expect(result.isModified).toBe(true);
+    expect(result.model.styles.backgroundStyles.backgroundImageUrl).toBe(
+      PERSONALISATION.profileSection.imageUrls?.[0].imageUrl,
+    );
+  });
+
   test('applyUserPersonalisationToBrandPageModelAsync should return modified text items when input has text with multiple items', async () => {
     // Arrange
     const textContent = {

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

@@ -326,6 +326,84 @@ const getPersonalisationValueAsync = async (
   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: PersonalisationRole[] = [
+  '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: UserPersonalisationSectionWithIndices | undefined,
+): boolean => {
+  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: PersonalisationRole,
+  property: keyof UserPersonalisationSection | keyof UserPersonalisationItem,
+  personalisation: UserPersonalisationWithIndices,
+): Promise<{
+  value: any;
+  personalisation: UserPersonalisationWithIndices;
+  valuesToUpdate?: Record<string, any>;
+} | null> => {
+  const key = `${role}Section` as keyof UserPersonalisationWithIndices;
+  const section = personalisation[key] as
+    | UserPersonalisationSectionWithIndices
+    | undefined;
+
+  if (isSectionEffectivelyEmpty(section)) {
+    return null;
+  }
+
+  const {
+    value,
+    section: updatedSection,
+    valuesToUpdate,
+  } = await getPersonalisationValueAsync(
+    section as UserPersonalisationSectionWithIndices,
+    property,
+  );
+
+  if (value === undefined || value === null) {
+    return null;
+  }
+
+  return {
+    value,
+    personalisation: { ...personalisation, [key]: updatedSection },
+    valuesToUpdate,
+  };
+};
+
 const getPersonalisationValueFromPropertyAsync = async (
   propertyKey: string,
   propertyValue: any,
@@ -342,16 +420,6 @@ const getPersonalisationValueFromPropertyAsync = async (
     return { value: undefined, personalisation };
   }
 
-  const matchingValue = Object.entries(personalisation).find(
-    ([key]) => key === `${personalisationRole}Section`,
-  );
-
-  if (!matchingValue) {
-    return { value: undefined, personalisation };
-  }
-
-  const section = matchingValue[1] as UserPersonalisationSectionWithIndices;
-
   const mapping = getPersonalisationMappingForContentType(contentType);
 
   const matchingProperty = Object.entries(mapping).find(([, value]) =>
@@ -372,20 +440,48 @@ const getPersonalisationValueFromPropertyAsync = async (
       typeof propertyValue === 'string' && propertyValue.endsWith('.svg'),
   });
 
-  const {
-    value,
-    section: updatedSection,
-    valuesToUpdate,
-  } = await getPersonalisationValueAsync(section, property);
+  const primaryKey =
+    `${personalisationRole}Section` as keyof UserPersonalisationWithIndices;
+  const primarySection = personalisation[primaryKey] as
+    | UserPersonalisationSectionWithIndices
+    | undefined;
+
+  // 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 as UserPersonalisationSectionWithIndices,
+      property,
+    );
 
-  return {
-    value,
-    personalisation: {
-      ...personalisation,
-      [`${personalisationRole}Section`]: updatedSection,
-    },
-    valuesToUpdate,
-  };
+    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 };
 };
 
 type ContentProperty = Record<string, string | any>;

package/src/brand-page/view-models.ts

@@ -1,5 +1,4 @@
 import type {
-  PageStyles,
   ButtonWithModalContent,
   ProfileContent,
   TextContent,
@@ -32,11 +31,9 @@ import type {
   TextShapeItem,
   TextStyleDeclaration,
   AspectRatio,
-  LogoVariation,
   LogoImageModel,
   LogoTemplateImageModel,
   CookieOptions,
-  SensitiveContent,
   BookingSectionContent,
   MediaTypes,
   TextStyles,
@@ -84,8 +81,7 @@ export interface PageViewModel {
 }
 
 export interface ButtonViewModel
-  extends ContentViewModel,
-    Omit<ButtonWithModalContent, 'type'> {
+  extends ContentViewModel, Omit<ButtonWithModalContent, 'type'> {
   styles: Omit<ButtonStyles, 'templates'>;
   onClicked: (vm: ButtonViewModel) => void;
   buttonLinkType: ButtonLinkType;
@@ -95,7 +91,8 @@ export interface ButtonViewModel
 export type ImageViewModel = ContentViewModel & Omit<ImageContent, 'type'>;
 
 export interface ImageGalleryViewModel
-  extends ContentViewModel,
+  extends
+    ContentViewModel,
     Omit<ImageGalleryContent, 'type' | 'galleryStyles'> {
   styles: GalleryStyles;
 }
@@ -114,14 +111,12 @@ export interface LogoViewModel extends ContentViewModel {
 }
 
 export interface ProfileViewModel
-  extends ContentViewModel,
-    Omit<ProfileContent, 'type'> {
+  extends ContentViewModel, Omit<ProfileContent, 'type'> {
   containerStyle?: BrandPageCssStyle;
 }
 
 export interface ShapesSectionViewModel
-  extends ContentViewModel,
-    Omit<ShapesSectionContent, 'type' | 'items'> {
+  extends ContentViewModel, Omit<ShapesSectionContent, 'type' | 'items'> {
   items: TextShapeItem[];
   isFullWidth: boolean;
 }
@@ -140,41 +135,35 @@ export type VideoViewModel = ContentViewModel &
 export type MapViewModel = ContentViewModel & Omit<MapContent, 'type'>;
 
 export interface MailingListViewModel
-  extends ContentViewModel,
-    Omit<MailingListContent, 'type'> {
+  extends ContentViewModel, Omit<MailingListContent, 'type'> {
   styles: Omit<ButtonStyles, 'templates'>;
 }
 
 export interface SupportMeViewModel
-  extends ContentViewModel,
-    Omit<SupportMeContent, 'type'> {
+  extends ContentViewModel, Omit<SupportMeContent, 'type'> {
   buttonStyles: ButtonStyles;
 }
 
 export interface RequestPaymentViewModel
-  extends ContentViewModel,
-    Omit<RequestPaymentContent, 'type'> {
+  extends ContentViewModel, Omit<RequestPaymentContent, 'type'> {
   buttonStyles: ButtonStyles;
 }
 
 export interface ShopViewModel
-  extends ContentViewModel,
-    Omit<ShopContent, 'type'> {
+  extends ContentViewModel, Omit<ShopContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
   isShippingEnabled: boolean;
 }
 
 export interface ContactFormViewModel
-  extends ContentViewModel,
-    Omit<ContactFormContent, 'type'> {
+  extends ContentViewModel, Omit<ContactFormContent, 'type'> {
   buttonStyles: ButtonStyles;
   isFullWidth: boolean;
 }
 
 export interface BannerSectionViewModel
-  extends ContentViewModel,
-    Omit<BannerSectionContent, 'type'> {
+  extends ContentViewModel, Omit<BannerSectionContent, 'type'> {
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
   isBigImageType: boolean;
@@ -225,64 +214,57 @@ export interface TextImageSectionViewModel {
 }
 
 export interface TestimonialSectionViewModel
-  extends ContentViewModel,
-    Omit<TestimonialSectionContent, 'type'> {
+  extends ContentViewModel, Omit<TestimonialSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface AboutSectionViewModel
-  extends ContentViewModel,
-    Omit<AboutSectionContent, 'type'> {
+  extends ContentViewModel, Omit<AboutSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface SocialLinksViewModel
-  extends ContentViewModel,
-    Omit<SocialLinksContent, 'type'> {
+  extends ContentViewModel, Omit<SocialLinksContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface DividerSectionViewModel
-  extends ContentViewModel,
-    Omit<DividerSectionContent, 'type'> {
+  extends ContentViewModel, Omit<DividerSectionContent, 'type'> {
   isFullWidth: boolean;
 }
 
 export interface BookingSectionViewModel
-  extends ContentViewModel,
-    Omit<BookingSectionContent, 'type'> {
+  extends ContentViewModel, Omit<BookingSectionContent, 'type'> {
   buttonViewModel: ButtonViewModel;
   isFullWidth: boolean;
 }
 
-export interface PageHeaderViewModel
-  extends Omit<
-    PageHeaderDesktop | PageHeaderMobile,
-    | 'logoImage'
-    | 'logoImageStyle'
-    | 'isLogoOptional'
-    | 'viewport'
-    | 'isLogoVisible'
-    | 'logoTemplateImage'
-    | 'logoImageHeight'
-    | 'logoImageWidth'
-  > {
+export interface PageHeaderViewModel extends Omit<
+  PageHeaderDesktop | PageHeaderMobile,
+  | 'logoImage'
+  | 'logoImageStyle'
+  | 'isLogoOptional'
+  | 'viewport'
+  | 'isLogoVisible'
+  | 'logoTemplateImage'
+  | 'logoImageHeight'
+  | 'logoImageWidth'
+> {
   logo: LogoViewModel;
   pages: PageViewModel[];
 }
 
-export interface PageFooterViewModel
-  extends Omit<
-    PageFooterDesktop | PageFooterMobile,
-    | 'logoImage'
-    | 'logoImageStyle'
-    | 'isLogoOptional'
-    | 'viewport'
-    | 'isLogoVisible'
-    | 'logoTemplateImage'
-    | 'logoImageHeight'
-    | 'logoImageWidth'
-  > {
+export interface PageFooterViewModel extends Omit<
+  PageFooterDesktop | PageFooterMobile,
+  | 'logoImage'
+  | 'logoImageStyle'
+  | 'isLogoOptional'
+  | 'viewport'
+  | 'isLogoVisible'
+  | 'logoTemplateImage'
+  | 'logoImageHeight'
+  | 'logoImageWidth'
+> {
   logo: LogoViewModel;
 }
 

package/src/brand-page-maker/assessors/banner-section-description-visibility.assessor.ts

@@ -48,11 +48,11 @@ export const bannerOverlayOptionsVisibilityAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     (content.media?.type === 'getty-video' || content.imageUrl) &&
-      [
-        ALIGN_CARD_CENTER_IMAGE,
-        ALIGN_CARD_LEFT_IMAGE,
-        BIG_IMAGE,
-        ALIGN_LEFT_BIG_IMAGE,
-      ].includes(content.displayStyle),
+    [
+      ALIGN_CARD_CENTER_IMAGE,
+      ALIGN_CARD_LEFT_IMAGE,
+      BIG_IMAGE,
+      ALIGN_LEFT_BIG_IMAGE,
+    ].includes(content.displayStyle),
   );
 };

package/src/brand-page-maker/assessors/color-replacement-icon-visibility.assessor.ts

@@ -6,7 +6,7 @@ export const colorReplacementIconVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-      content?.iconUrl &&
-      content?.mediaType === 'shape',
+    content?.iconUrl &&
+    content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/color-replacement-profile-visibility.assessor.ts

@@ -6,7 +6,7 @@ export const colorReplacementProfileVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-      content?.avatarImageUrl &&
-      content?.mediaType === 'shape',
+    content?.avatarImageUrl &&
+    content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/color-replacement-visibility.assessor.ts

@@ -10,7 +10,7 @@ export const colorReplacementVisibilityTypeAssessor: VisibilityAssessor<
 > = (content) => {
   return Boolean(
     content?.colorReplacements &&
-      content?.imageUrl &&
-      content?.mediaType === 'shape',
+    content?.imageUrl &&
+    content?.mediaType === 'shape',
   );
 };

package/src/brand-page-maker/assessors/contact-form-visibility.assessor.ts

@@ -15,12 +15,12 @@ export const contactCardDisplayTypeVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-        [
-          ALIGN_CARD_CENTER_IMAGE,
-          ALIGN_CARD_CENTER,
-          ALIGN_LEFT_FULL_IMAGE,
-          ALIGN_RIGHT_FULL_IMAGE,
-        ].includes(content?.layoutStyle),
+      [
+        ALIGN_CARD_CENTER_IMAGE,
+        ALIGN_CARD_CENTER,
+        ALIGN_LEFT_FULL_IMAGE,
+        ALIGN_RIGHT_FULL_IMAGE,
+      ].includes(content?.layoutStyle),
     ) && context!.isBrandSite
   );
 };
@@ -37,11 +37,11 @@ export const imageUrlVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-        [
-          ALIGN_CARD_CENTER_IMAGE,
-          ALIGN_LEFT_FULL_IMAGE,
-          ALIGN_RIGHT_FULL_IMAGE,
-        ].includes(content?.layoutStyle),
+      [
+        ALIGN_CARD_CENTER_IMAGE,
+        ALIGN_LEFT_FULL_IMAGE,
+        ALIGN_RIGHT_FULL_IMAGE,
+      ].includes(content?.layoutStyle),
     ) && context!.isBrandSite
   );
 };
@@ -52,9 +52,9 @@ export const contactBackgroundDisplayTypeVisibilityAssessor: VisibilityAssessor<
   return (
     Boolean(
       content?.layoutStyle &&
-        [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
-          content?.layoutStyle,
-        ),
+      [ALIGN_CARD_CENTER, ALIGN_CENTERED, TEXT_ONLY].includes(
+        content?.layoutStyle,
+      ),
     ) && context!.isBrandSite
   );
 };

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

@@ -8,6 +8,7 @@ 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/src/brand-page-maker/components/ai-text-edit/TextBubble.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div class="tw-mb-4" :class="containerClass">
     <div class="tw-flex" :class="containerClass">

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

@@ -47,7 +47,6 @@ import AssetLibraryClient from '../../../clients/asset-library-clients';
 import { useShopConfigStore } from '@shared/ecommerce-settings/store/shop-settings-store';
 import type { ShopConfigData } from '@brand-page/models/shop.model';
 import { useProductConfigStore } from '@brand-page-maker/stores/product-config/product-config-store';
-import type { UpdateItemValuePayload } from '@shared/content-settings/models';
 import { UPGRADE_CTA_LOCATIONS } from '../../composables/useEventTracker';
 import { commonTr } from '@src/composables/useTranslate';
 import { useSnapshot } from '../../../composables/useSnapshot';
@@ -70,6 +69,8 @@ export interface BrandPageMakerViewModel {
   initialCategories: InitialCategories;
   personalisation?: UserPersonalisationContent[];
   isPersonalisationEnabled?: boolean;
+  userPromptContentKey?: string;
+  showAiTemplatesTab?: boolean;
   brandPageType?: BrandPageType;
   businessName?: string;
   industry?: string;
@@ -85,6 +86,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['create-team-cards'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const sideBarStore = useUiSideBarStore();
@@ -227,6 +229,8 @@ export default defineComponent({
       personalisationData: this.viewModel.personalisation,
       isPersonalisationEnabled:
         this.viewModel.isPersonalisationEnabled || false,
+      userPromptContentKey: this.viewModel.userPromptContentKey,
+      showAiTemplatesTab: this.viewModel.showAiTemplatesTab || false,
       brandPageType: this.viewModel.brandPageType,
       businessName: this.viewModel.businessName,
       industry: this.viewModel.industry,

package/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.stories.ts

@@ -270,6 +270,7 @@ const InitialiseMakerStores = (options: {
     isContextualUpgradeModalVisible: false,
     gettyVideos: [],
     templateSearchTerm: undefined,
+    aiTemplateKeywords: undefined,
   });
 
   userStore.setUserState({

package/src/brand-page-maker/components/brand-page-maker/BrandPageMakerTemplateSettings.stories.ts

@@ -5,12 +5,9 @@ import type { Component } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import { mockDesignTemplateTypeApi } from '@shared/template-settings/components/TemplatesSettings.test-helper';
 import BrandPageMakerTemplateSettings from './BrandPageMakerTemplateSettings.vue';
-import VueRouter, { createMemoryHistory, createRouter } from 'vue-router';
+import { createMemoryHistory, createRouter } from 'vue-router';
 import { hexToRGB } from '@utils/helpers';
-import {
-  BRAND_PAGE_TEMPLATE_BP_909,
-  LOGO_IMAGE_URL,
-} from '../../../__fixtures__';
+import { BRAND_PAGE_TEMPLATE_BP_909 } from '../../../__fixtures__';
 import { setupStoryPinia } from './__fixtures__/store-fixture';
 import { useUiLogoSettingsStore } from '@shared/logo-settings/store';
 import { useUiStore } from '@brand-page-maker/stores';

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

@@ -13,13 +13,8 @@ import type {
   TextContent,
   UserPersonalisation,
   ImageContent,
-  ImageGalleryContent,
   ProfileContent,
-  WebsiteContent,
-  ImagesSectionContent,
   UserPersonalisationContent,
-  EmailContent,
-  PhoneContent,
   ShapesSectionContent,
   BannerSectionContent,
 } from '@brand-page';

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-page-payment.ts

@@ -56,14 +56,6 @@ export const brandPagePaymentConfigsResponse: BrandPagePaymentConfig[] = [
   },
 ];
 
-const stripePaymentIntent: StripePaymentIntent = {
-  id: faker.datatype.uuid(),
-  object: 'payment_intent',
-  amount: 500,
-  client_secret: faker.internet.password(),
-  currency: 'USD',
-} as const;
-
 export const brandPageCreateCartResult: CreateCartResult<StripePaymentIntent> =
   {
     cartId: faker.datatype.uuid(),

package/src/brand-page-maker/components/brand-page-maker/__fixtures__/brand-site-template.examples.ts

@@ -1,5 +1,3 @@
-import type { PageModel } from '@brand-page';
-
 export const BRAND_SITE_TEMPLATE_SAMPLE: any[] = [
   {
     title: 'HOME',

package/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <Page
     data-component="brand-page-maker-page"

package/src/brand-page-maker/components/brandpage-settings/ReplaceImageSettingsForBrandPageSettings.mixin.ts

@@ -130,7 +130,7 @@ export default defineComponent({
         mode: BRANDPAGE_SETTINGS_MODES.edit,
       });
     },
-    onDesignSelected(image: UserMediaItemWithDimensions) {
+    onDesignSelected() {
       this.brandPageMakerStore.setMode({ mode: BRANDPAGE_SETTINGS_MODES.edit });
     },
   },

package/src/brand-page-maker/components/color-palette/BpColorPalette.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, type PropType } from 'vue';
+import { ref } from 'vue';
 import type { ColorValue } from 'src/shared/color-picker/models';
 import ClickOutside from 'click-outside-vue3';
 import ColorPicker from './BpColorPicker.vue';
@@ -106,7 +106,6 @@ const emit = defineEmits<{
 const pickerIdRef = ref<HTMLElement>();
 
 const popupTop = ref(0);
-const popupLeft = ref(0);
 
 const vClickOutside = ClickOutside.directive;