@designcrowd/library.brand-page 5.17.28 → 5.18.0

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts

@@ -25,8 +25,13 @@ import {
 } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
-import { getCtaLocationFromFieldType } from '@brand-page-maker/utils/mixpanel.util';
 
+const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
+  'descriptionStyle',
+  'titleStyle',
+  'textStyle',
+  'paragraphStyle',
+];
 const AI_ALLOWED_SECTION_TYPES = [
   'banner-section',
   'text',
@@ -222,12 +227,6 @@ export default defineComponent({
     disableTransparent(): boolean {
       return this.field.disableTransparent || false;
     },
-    showGenerateText(): boolean {
-      return (
-        AI_ALLOWED_SECTION_TYPES.includes(this.type) &&
-        AI_ALLOWED_FIELD_NAMES.includes(this.fieldName)
-      );
-    },
     plainTextValue(): string {
       const plainText = getPlainTextFromRTE(this.value);
 
@@ -235,9 +234,6 @@ export default defineComponent({
 
       return plainText;
     },
-    ctaLocation(): string {
-      return getCtaLocationFromFieldType(this.field.name, this.type);
-    },
   },
   watch: {
     fieldType() {

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.vue

@@ -20,27 +20,7 @@
         }"
       >
         <div class="tw-flex tw-flex-row tw-w-full tw-justify-between">
-          <FieldSubHeader
-            :class="{
-              'tw-mb-2': !showGenerateText || (!field.showToggle && !isInline),
-            }"
-            :title="field.title"
-          />
-          <GenerateAiButton
-            v-if="showGenerateText"
-            :id="id"
-            :existing-text="plainTextValue"
-            :is-design-com="isDesignCom"
-            :cta-location="ctaLocation"
-            :ai-context="{
-              fieldName: field.name,
-              maxChars: maxLength,
-              textStyle: content[styleName],
-            }"
-            @capture-snapshot="onCaptureSnapshot"
-            @on-use-text="onUseGeneratedText"
-            @on-use-style="onUseGeneratedStyle"
-          />
+          <FieldSubHeader class="tw-mb-2" :title="field.title" />
         </div>
         <Toggle
           v-if="showToggle"
@@ -134,7 +114,6 @@ import SliderField from '../slider-field/SliderField.vue';
 import PageDropdownField from '../page-dropdown-field/PageDropdownField.vue';
 import PersonalisationOverrideField from '../personalisation-override-field/PersonalisationOverrideField.vue';
 import BookingUrlField from '../booking-url-field/BookingUrlField.vue';
-import GenerateAiButton from '../generate-ai-button/GenerateAiButton.vue';
 
 export default {
   components: {
@@ -173,7 +152,6 @@ export default {
     'product-config-option-field': ProductConfigOptionField,
     FieldSubHeader,
     Toggle,
-    GenerateAiButton,
     'page-dropdown-field': PageDropdownField,
     'personalisation-override-field': PersonalisationOverrideField,
   },

package/src/shared/content-settings/components/testimonial-items-field/TestimonialItemsField.vue

@@ -17,17 +17,6 @@
           <h4 class="tw-mt-3 tw-mb-1.5 tw-text-sm tw-font-bold">
             {{ testimonialItemsFieldTr(`testimonial`) }}
           </h4>
-          <GenerateAiButton
-            :id="id"
-            :existing-text="getPlainTextValue(option.index)"
-            :is-design-com="isDesignCom"
-            :ai-context="{
-              fieldName: `${name}.${option.index}.testimonials`,
-              index: option.index,
-            }"
-            :cta-location="getCtaLocationFromFieldType('testimonials')"
-            @capture-snapshot="onCaptureSnapshot"
-          />
         </div>
         <TextareaField
           :value="options[option.index].testimonials"
@@ -205,9 +194,7 @@ import ImageField from '../image-field/ImageField.vue';
 import ItemsField from '../items-field/ItemsField.vue';
 import TextareaField from '../../../content-settings/components/textarea-field/TextareaField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';
-import GenerateAiButton from '../generate-ai-button/GenerateAiButton.vue';
 import { testimonialItemsFieldTr } from '@src/composables/useTranslate';
-import { getCtaLocationFromFieldType } from '@brand-page-maker/utils/mixpanel.util';
 import PersonalisationOverrideField from '../../../content-settings/components/personalisation-override-field/PersonalisationOverrideField.vue';
 
 export default {
@@ -218,14 +205,12 @@ export default {
     ImageField,
     TextareaField,
     ColorReplacementsField,
-    GenerateAiButton,
     PersonalisationOverrideField,
   },
   mixins: [TestimonialItemsFieldMixin],
   setup() {
     return {
       testimonialItemsFieldTr,
-      getCtaLocationFromFieldType,
     };
   },
 };

package/src/shared/content-settings/components/text-items-field/TextItemsField.vue

@@ -17,17 +17,6 @@
           <h4 class="tw-mt-3 tw-mb-1.5 tw-text-sm tw-font-bold">
             {{ commonTr(`text`) }}
           </h4>
-          <GenerateAiButton
-            :id="id"
-            :existing-text="getPlainTextValue(option.index)"
-            :is-design-com="isDesignCom"
-            :ai-context="{
-              fieldName: `${name}.${option.index}.text`,
-              index: option.index,
-            }"
-            :cta-location="getCtaLocationFromFieldType('text')"
-            @capture-snapshot="onCaptureSnapshot"
-          />
         </div>
         <TextareaField
           :id="id"
@@ -95,10 +84,8 @@ import TextItemsFieldMixin from './TextItemsField.mixin';
 import ItemsField from '../items-field/ItemsField.vue';
 import TextareaField from '../../../content-settings/components/textarea-field/TextareaField.vue';
 import TextStyleField from '../../../content-settings/components/text-style-field/TextStyleField.vue';
-import GenerateAiButton from '../generate-ai-button/GenerateAiButton.vue';
 import { commonTr, textItemsFieldTr } from '@src/composables/useTranslate';
 import PersonalisationOverrideField from '../../../content-settings/components/personalisation-override-field/PersonalisationOverrideField.vue';
-import { getCtaLocationFromFieldType } from '@brand-page-maker/utils/mixpanel.util';
 
 export default {
   components: {
@@ -106,7 +93,6 @@ export default {
     ItemsField,
     TextareaField,
     TextStyleField,
-    GenerateAiButton,
     PersonalisationOverrideField,
   },
   mixins: [TextItemsFieldMixin],
@@ -114,7 +100,6 @@ export default {
     return {
       commonTr,
       textItemsFieldTr,
-      getCtaLocationFromFieldType,
     };
   },
 };

package/src/shared/navigation-style-settings/store/index.ts

@@ -145,6 +145,11 @@ export const useUiNavigationStyleSettingsStore = defineStore(
           this.navigation[section][viewport].defaultButtonStyle,
           style,
         );
+
+        console.log(
+          'This is the updated default button style: ',
+          this.navigation[section][viewport].defaultButtonStyle,
+        );
       },
 
       _setSelectedButtonStyle({

package/src/shared/page-navigation/store/page-navigation-store.ts

@@ -3,6 +3,10 @@ import { NavModel, type NavOrder, type NavRoute } from '@brand-page';
 import { getPageSlugFromPageTitle } from '@brand-page-maker/utils/slug.util';
 import { navigateToPageByPageId } from '../../../brand-page-maker/routing';
 import { useUiPageSettingsStore } from '@src/shared/page-settings/store';
+import {
+  findParentOrderByRouteId,
+  removeOrderByRouteId,
+} from '../utils/nav-order-utils';
 
 export interface PageNavigationState {
   routes: NavRoute[];
@@ -10,37 +14,6 @@ export interface PageNavigationState {
   activePageId: string;
 }
 
-const findParentOrderByRouteId = (
-  orders: NavOrder[],
-  routeId: string,
-): NavOrder | undefined => {
-  for (const order of orders) {
-    if (order.routeId === routeId) {
-      return order;
-    }
-
-    const found = findParentOrderByRouteId(order.subRoutes, routeId);
-
-    if (found) {
-      return found;
-    }
-  }
-
-  return undefined;
-};
-
-const removeOrderByRouteId = (
-  orders: NavOrder[],
-  routeId: string,
-): NavOrder[] => {
-  return orders
-    .filter((order) => order.routeId !== routeId)
-    .map((order) => ({
-      ...order,
-      subRoutes: removeOrderByRouteId(order.subRoutes, routeId), // Recursively filter out the route
-    }));
-};
-
 const findParentRouteIdForRouteId = (
   orders: NavOrder[],
   targetRouteId: string,

package/src/shared/page-navigation/utils/nav-order-utils.ts

@@ -0,0 +1,32 @@
+import type { NavOrder } from '@brand-page';
+
+export const findParentOrderByRouteId = (
+  orders: NavOrder[],
+  routeId: string,
+): NavOrder | undefined => {
+  for (const order of orders) {
+    if (order.routeId === routeId) {
+      return order;
+    }
+
+    const found = findParentOrderByRouteId(order.subRoutes, routeId);
+
+    if (found) {
+      return found;
+    }
+  }
+
+  return undefined;
+};
+
+export const removeOrderByRouteId = (
+  orders: NavOrder[],
+  routeId: string,
+): NavOrder[] => {
+  return orders
+    .filter((order) => order.routeId !== routeId)
+    .map((order) => ({
+      ...order,
+      subRoutes: removeOrderByRouteId(order.subRoutes, routeId),
+    }));
+};

package/src/shared/side-bar/components/SideBar.vue

@@ -19,6 +19,7 @@
       :class="{
         'tw-pt-24': !hasQuickLinks,
         'tw-pt-36': hasQuickLinks,
+        'c-sidebar-content--ai': selectedTabName === 'AiWebsiteBuilder',
       }"
     >
       <div
@@ -30,7 +31,8 @@
       <div
         v-else
         :class="{
-          'c-sidebar-content__inner': selectedTabName !== 'AiTextEdit',
+          'c-sidebar-content__inner': selectedTabName !== 'AiWebsiteBuilder',
+          'tw-h-full': selectedTabName === 'AiWebsiteBuilder',
         }"
       >
         <slot name="tab" />
@@ -64,6 +66,17 @@ export default {
   @apply tw-mb-14;
 }
 
+.c-sidebar-content--ai {
+  overflow-y: hidden !important;
+  padding-bottom: 3.5rem !important; /* clear fixed mobile tab bar (tw-h-14) */
+}
+
+@screen lg {
+  .c-sidebar-content--ai {
+    padding-bottom: 0 !important;
+  }
+}
+
 .c-tab {
   border: none;
   border-right: 1px solid #d0d0d0;

package/src/shared/side-bar/store/side-bar-store.ts

@@ -10,22 +10,11 @@ import {
   useUiPageSettingsStore,
 } from '../../page-settings/store';
 
-export interface AiTextEditContext {
-  fieldValue: string;
-  fieldId: string;
-  fieldName: string;
-  contentType: string;
-  maxChars?: number;
-  textStyle?: BrandPageCssStyle;
-  index?: number;
-}
-
 export interface SideBarState {
   tabs: SideBarTab[];
   selectedTabName: string;
   isSwitchingTab: boolean;
   selectedSettingsSection?: string;
-  aiTextEditContext?: AiTextEditContext;
 }
 
 export const useUiSideBarStore = defineStore('uiSideBar', {
@@ -34,7 +23,6 @@ export const useUiSideBarStore = defineStore('uiSideBar', {
     selectedTabName: DEFAULT_SIDE_BAR_TABS()[1].name,
     isSwitchingTab: false,
     selectedSettingsSection: undefined,
-    aiTextEditContext: undefined,
   }),
   actions: {
     setBrandPageSettingsTabVisibility(payload: { isVisible: boolean }) {
@@ -74,13 +62,5 @@ export const useUiSideBarStore = defineStore('uiSideBar', {
     setSelectedSettingsSection(payload: { sectionName?: string }) {
       this.selectedSettingsSection = payload.sectionName;
     },
-
-    setAiTextEditContext(payload: AiTextEditContext) {
-      this.aiTextEditContext = payload;
-    },
-
-    clearAiTextEditContext() {
-      this.aiTextEditContext = undefined;
-    },
   },
 });

package/src/utils/build-asset-manifest.ts

@@ -0,0 +1,153 @@
+import type { BrandPageModel } from '../brand-page/models';
+import type { LogoImageModel } from '../brand-page/models/logo.model';
+import { FabricRenderClient } from '../clients/fabric-render-client';
+
+export interface AssetEntry {
+  key: string;
+  type: 'logo' | 'image' | 'shape';
+  data: string;
+}
+
+/**
+ * Resolve a logo's data for the asset manifest.
+ *
+ * Priority:
+ * 1. Construct a render URL from logoImage (logoDraftToken + variation) — preferred
+ *    because URLs are lightweight and the pipeline can download the rendered PNG.
+ * 2. Fall back to logoImageBase64Url if logoImage is unavailable.
+ */
+export function resolveLogoData(
+  logoImage: LogoImageModel | undefined,
+  logoImageBase64Url: string | undefined,
+): string | undefined {
+  // Try constructing URL from logoImage
+  if (logoImage?.logoDraftToken) {
+    try {
+      const client = FabricRenderClient.getInstance();
+      const url = client.getLogoVariationUrlByLogoVariationIndex(
+        logoImage.logoDraftToken,
+        logoImage.logoLastUpdate,
+        logoImage.logoVariation ?? 0,
+        'png',
+      );
+
+      if (url) return url;
+    } catch {
+      // FabricRenderClient not initialized — fall through to base64
+    }
+  }
+
+  // Fallback to base64 if available
+  return logoImageBase64Url || undefined;
+}
+
+/**
+ * Hash a string using SHA-256 and return the first 16 hex characters.
+ * Uses the Web Crypto API (available in browsers and modern runtimes).
+ */
+async function hashData(data: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const hashBuffer = await crypto.subtle.digest(
+    'SHA-256',
+    encoder.encode(data),
+  );
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+
+  return hashArray
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('')
+    .slice(0, 16);
+}
+
+/**
+ * Build an asset manifest from the brand page model.
+ *
+ * Collects unique visual assets (logos, background images, section images)
+ * with their resolved data (base64 or URL) and a content hash key.
+ * Each asset appears exactly once — deduped by data content.
+ * The pipeline uses the key to cache analysis and cross-reference via
+ * asset keys embedded in the minified metadata (logoAssetKey, backgroundAssetKey).
+ */
+export async function buildAssetManifest(
+  model: BrandPageModel,
+): Promise<AssetEntry[]> {
+  const assets: AssetEntry[] = [];
+  const hashPromises: Promise<void>[] = [];
+  const seenData = new Set<string>();
+
+  const addEntry = (type: AssetEntry['type'], data: string) => {
+    if (seenData.has(data)) return;
+
+    seenData.add(data);
+
+    const entry: AssetEntry = { key: '', type, data };
+
+    assets.push(entry);
+    hashPromises.push(
+      hashData(data).then((key) => {
+        entry.key = key;
+      }),
+    );
+  };
+
+  // --- Logos from header/footer (4 viewports) ---
+  const logoSections = [
+    model.pageHeaderDesktop,
+    model.pageHeaderMobile,
+    model.pageFooterDesktop,
+    model.pageFooterMobile,
+  ];
+
+  for (const section of logoSections) {
+    if (!section?.isLogoVisible) continue;
+
+    const data = resolveLogoData(
+      (section as any).logoImage,
+      section.logoImageBase64Url,
+    );
+
+    if (data) addEntry('logo', data);
+  }
+
+  // --- Global background image ---
+  const bgUrl = model.styles?.backgroundStyles?.backgroundImageUrl;
+
+  if (bgUrl) addEntry('image', bgUrl);
+
+  // --- Section content images ---
+  for (const page of model.pages || []) {
+    for (const content of page.contents || []) {
+      const c = content as any;
+
+      // Top-level image fields (banner, about, image, profile)
+      if (c.imageUrl) addEntry('image', c.imageUrl);
+
+      if (c.avatarImageUrl) addEntry('image', c.avatarImageUrl);
+
+      // items[] — images-section, shapes-section, testimonial-section
+      if (Array.isArray(c.items)) {
+        for (const item of c.items) {
+          if (item.imageUrl) addEntry('image', item.imageUrl);
+        }
+      }
+
+      // images[] — image-gallery
+      if (Array.isArray(c.images)) {
+        for (const img of c.images) {
+          if (img.imageUrl) addEntry('image', img.imageUrl);
+        }
+      }
+
+      // links[] — social-links
+      if (Array.isArray(c.links)) {
+        for (const link of c.links) {
+          if (link.imageUrl) addEntry('image', link.imageUrl);
+        }
+      }
+    }
+  }
+
+  await Promise.all(hashPromises);
+
+  return assets;
+}