@designcrowd/library.brand-page 5.19.1 → 6.0.0-undo-redo-1

package/src/metadata-builder/builders/reorder-pages-builder.ts

@@ -0,0 +1,80 @@
+import type { BrandPageModel, NavOrder } from '../../brand-page/models';
+import {
+  BaseMetadataBuilder,
+  type BuilderResult,
+  type MetadataBuilderRequest,
+} from '../models';
+import type { Logger } from '../logger';
+
+export interface ReorderPagesPayload {
+  pageOrder: string[];
+}
+
+export class ReorderPagesBuilder extends BaseMetadataBuilder<ReorderPagesPayload> {
+  constructor(
+    request: MetadataBuilderRequest<ReorderPagesPayload>,
+    logger?: Logger,
+  ) {
+    super(request, logger);
+  }
+
+  async validateAsync(): Promise<{ errors: string[] }> {
+    const errors: string[] = [];
+    const payload = this.request.payload;
+
+    if (!payload?.pageOrder?.length) {
+      errors.push('page_order is required for reorder_pages');
+    }
+
+    return { errors };
+  }
+
+  async buildAsync(model: BrandPageModel): Promise<BuilderResult> {
+    this.log('Build called');
+
+    const validation = await this.validateAsync();
+
+    if (validation.errors.length) {
+      return { request: this.request, model, errors: validation.errors };
+    }
+
+    const { pageOrder } = this.request.payload!;
+
+    // Build pageId → routeId lookup from nav.routes
+    const pageIdToRouteId = new Map<string, string>();
+
+    for (const route of model.nav.routes) {
+      pageIdToRouteId.set(route.pageId, route.id);
+    }
+
+    // Build new nav.orders from the flat page_order (array of pageIds)
+    const newOrders: NavOrder[] = [];
+    const seenRouteIds = new Set<string>();
+
+    for (const pageId of pageOrder) {
+      const routeId = pageIdToRouteId.get(pageId);
+
+      if (!routeId) continue;
+
+      newOrders.push({ routeId, subRoutes: [] });
+      seenRouteIds.add(routeId);
+    }
+
+    // Safety: append any routes not mentioned (don't lose pages)
+    for (const route of model.nav.routes) {
+      const routeId = pageIdToRouteId.get(route.pageId);
+
+      if (routeId && !seenRouteIds.has(routeId)) {
+        newOrders.push({ routeId, subRoutes: [] });
+      }
+    }
+
+    model.nav.orders = newOrders;
+
+    this.log({
+      message: `Reordered pages: ${pageOrder.join(', ')}`,
+    });
+
+    return { request: this.request, model };
+  }
+}

package/src/metadata-builder/builders/section-builders/image-gallery-builder.ts

@@ -46,7 +46,7 @@ const mergeGalleryImages = (
     const existing = content.images?.[index];
     const imageUrl = isValidUrl(img.image_url)
       ? img.image_url!
-      : existing?.imageUrl ?? '';
+      : (existing?.imageUrl ?? '');
 
     return {
       ...(existing || {}),

package/src/metadata-builder/builders/section-builders/images-section-builder.ts

@@ -80,7 +80,7 @@ const mergeImageItems = (
       ...(existing || {}),
       imageUrl: isValidUrl(item.image_url)
         ? item.image_url!
-        : existing?.imageUrl ?? '',
+        : (existing?.imageUrl ?? ''),
       imageTitle: existing?.imageTitle ?? '',
       width: existing?.width ?? 0,
       height: existing?.height ?? 0,

package/src/metadata-builder/builders/section-builders/testimonial-section-builder.ts

@@ -128,7 +128,7 @@ const mergeTestimonialItemsAsync = async (
         ? 'shape'
         : item.avatar_image_url
           ? 'image'
-          : existing?.mediaType ?? 'image';
+          : (existing?.mediaType ?? 'image');
 
       return {
         ...(existing || {}),

package/src/metadata-builder/builders/section-builders/text-section-builder.ts

@@ -128,7 +128,7 @@ const mergeTextItems = (
     ) as TextStyleDeclaration;
 
     const resolved = item.text !== undefined ? resolveText(item.text) : null;
-    const text = resolved ? resolved.html : existing?.text ?? '';
+    const text = resolved ? resolved.html : (existing?.text ?? '');
 
     return {
       text,

package/src/metadata-builder/builders/shape-color-utils.ts

@@ -68,8 +68,8 @@ export const applyColorThemeToReplacements = (
     replacementColor:
       replacements.length === 1
         ? colorTheme
-        : getNewColorBasedOnTargetColorTheme(
+        : (getNewColorBasedOnTargetColorTheme(
             r.originalColor,
             colorTheme,
-          )?.toString() ?? colorTheme,
+          )?.toString() ?? colorTheme),
   }));

package/src/plugins/google-maps-plugin/google-maps-plugin.ts

@@ -31,10 +31,10 @@ export interface AddressDetails {
 export class GoogleMapsPlugin {
   private initialised = false;
   private initialising = false;
-  private readonly _options: GoogleMapsPluginOptions;
+  private readonly options: GoogleMapsPluginOptions;
 
   constructor(options: GoogleMapsPluginOptions) {
-    this._options = options;
+    this.options = options;
   }
 
   private async initialise(): Promise<void> {
@@ -111,7 +111,7 @@ export class GoogleMapsPlugin {
     const { PlaceAutocompleteElement } = await this.getPlacesLibrary();
 
     return new PlaceAutocompleteElement({
-      requestedLanguage: this._options.locale,
+      requestedLanguage: this.options.locale,
       ...options,
     });
   }
@@ -149,17 +149,17 @@ export class GoogleMapsPlugin {
   }
 
   private getGoogleScriptUrl(): string {
-    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this._options.apiKey}&libraries=places&loading=async`;
+    const baseUrl = `https://maps.googleapis.com/maps/api/js?key=${this.options.apiKey}&libraries=places&loading=async`;
 
-    return this._options.locale
-      ? `${baseUrl}&language=${this._options.locale}`
+    return this.options.locale
+      ? `${baseUrl}&language=${this.options.locale}`
       : baseUrl;
   }
 
   getEmbedGoogleMapsSrc(options: GetEmbedGoogleMapsOptions): string {
     const mapMode = options.mapMode || MAP_MODE_PLACE;
-    const locale = options.locale || this._options.locale;
-    const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this._options.apiKey}&q=${options.query}`;
+    const locale = options.locale || this.options.locale;
+    const baseUrl = `https://www.google.com/maps/embed/v1/${mapMode}?key=${this.options.apiKey}&q=${options.query}`;
 
     return locale ? `${baseUrl}&language=${locale}` : baseUrl;
   }

package/src/shared/background-settings/components/BackgroundSettings.vue

@@ -174,7 +174,7 @@ const isPersonalisationEnabled = computed(
 );
 const isDesignCom = computed(() => containerStore.isDesignCom);
 
-const emit = defineEmits(['on-intent-image-replace']);
+defineEmits(['on-intent-image-replace']);
 
 const shapeTabs = [
   backgroundSettingsTr(`background`),

package/src/shared/background-settings/components/background-color/BackgroundColorSettings.vue

@@ -22,7 +22,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, type PropType } from 'vue';
+import { computed } from 'vue';
 import { HelloBar } from '@designcrowd/fe-shared-lib';
 import { useUiBackgroundSettingsStore } from '../../store';
 import ColorField from '../../../content-settings/components/color-field/ColorField.vue';

package/src/shared/color-picker/components/ColorPicker.mixin.ts

@@ -3,15 +3,9 @@ import { Icon } from '@designcrowd/fe-shared-lib';
 import ColorPickerSwatch from './ColorPickerSwatch.vue';
 import type { ColorValue, ColorGroupItem, ColorGroup } from '../models';
 import { DEFAULT_COLORS, DEFAULT_GRADIENT_COLORS } from '../constants';
-import {
-  RGBAtoHex,
-  hexToRGB,
-  arrayToLinearGradient,
-  isRgbColor,
-} from '@utils/helpers';
+import { RGBAtoHex, arrayToLinearGradient, isRgbColor } from '@utils/helpers';
 import { normalizeColorToHex, colorsMatch } from '@brand-page/utils/style.util';
 import { colorPickerTr } from '@src/composables/useTranslate';
-import { useUiStyleSettingsStore } from '../../style-settings/store';
 
 // Simple session storage for newColors (persists during browser session, clears on refresh)
 let sessionNewColors: ColorGroupItem[] = [];
@@ -53,6 +47,7 @@ export default defineComponent({
       default: () => false,
     },
   },
+  emits: ['on-color-select'],
   data() {
     const groups: ColorGroup[] = [];
     const newColors: ColorGroupItem[] = [];

package/src/shared/color-picker/components/ColorPickerSwatch.mixin.ts

@@ -7,6 +7,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['click'],
   data() {
     const styles: BrandPageCssStyle = this.color.styles;
 

package/src/shared/common/NumberInput.vue

@@ -53,6 +53,7 @@ export default {
       default: 1,
     },
   },
+  emits: ['update:model-value'],
   data() {
     return {
       priceValue: this.modelValue,

package/src/shared/common/SideBarSettingsHeader.vue

@@ -33,9 +33,9 @@
 </template>
 <script setup lang="ts">
 import { Button } from '@designcrowd/fe-shared-lib';
-import { tr, commonTr } from '@src/composables/useTranslate';
+import { commonTr } from '@src/composables/useTranslate';
 
-const props = defineProps({
+defineProps({
   showBackButton: {
     type: Boolean,
     required: false,

package/src/shared/confirm-modal/ConfirmModal.mixin.ts

@@ -14,6 +14,7 @@ export default defineComponent({
       required: false,
     },
   },
+  emits: ['confirm', 'cancel'],
   setup() {
     const containerStore = useBrandPageContainerStore();
 

package/src/shared/content-settings/components/booking-url-field/BookingUrlField.vue

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

package/src/shared/content-settings/components/button-configuration-field/ButtonConfigurationField.vue

@@ -137,6 +137,7 @@ const props = withDefaults(defineProps<Props>(), {
   titleLength: MAX_TITLE_LENGTH,
   descriptionLength: MAX_DESCRIPTION_LENGTH,
   isAdmin: false,
+  pages: undefined,
 });
 
 const pageSettingsStore = useUiPageSettingsStore();

package/src/shared/content-settings/components/color-field/ColorField.vue

@@ -70,14 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  ref,
-  computed,
-  watch,
-  onMounted,
-  onBeforeMount,
-  type PropType,
-} from 'vue';
+import { ref, computed, watch, onMounted, onBeforeMount } from 'vue';
 import { Toggle } from '@designcrowd/fe-shared-lib';
 import {
   addTransparentAlphaChannelToHex,
@@ -320,8 +313,8 @@ onBeforeMount(() => {
 onMounted(() => {
   const toggleState = Boolean(
     color.value &&
-      typeof color.value === 'string' &&
-      !isHexTransparent(color.value),
+    typeof color.value === 'string' &&
+    !isHexTransparent(color.value),
   );
 
   emit('on-toggle-state-change', toggleState);

package/src/shared/content-settings/components/content-settings/ContentSettings.mixin.ts

@@ -17,7 +17,6 @@ import {
 import { SIDE_BAR_CONTENT_ID } from '../../constants';
 import type { ComponentPublicInstance } from '@vue/runtime-core';
 import {
-  EVENTS,
   SELECT_LOCATIONS,
   useEventTracker,
 } from '@brand-page-maker/composables/useEventTracker';
@@ -37,6 +36,7 @@ interface CategoryTab {
 }
 
 export default defineComponent({
+  emits: ['capture-preview-snapshot'],
   setup() {
     const brandPageMakerStore = useBrandPageMakerStore();
     const contentSettingsStore = useUiContentSettingsStore();

package/src/shared/content-settings/components/content-settings/ContentSettingsLockedButton.vue

@@ -41,6 +41,7 @@ export default {
       required: true,
     },
   },
+  emits: ['on-click'],
   methods: {
     onClick(ev) {
       this.$emit('on-click', ev);

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

@@ -49,6 +49,11 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: [
+    'on-delete',
+    'capture-snapshot-before-modal',
+    'capture-preview-snapshot',
+  ],
   setup() {
     const contentSettingsStore = useUiContentSettingsStore();
     const sideBarStore = useUiSideBarStore();

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

@@ -16,7 +16,6 @@ import { SIDE_BAR_TAB_NAMES } from '@brand-page-maker/constants';
 import { ITEM_FIELD_TYPES, type ItemFieldType } from '@brand-page-maker/models';
 import { useUiPageSettingsStore } from '../../../page-settings/store';
 import { PAGE_SECTIONS } from '../../../page-settings/models';
-import { commonTr } from '@src/composables/useTranslate';
 import {
   getPlainTextFromRTE,
   replaceTextInRTE,
@@ -26,19 +25,6 @@ import {
 import { isDefaultContentText } from '@shared/content-settings/utils';
 import { useUiLogoSettingsStore } from '../../../logo-settings/store';
 
-const RTE_DISALLOWED_STYLE_FIELD_NAMES = [
-  'descriptionStyle',
-  'titleStyle',
-  'textStyle',
-  'paragraphStyle',
-];
-const AI_ALLOWED_SECTION_TYPES = [
-  'banner-section',
-  'text',
-  'about-section',
-  'testimonials-section',
-];
-const AI_ALLOWED_FIELD_NAMES = ['description', 'title', 'text', 'paragraph'];
 const RTE_DISALLOWED_FIELD_NAMES = ['buttonText'];
 
 export default defineComponent({
@@ -62,6 +48,7 @@ export default defineComponent({
       default: undefined,
     },
   },
+  emits: ['capture-preview-snapshot'],
   setup() {
     const contentSettingsStore = useUiContentSettingsStore();
     const brandPageMakerStore = useBrandPageMakerStore();

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

@@ -25,20 +25,18 @@ import {
   type PersonalisationRole,
 } from '@brand-page';
 import { buildRelativePathFromParams } from '@brand-page/utils/route.util';
-import {
-  switchAllContentToRTE,
-  isRTEManagedStyleField,
-} from '@brand-page-maker/utils';
+import { isRTEManagedStyleField } from '@brand-page-maker/utils';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
 import { useExternalRichTextEditor } from '@brand-page-maker/composables/rich-text-editor/useRichTextEditor';
 import { useUiStyleSettingsStore } from '@shared/style-settings/store';
 
 export default defineComponent({
+  emits: ['capture-preview-snapshot'],
   setup() {
     const contentSettingsStore = useUiContentSettingsStore();
     const brandPageMakerStore = useBrandPageMakerStore();
-    const pageSettingsStore = useUiPageSettingsStore();
-    const styleSettingsStore = useUiStyleSettingsStore();
+    const _pageSettingsStore = useUiPageSettingsStore();
+    const _styleSettingsStore = useUiStyleSettingsStore();
 
     const userStore = useBrandPageMakerUserStore();
     const uiStore = useUiStore();

package/src/shared/content-settings/components/icon-library/IconLibrary.mixin.ts

@@ -6,6 +6,7 @@ export default defineComponent({
   components: {
     Icon,
   },
+  emits: ['on-select-image'],
   data() {
     return {
       orderedIcons: BRAND_PAGE_ICONS,

package/src/shared/content-settings/components/items-field/ItemsField.mixin.ts

@@ -30,7 +30,7 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['items-change', 'items-delete'],
+  emits: ['items-change', 'items-delete', 'itemsEdit'],
   data: () => ({
     itemStates: {} as Record<number, ItemFieldState>,
   }),

package/src/shared/content-settings/components/logo-selection-field/LogoSelectionField.vue

@@ -133,7 +133,7 @@ const onLogoVersionSelected = async (
   const logoDraftAsset = logoStore.getLogoDraftAssetByToken(
     selectedLogoVersion.token,
   );
-  const brandPageMakerStore = useBrandPageMakerStore();
+  const _brandPageMakerStore = useBrandPageMakerStore();
   const uiStore = useUiStore();
   const pageSettingsStore = useUiPageSettingsStore();
 

package/src/shared/content-settings/components/logo-size-field/LogoSizeSliderField.vue

@@ -27,7 +27,7 @@ const props = defineProps<Props>();
 
 const emit = defineEmits(['update:model-value']);
 
-const data = reactive<Data>({
+const _data = reactive<Data>({
   suffix: null,
 });
 

package/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.vue

@@ -71,7 +71,7 @@ const addPageButtonVariant = computed((): string => {
   return canAddPages.value ? 'outline' : 'primary';
 });
 
-const selectedPageName = computed((): string => {
+const _selectedPageName = computed((): string => {
   return selectedPage.value;
 });
 

package/src/shared/content-settings/components/personalisation-role-field/PersonalisationRoleField.vue

@@ -23,12 +23,12 @@
         None
       </DropdownItem>
       <DropdownItem
-        v-for="value of data.dropdownValues"
-        :key="value"
+        v-for="dValue of data.dropdownValues"
+        :key="dValue"
         class="tw-text-black tw-break-all tw-capitalize"
-        @click="onSelectPersonalisationRole(value as PersonalisationRole)"
+        @click="onSelectPersonalisationRole(dValue as PersonalisationRole)"
       >
-        {{ value }}
+        {{ dValue }}
       </DropdownItem>
     </Dropdown>
   </div>

package/src/shared/content-settings/components/text-image-field/TextImageField.vue

@@ -278,14 +278,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, type PropType } from 'vue';
-import {
-  Button,
-  TextInput,
-  Icon,
-  ButtonGroup,
-  Toggle,
-} from '@designcrowd/fe-shared-lib';
+import { ref, computed, watch, onMounted } from 'vue';
+import { Button, TextInput, Icon, Toggle } from '@designcrowd/fe-shared-lib';
 import ImageField from '../image-field/ImageField.vue';
 import ItemsField from '../items-field/ItemsField.vue';
 import ColorReplacementsField from '../color-replacements-field/ColorReplacementsField.vue';

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

@@ -19,7 +19,7 @@ import type { UpdateItemValuePayload } from '../../models';
 import cloneDeep from 'lodash.clonedeep';
 import { decodeHtmlEntities, escapeContentText } from '@brand-page/utils';
 import { useSnapshotStore } from '@brand-page-maker/stores';
-import { getPlainTextFromRTE, replaceTextInRTE } from '@brand-page-maker/utils';
+import { getPlainTextFromRTE } from '@brand-page-maker/utils';
 import { isDefaultContentText } from '../../utils';
 
 const DEBOUNCE_IN_MS = 250;

package/src/shared/content-settings/models.ts

@@ -43,8 +43,9 @@ export interface Tab {
   active: boolean;
 }
 
-export interface ContentReplaceImageSettings<TContent>
-  extends ReplaceImageSettingsBase {
+export interface ContentReplaceImageSettings<
+  TContent,
+> extends ReplaceImageSettingsBase {
   setContentMedia: (
     content: TContent,
     value: SetContentMediaPayload,

package/src/shared/content-settings/utils.ts

@@ -1,5 +1,4 @@
 import type { Field, UpdateItemValuePayload } from './models';
-import { ESCAPED_NEWLINE_CHARACTER } from '../../constants/ui';
 import type {
   ContentSettingsConfig,
   ContentSettingsMultiField,

package/src/shared/dropzone-image-uploader/components/DropzoneImageUploader.vue

@@ -114,6 +114,7 @@ const props = defineProps({
     type: Function as PropType<() => Promise<DropzoneOptions>>,
     required: true,
   },
+  // eslint-disable-next-line vue/require-default-prop
   accept: {
     type: Function as PropType<
       (file: DropzoneFile, done: (error?: string | Error) => void) => void

package/src/shared/ecommerce-settings/store/cart-store.test.ts

@@ -1,5 +1,5 @@
 import { setActivePinia, createPinia } from 'pinia';
-import { describe, beforeEach, it, expect, vi } from 'vitest';
+import { describe, beforeEach, it, expect } from 'vitest';
 import { useCartStore } from './cart-settings-store';
 import { useShopConfigStore } from './shop-settings-store';
 

package/src/shared/font-family-selector/FontFamilySelector.mixin.ts

@@ -15,6 +15,7 @@ export default defineComponent({
       required: true,
     },
   },
+  emits: ['on-select'],
   data() {
     return {
       fontFamilyCategories: Object.values(FONT_FAMILY_CATEGORIES()),

package/src/shared/image-gallery-style-settings/ImageGalleryStyleSettings.mixin.ts

@@ -14,6 +14,7 @@ export default defineComponent({
       default: undefined,
     },
   },
+  emits: ['gallery-type-selected'],
   methods: {
     onGalleryTypeClick(galleryType: GalleryType) {
       this.$emit('gallery-type-selected', galleryType);

package/src/shared/logo-settings/components/EditLogoSettings.mixin.ts

@@ -190,7 +190,7 @@ export default defineComponent({
             y1: 0,
             y2: 1,
           },
-          colorStops: newColor.colors.map((c, i) => {
+          colorStops: newColor.colors.map((c, _i) => {
             return {
               color: c.color,
               offset: c.pos / 100,

package/src/shared/logo-settings/components/LogoSettings.mixin.ts

@@ -6,7 +6,6 @@ import {
   useLogoStore,
 } from '@brand-page-maker/stores';
 import { useUiPageSettingsStore } from '@shared/page-settings/store';
-import type { ContentItem } from '@shared/content-settings/models';
 import type { CreateWebsiteByoUploadResult } from '@shared/website-byo-upload/WebsiteByoUploadModels';
 
 export interface Tab {

package/src/shared/logo-settings/components/LogoSettingsHeader.mixin.ts

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import { useUiLogoSettingsStore } from '../store';
 
 export default defineComponent({
+  emits: ['on-back'],
   setup() {
     const logoSettingsStore = useUiLogoSettingsStore();
 

package/src/shared/logo-settings/components/LogoStyleSettingsWithState.vue

@@ -69,14 +69,14 @@ const viewport = computed<ViewportsType>(() => {
   return brandPageMakerStore.viewport;
 });
 
-const logoSliderMin = computed(() => {
+const _logoSliderMin = computed(() => {
   if (viewport.value === VIEWPORTS.mobile) {
     return LOGO_SLIDER_MOBILE_MIN;
   }
   return LOGO_SLIDER_DESKTOP_MIN;
 });
 
-const logoSliderMax = computed(() => {
+const _logoSliderMax = computed(() => {
   if (viewport.value === VIEWPORTS.mobile) {
     return LOGO_SLIDER_MOBILE_MAX;
   }

package/src/shared/logo-settings/components/LogoTemplateSearch.vue

@@ -183,7 +183,7 @@ const onNewLogoSelected = async () => {
   const client = FabricRenderClient.getInstance();
 
   // To handle parallel requests
-  const [_, logoDesignAttributes] = await Promise.all([
+  const [__, logoDesignAttributes] = await Promise.all([
     updateTask(),
     client.getLogoAttributesByLogoTemplateTokenAsync(
       data.selectedTemplate.token,

package/src/shared/logo-settings/store/editable-logo-store.ts

@@ -311,7 +311,7 @@ export const useUiEditableLogoStore = defineStore('uiEditableLogo', {
 
       this.logoEdits.textObjects = [];
 
-      templateMetadata.objects.forEach((o, i) => {
+      templateMetadata.objects.forEach((o, _i) => {
         const matchingDraftObject = draftMetadata?.objects?.find(
           (d) => d.id === o.id,
         );