@designcrowd/library.brand-page 6.0.5 → 6.0.6-ast-bugs

package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.ts

@@ -5,6 +5,7 @@ import type {
   NavigationDesktop,
   NavigationMobile,
 } from '../../../models';
+import { isUnsetOrTransparentColor } from '../../../models';
 import type { NavItemViewModel } from '../../../view-models';
 
 export default defineComponent({
@@ -26,6 +27,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['close-side-menu'],
   data() {
     return {
       expandedItems: {} as Record<string, boolean>, // Keep track of which navs are expanded
@@ -53,19 +55,27 @@ export default defineComponent({
     },
     // Prevents us from doubling down on em sizing of font
     defaultWrapperStyle(): BrandPageCssStyle {
-      const { fontSize, lineHeight, letterSpacing, ...rest } =
-        this.defaultButtonStyle;
+      const {
+        fontSize: _fontSize,
+        lineHeight: _lineHeight,
+        letterSpacing: _letterSpacing,
+        ...rest
+      } = this.defaultButtonStyle;
 
       return rest;
     },
     selectedWrapperStyle(): BrandPageCssStyle {
-      const { fontSize, lineHeight, letterSpacing, ...rest } =
-        this.selectedButtonStyle;
+      const {
+        fontSize: _fontSize,
+        lineHeight: _lineHeight,
+        letterSpacing: _letterSpacing,
+        ...rest
+      } = this.selectedButtonStyle;
 
       return rest;
     },
     routes(): any[] {
-      return this.visibleNavItems.map((navItem, i) => {
+      return this.visibleNavItems.map((navItem, _i) => {
         return {
           routeName: navItem.routeName,
           routeParams: navItem.routeParams,
@@ -91,12 +101,19 @@ export default defineComponent({
         ? this.selectedButtonStyle
         : this.defaultButtonStyle;
 
+      const subNavBackgroundColor =
+        this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff';
+
+      // An active sub-page uses the selected button colour, but when that colour
+      // is transparent/unset it must keep the sub-nav background colour rather
+      // than rendering transparent (BP-5751).
       return {
         ...baseStyle,
         paddingLeft: '32px',
-        backgroundColor: isActive
-          ? baseStyle.backgroundColor
-          : this.styles.hamburgerMenuStyle.subNavBackgroundColor ?? '#ffffff',
+        backgroundColor:
+          isActive && !isUnsetOrTransparentColor(baseStyle.backgroundColor)
+            ? baseStyle.backgroundColor
+            : subNavBackgroundColor,
       };
     },
     closeSideMenu(): void {

package/src/brand-page/components/page-footer/PageFooter.vue

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

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -106,7 +106,9 @@ withDefaults(
 .desktop-tab-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid;
   @apply tw-gap-x-4;
-  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end];
+  grid-template-columns:
+    [col-start] 1fr [logo-start] var(--logo-max-width)
+    [logo-end nav-start] 1fr [nav-end];
 }
 .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container {
   grid-column: logo-start / logo-end;
@@ -184,7 +186,9 @@ withDefaults(
 /* DESKTOP_TAB_6 */
 .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav {
   @apply tw-grid;
-  grid-template-rows: [row1-start] var(--tab-nav-height) [row1-end row2-start] 1fr [row2-end];
+  grid-template-rows:
+    [row1-start] var(--tab-nav-height)
+    [row1-end row2-start] 1fr [row2-end];
   @apply tw-gap-y-4;
   justify-content: center;
   justify-items: center;
@@ -209,7 +213,9 @@ withDefaults(
 }
 .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav {
   @apply tw-grid;
-  grid-template-rows: [row1-start] var(--tab-nav-height) [row1-end row2-start] 1fr [row2-end];
+  grid-template-rows:
+    [row1-start] var(--tab-nav-height)
+    [row1-end row2-start] 1fr [row2-end];
   @apply tw-gap-y-4;
   margin-top: 1rem;
 }
@@ -282,9 +288,9 @@ withDefaults(
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu,
 .mobile-hamburger-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid;
-  grid-template-columns: [start] var(--hamburger-nav-width) [logo-start] auto [nav-start] var(
-      --hamburger-nav-width
-    );
+  grid-template-columns:
+    [start] var(--hamburger-nav-width)
+    [logo-start] auto [nav-start] var(--hamburger-nav-width);
   align-items: start;
 }
 .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container,

package/src/brand-page/components/page-header/PageHeader.vue

@@ -46,6 +46,7 @@ export default {
     HeaderLayout,
   },
   mixins: [PageHeaderMixin],
+  emits: ['open-side-menu'],
 };
 </script>
 <style scoped>

package/src/brand-page/components/shapes-section/ShapesSection.vue

@@ -28,7 +28,7 @@ import Media from '../media/Media.vue';
 import type { TextImageSectionViewModel } from '@brand-page/view-models';
 import type { BrandPageContext } from '@brand-page/models';
 
-const props = defineProps({
+defineProps({
   viewModel: {
     type: Object as PropType<TextImageSectionViewModel>,
     required: true,

package/src/brand-page/components/shop/CartModal.vue

@@ -231,8 +231,6 @@
 import {
   Modal,
   Button,
-  Dropdown,
-  DropdownItem,
   NumberStepper,
   Textarea,
   Icon,
@@ -318,7 +316,7 @@ const onQtyChange = (skuKey: string, qty: number) => {
   cartSettingsStore.updateQuantity(skuKey, qty);
 };
 
-const onUpdateVariantOption = (
+const _onUpdateVariantOption = (
   index: number,
   skuKey: string,
   variant: string,

package/src/brand-page/components/shop/FeaturedDisplay.vue

@@ -60,7 +60,7 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext, ShopContent } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import { type PropType } from 'vue';
@@ -71,7 +71,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-const props = defineProps({
+defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/shop/PaymentModal.vue

@@ -115,8 +115,7 @@
 <script setup lang="ts">
 import { Modal, Button, Loader } from '@designcrowd/fe-shared-lib';
 import { useCartStore } from '@shared/ecommerce-settings/store/cart-settings-store';
-import { computed, reactive, ref, onMounted } from 'vue';
-import IconStripe from '../icon/IconStripe.vue';
+import { computed, reactive, onMounted } from 'vue';
 import RequestPaymentStripe from '../payment/RequestPaymentStripe.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import brandPageClient from '../../clients/brand-page.client';
@@ -128,7 +127,6 @@ import type {
   BrandPagePaymentConfig,
   TextStyleDeclaration,
   StripePaymentIntent,
-  StripeShippingDetails,
 } from '@brand-page/models';
 import { paymentProviders } from '@brand-page/constants';
 import raygunUtil from '@brand-page/utils/raygun.util';
@@ -173,8 +171,6 @@ const data = reactive({
   state: 'creating-cart' as State,
 });
 
-const customerEmail = ref('');
-
 const emit = defineEmits(['on-close', 'on-back']);
 
 const onClose = () => {

package/src/brand-page/components/shop/ProductDetailModal.vue

@@ -293,7 +293,7 @@ const onClose = () => {
   emit('on-close');
 };
 
-const showFullDesc = () => {
+const _showFullDesc = () => {
   data.isShowFullDescription = true;
 };
 

package/src/brand-page/components/shop/Shop.vue

@@ -3,10 +3,6 @@
     <div
       v-if="shouldShowContainer"
       class="tw-relative outer-container"
-      :class="{
-        'tw-my-8': context.isBrandSite,
-        'tw-mb-4': context.isBrandPageOrIsBrandContact,
-      }"
       :style="[backgroundStyle, contentPaddingStyle]"
     >
       <div class="tw-p-4 inner-container">
@@ -125,7 +121,7 @@ import ThumbnailDisplay from './ThumbnailDisplay.vue';
 import FeaturedDisplay from './FeaturedDisplay.vue';
 import ProductDetailModal from './ProductDetailModal.vue';
 import CartModal from './CartModal.vue';
-import { computed, onMounted, reactive, type PropType } from 'vue';
+import { computed, onMounted, reactive } from 'vue';
 import {
   PAYMENT_OPTION_DISPLAY_TYPES,
   PAYMENT_OPTION_IMAGE_TYPES,

package/src/brand-page/components/shop/TextDisplay.vue

@@ -39,7 +39,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-const props = defineProps({
+defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/shop/ThumbnailDisplay.vue

@@ -45,7 +45,7 @@
   </ul>
 </template>
 <script setup lang="ts">
-import type { BrandPageContext, ShopContent } from '@brand-page/models';
+import type { BrandPageContext } from '@brand-page/models';
 import FallbackImage from '../fallback-image/FallbackImage.vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
 import type { PropType } from 'vue';
@@ -56,7 +56,7 @@ import { computed } from 'vue';
 
 const shopSettingStore = useShopConfigStore();
 
-const props = defineProps({
+defineProps({
   context: {
     type: Object as PropType<BrandPageContext>,
     required: true,

package/src/brand-page/components/testimonial-section/TestimonialSection.vue

@@ -265,9 +265,9 @@ const renderText = (val: string): string => (val ? getRenderText(val) : '');
 const forceCarouselUpdate = (): boolean => {
   const shouldUpdateCarousel = Boolean(
     props.isPreview &&
-      (props.viewModel.items.length > 1 ||
-        props.viewModel.displayStyle === 'big-image') &&
-      carouselRef.value,
+    (props.viewModel.items.length > 1 ||
+      props.viewModel.displayStyle === 'big-image') &&
+    carouselRef.value,
   );
 
   if (shouldUpdateCarousel) {

package/src/brand-page/components/text-wrapper/TextWrapper.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-v-html -->
 <template>
   <div v-if="sanitizeText" class="tw-w-full" :style="data.wrapperStyle">
     <div
@@ -39,6 +40,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   element: 'p',
   textStyle: {} as any,
+  slug: undefined,
 });
 
 const data = reactive<{
@@ -60,7 +62,7 @@ const textStyles = computed(() => {
 });
 
 const style = computed<any>(() => {
-  const { backgroundColor, ...textStyle } = props.textStyle;
+  const { backgroundColor: _backgroundColor, ...textStyle } = props.textStyle;
 
   return textStyle;
 });

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

@@ -1,6 +1,6 @@
 import { ALIGN_CENTERED, ALIGN_JUSTIFIED } from '../misc.constants';
 import type { ButtonGroupOption } from '@brand-page-maker/models/button-group.model';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
 export const FOOTER_DISPLAY = {
   /** @deprecated */

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

@@ -234,13 +234,6 @@ export interface ImageContent extends Content {
 }
 
 export interface ImageItem {
-  /**
-   * Stable per-item identifier. Mirrors the section-level `Content.id` one
-   * level deeper so AI tool calls can reference items by id rather than by
-   * positional index. Optional for backward compatibility with persisted data
-   * that predates item ids — backfilled on load (see ensureItemIds).
-   */
-  id?: string;
   imageUrl: string;
   imageTitle: string;
   width: number;
@@ -473,8 +466,6 @@ export interface ShapeItem extends ImageItem {
 }
 
 export interface TestimonialItems {
-  /** Stable per-item identifier. See ImageItem.id. */
-  id?: string;
   imageUrl: string;
   name: string;
   position: string;
@@ -492,8 +483,6 @@ export interface TestimonialItems {
 }
 
 export interface TextItem {
-  /** Stable per-item identifier. See ImageItem.id. */
-  id?: string;
   text: string;
   textStyle: TextStyleDeclaration;
 
@@ -563,7 +552,6 @@ export interface AboutSectionContent extends Content {
 }
 
 export interface LinksItem {
-  id?: string;
   imageUrl: string;
   url: string;
   size?: string;
@@ -941,6 +929,10 @@ export class BrandPageModel {
   // Model version
   v: number;
 
+  // AI personalisation key persisted with the draft so previews survive login/checkout-back/
+  // refresh - content is retrieved by this token (user-agnostic), not regenerated (bp-5742).
+  userPromptContentKey?: string;
+
   styles: PageStyles;
 
   /** @deprecated */

package/src/brand-page/models/payment.model.ts

@@ -44,7 +44,8 @@ export const isStripePaymentIntent = (
   );
 };
 
-export interface CreateCartResult<T> {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export interface CreateCartResult<T = unknown> {
   cartId: string;
   paymentProviderName: string;
   paymentProviderExternalId: string;

package/src/brand-page/models/shop.model.ts

@@ -1,5 +1,3 @@
-import type { PaymentConfig } from './payment.model';
-
 export interface VariantOptionModel {
   id: string;
   name: string;

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

@@ -84,8 +84,7 @@ export type ContentPersonalisationMapping<T extends Content> = {
     | keyof UserPersonalisationSection
     | keyof UserPersonalisationItem]?: (keyof T)[];
 };
-export interface UserPersonalisationSectionWithIndices
-  extends UserPersonalisationSection {
+export interface UserPersonalisationSectionWithIndices extends UserPersonalisationSection {
   imageIndex: number;
   shapeIndex: number;
   itemTitleIndex: number;

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -456,6 +456,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -901,6 +902,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,
@@ -1353,6 +1355,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 17,
   },
   "useOldLogoRenderSize": true,

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -472,6 +472,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
         },
       },
     },
+    "userPromptContentKey": undefined,
     "v": 0,
   },
   "useOldLogoRenderSize": false,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -446,6 +446,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;
@@ -911,6 +912,7 @@ BrandPageModel {
       },
     },
   },
+  "userPromptContentKey": undefined,
   "v": 0,
 }
 `;

package/src/brand-page/utils/migration/migration-01_1.ts

@@ -1,4 +1,4 @@
-import type { BrandPageModel, LogoImageModel } from '../..';
+import type { LogoImageModel } from '../..';
 import type { MigrationData } from '../migration.util';
 
 import { migrateLogoImage } from './logo/logo.migration.util';

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

@@ -3,7 +3,6 @@ import {
   FONT_SIZE_HEADINGS,
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type GlobalTextStyleDeclaration,

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

@@ -2,7 +2,6 @@ import {
   BRAND_PAGE_TYPES,
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type BrandPageType,
   type ButtonContent,
   type ContactFormContent,

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

@@ -1,7 +1,6 @@
 import {
   type AboutSectionContent,
   type BannerSectionContent,
-  type BrandPageModel,
   type ButtonContent,
   type ContactFormContent,
   type Content,

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

@@ -1,8 +1,4 @@
-import {
-  type BrandPageModel,
-  type TextContent,
-  type LogoImageModel,
-} from '../..';
+import { type TextContent, type LogoImageModel } from '../..';
 import type { MigrationData } from '../migration.util';
 import { isTextContent } from '../model.util';
 

package/src/brand-page/utils/migration/migration-05_2.ts

@@ -1,4 +1,4 @@
-import { type BrandPageModel, type ButtonContent } from '../..';
+import { type ButtonContent } from '../..';
 import type { MigrationData } from '../migration.util';
 
 export const migration05_2 = (

package/src/brand-page/utils/migration/migration-08.test.ts

@@ -341,7 +341,7 @@ describe('migration08', () => {
       data: 'test-template-svg-data',
     });
 
-    const result = await migration08(migrationData, {
+    const _result = await migration08(migrationData, {
       isServerRender: false,
       isUserDraft: false,
     });

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 = {